表单标签<form>：表单的作用是收集信息

表单标签<form>：表单的作用是收集信息

（1）属性

<1>action="URL":一个URL地址，指定form表单向何处发送数据

<2>name：给表单定一个名字

<3>enctype=“string”：规定表单数据以什么形式进行编码

<4>method="get/post"：以何种方式向服务器发送数据

（2）表单元素：表单标签、表单域、表单按钮

<1>表单标签：指<form>标签本身，使用<form></form>定义

<2>表单域：是<form>标签中用来收集用户输入的每一项，通常用input标签定义，input标签

有不同类型，对应用户不同的数据

<3>表单按钮：提交<form>表单中所有的信息到服务器

<4>表单元素种类：

①单行文本框：<input type="text">，默认值是type=“text”

②密码框：<input type="password"/>

③单选按钮：<input type="radio"/>

④复选框：<input type="checkbox"/>

⑤隐藏框：<input type="hidden"/>

⑥文件上传：<input type="file"/>

⑦下拉框：<select>标签

⑧多行文本：<textarea></textarea>

⑨标签：<lable></lable>

⑩元素集：<fieldset></fieldset>

⑪提交按钮：<input type="submit"/>

⑫普通按钮：<input type="button"/>

⑬重置按钮：<input type="reset"/>

（3）<input>标签

<1>用于用户手动输入的input类型

①单行文本框：<input type="text">

②密码框：<input type="password"/>

<2>用户可以选择的input类型

①单选按钮：<input type="radio"/>

属性name：区分是否是相同的一组，name相同会分为一组，一组只能选择一个

属性checked：哪个单选按钮如果定义了checked属性就表示一打开页面默认选定该按钮

属性value：value的值传给后台程序员看的

②复选框：<input type="checkbox"/>

属性name的作用和在单选按钮中一样，但是没有什么用

属性checked的作用和在单选按钮中一致，同样可以在打开页面之后默认选中某一项

（4）<label>标签：<input>标签的描述，可以绑定某个<input>标签，使得不一定要选中该框

直接点击文字也会有同样的效果

<1>属性for：通过lable的for指向input的id，for和id的属性值要相同

   整个页面中相同的id只能有一个

（5）提交方式及表单域的name属性

<1><form>默认是以get方式向服务器提交数据，需要设置name属性，但是会在地址栏里显示出具体

的数据，所以get方式并不安全

而post不会直接显示在地址栏上

post方式和get方式的区别：

①get不安全，post比较安全

②get方式提交的内容大小有限，post方式提交的内容大小无限制

（6）用户用于上传文件的类型<input type="file">

使用file时需要配合两项：

<1>method="post"（因为文件比较大）

<2>要制定以二进制编码的方式进行传输：enctype="multipart/form-data"

（7）用户用于提交的类型

<1><input type="button">：只是一个普通的按钮，没有提交的作用。用<button>的话需要设置

value属性的值，否则就是空的按钮

<2><input type="submit"/>：本身就有提交的作用，不用设置value属性的值

<3><input type="image"/>：可以通过属性src引入一个图片，点击图片之后提交表单元素

<4><input type="reset"/>：重置按钮。重置用户输入的内容，可以通过value属性的值来设置该

重置按钮的名称

（8）<fieldset>元素集：可将表单内相关元素分组（多一个框括起来），通常和<legend>标签一

起用，<legend>标签定义了<fieldset>的提示信息

（9）<select>下拉框：定义一个下拉列表

属性：

<1>disabled="disabled"：规定下拉列表哪一项不可以用

<2>name：规定下拉列表的名称

<3>size：规定下拉列表中可见选项的数目（显示几行）

<4>selected:默认选中

<5>multiple=“multiple”将下拉列表设置为多选项

子标签：<option>、<optgroup>

<1><option></option>：定义列表项

     <option>标签又有属性value，值的意义和button的不一样，不是直接显示出来，而是提交给

     后台的

<2><optgroup></optgroup>：为option分组，通过属性label指定分组名称。是不可点的，里面的

<option>才是实际可以操作的

（10）<textarea>多行文本

属性：

<1>cols：控制输入字符的长度

<2>rows：控制输入的行数

<3>placeholder：提示

<4>readonly：规定文本区为只读（只能读取不能操作）

<5>required：规定文本域必填，不能和readonly一起用（注意用了required之后在<teataea>

</textarea>之间不要按空格或者回车，否则浏览器会认为有内容，当你不填写信息时required

不起作用）

（11）<input type="hidden"/>隐藏域：在页面中对用户不可见，可以定义属性name、value的值

来规定参数名、参数值，用于给后台提供不想让用户看见的信息

（12）文件上传控件<input type=“file”>:里面没有其他属性，作用就是可以

上传文件

·文本输入框的属性

（1）maxlength=“6”   限制输入字符长度

（2）readonly=“readonly”    将输入框设置为只读状态，不能编辑

（3）disabled=“disabled”    输入框未激活（输入框是有的但是不能用）

（4）name     输入框的名称

（5）value    将输入框的内容传给处理文件

·密码输入框：文本输入框的所有属性对密码输入框都有效

·网址控件：<input type=“url”>（如果你输入的不是一个网址的话会有提

叫你输入网址）

·日期控件：<input type=“date”>里面只能输入日期

·时间控件：<input type=“time”>里面只能输入时间

·邮件控件：<input type=“email”>里面只能输入邮件

·数字控件：<input type=“number”>里面只能输入数字

    有一个step属性，表示操作一次就跳几个数字

·滑块控件：<input type=“range”>就是出现一个滑块

    也有step属性，表示点击一次调多远

表单小案例：

（1）轮廓线：outline-style:none 取消轮廓线

（2）获取焦点：:focus获取鼠标光标状态

（3）取消表单边框：border:0 none;兼容性好

（4）lable标签：<lable for="ID名>友好性，结合:focus使用可以使点击文字

的时候光标就可以出现在表单标签内，而不需要点到表单标签才能获得焦点