今天小编带大家学习一下HTML中非常重要的标签<form>标签,也就是表单标签,<form>标签在HTML中即必不可少,几乎每个页面有至少一个<form>标签,话不多说,直接进入今天的主题;
什么是表单标签?就是指能够和用户进行交互的控件,简单的来说就是你要输入或许选择的地方,那这个地方就是表单拉,后台会获取你输入的内容或者选择的内容进行相应的操作。
常用的表单标签有3类:input标签、select标签、textare标签、以及其他标签;以下是各个标签的详解:
首先,input标签,它是非封闭型标签,简单的写法就是<input /> 小编提醒大家,这里的/ 千万不能丢了,input标签页需要它自有属性来实现的、type属性、value属性、name属性、id属性;其中type属性是指这个表单标签的类型,比如说文本框、单选,多选(也可称为:复选),按钮等;
!!!注意 如果type不写,那么默认是文本框类型;
类型也分为:text、pass、radio、checkbox、submit、file、hidden(后面2类不常用)
1.text类型:语法规范:<input type="text">;可以有name属性、id属性、value属性、还可以有maxLength属性就是规定你输入的内容最长不能超过多少个数;readongly属性就是规定这个表单只能只读,改变内容。
2.password类型:语法规范:<input type="password">。效果就是用户输入的内容会用******代替,所以小伙伴们在输入一些密码或者出现*****的时候,那么这个表单的类型就是password类型啦;这个表单的属性和上述的text属性一致
3.radio类型:语法规定:<input type="radio">,是实现单选的效果,这个表单属性有name属性、value属性、checked属性;需要特别注意的是在radio类型下,多个radio表单的name属性的值必须是完全一致,这样才能实现单选;check属性即表示选中;
4.checkbox类型:语法规范:<input type="checkbox">;这个表单属性有name属性、value属性、checked属性;
5.按钮类型:按钮类型分为:submit(提交)、reset(重置)、button(普通按钮)语法规范:<input type="submit" value="按钮上的文字">
6.file类型:语法规范: <input type="file" />;这标签就是当需要用户上传一些本地文件时用到
!!!特别注意:如果有文件上传的话,必须将表单的enctype更改为 multipart/form-data,同时method必须为post
7、隐藏域类型:语法规范:<input type="hidden" name="" value="" />
使用场合:隐藏域在页面中是看不到的,一般会配合后台开发一起使用,从来不单独使用。
其次,select标签,就是下拉框列表,简单的写法就是<select></select>,这个标签也需要相关的属性,name属性、size属性、multip属性、value属性、selected属性;
multip属性:可以设置这个下拉列表可以多选;
selected属性:表示选中;
完整的语法规范如下:
<select name="languages">
<option value="01">html</option>
<option value="02">css</option>
<option value="03">javascript</option>
</select>
再者:<textarea>标签,语法规范:<textarea> 文本内容</textarea>常用属性:name属性、cols属性、rows属性
cols属性:规定这个文本域的列数,就是这个文本域一行最多能输入几个文字;
rows属性:规定这个文本域的行数,就是这个文本域最多能输入几行文字;
完整的语法规范如下:
<textarea cols=“10” rows“20”> 文本内容</textarea> 表示这个文本域可以输入20行10列的文本;
最后:分享一下在表单中能提高用户体验的标签<label>标签;这个标签作用在于点击表单前的文本时,表单标签会主动获取焦点,而不需要点击表单的时候才获取焦点;<label>有一个非常重要的属性for属性,它是必须存在,for属性值就是你要对应的那个表单
语法规范:<label for=""某个表单的id值"></label>
在实际的编码过程中,小编强烈建议用<label>包裹表单前的文字
预告:下一篇:你所不知道的css(一)