HTML5的表单标签

1.表单域

表单域是一个包含表单元素的区域。其标签为<form></form>

<form action="url地址“ method=”提交方式“那么=”表单域名称">

</form>

2.表单元素

2.1. input输入表单元素

input英译是输入的意思，而在表单元素中<input>标签用于收集用户信息。

即：<input type="属性值">

<!_1.type指定元素的类型，默认为text>

<!_可能的类型有：text、password、checkbox、radio、submit、reset、file、hidden、image、button>

<!-2.除type属性外，<input>标签还有其他很多属性，其常用属性有：name、value、size、maxlength、checked等>

2.1.1文本框

用户名：<input type="text" value="123123" name="user" size="10" maxlength="6">

1.type指定元素的类型，默认为text

2.value表示元素的初始值

3.name表示元素的名称

4.size表示单元素的初始宽度

5.maxlength表示文本框最多可输入的字符数

2.1.2密码框

密码：<input type="password" name="password" id=”“ maxlength=”6“>

1.密码框内的内容是加密的

密码框与文本框的区别主要在于，其输入的字是加密的，不能直接看到

2.1.3单选按钮

性别：<imput type="radio" name="sex" id="" value="man">男

           <imput type="radio" name="sex" id="" value="woman" checked>女

1.name值必须一样

2.value一般用英文表示 

3.type为radio时必须指定给value一个值，因为单选框是通过用户选择的，不是用户手动输入的

4.checked表示单选按钮一开始默认选中的状态，可以扩写为checked=“checked”

！！：单选按钮要有相同的name值

2.1.4复选框

爱好：<input type="checkbox" name=""hobby" id=""value="read">阅读

           <input type="checkbox" name=""hobby" id=""value="sport" checked>运动

           <input type="checkbox" name=""hobby" id=""value="travel">旅游

           <input type="checkbox" name=""hobby" id=""value="stay">宅家

！！：checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

2.1.5 文件域

文件域file是input tupe属性值，使用场景：上传文件

<input type="file" name="files id="" enctype="multiple/form-data”

1.提交数据时：name是数据名称，而具体上传的文件即为数据的值

2.一般上传文件 会设置编码属性 enctype=“multiple/form-data”

2.1.6普通按钮

1.没有提交功能

<input type="button" value="普通按钮“>

2.1.7提交按钮

<input type="submit" value="提交" name=”submit“>

1.submit只有在表单域form里面才会显示作用：向后台发送对应表单里的数据信息

2.submit标签如果也写了name，那么也会当作数据提交出去：数据名称为name，数据值为value值

!!:submit只有包含在表单域form里面才会显示作用

2.1.8重置按钮

<input type=""reset"value="重置">

1.表示恢复默认值

2.1.9图片按钮

<input type=""image" src="images/2.jpg" alt="" name="img">

!!:图片按钮也具有提交功能！！

2.2select下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面控件时，我们可以使用<select>标签控件定义下拉列表。

<select name="car" id=""size="1">

<option value="bwm">宝马</option>

<option value="audi">奥迪</option>

<option value="benz">奔驰</option></select>

1.列表框默认选择第一个option选项

2.name值在select标签上设置

3.value值在option标签上设置，value值是发给后台的数据

4..selected=”selected“表示设置成默认选项中的项 可以简写为selected

5.size表示显示的行数，默认显示一行

！！：1.<select>中至少包含一对<option>

           2.在<option>中定义selected时，当前项即为默认选中项，可以扩写为selected=“selected”

2.3 textarea文本域元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签

<textarea name="areaname" id="" cols="30" rows="10"></textarea>

1.多行文本域中cols表示显示的列数，主要控制多行文本域的宽度和显示字符个数并不是完全同步，而是一个大概的范围

2.rows表示显示的行数，主要控制多行文本域的高度

！！：cols=每行中的字符数，rows=显示的行数，我们在实际开发中不会使用，都是用css来改变大小。

总结：当前阶段不需要提交表单元素，所以我们只负责表单元素的外观形态即可，一定要注意所有的表单元素只有包含在<form></form>标签中，后期提交表单信息才能流向服务器，另外实际开发中，表单元素都得写上name 属性。