表单是网页搜集用户输入信息的最常见方式
表单的组成：
- 外壳 form
- 表单输入 input
- 选择列表 select
- 关联表单控件 label for
ps：很多表单属性有name，这个name属性是给服务器看的，如果没有name就不会往服务器传输。
form
表单的外壳，所有表单部分代码都应该被form标签包裹在内。
主要作用是把用户输入的信息发送到后台。
主要有action、name、method三个属性
- action 数据发往的地址
- name 表单提交到服务器的名称
- method 提交数据的方式，有get和post两种。
- get 是url的简单拼接，工作原理是把全部input标签里的name属性（以name='xxx'的方式）拿出来用&进行拼接，放到url里，最后把这个合成的url发到服务器。
ps：get方式不太安全，关键数据会显示出来，而且传输的数据量受限于url长度限制，get无法传送较大数据。 - post 保密性比较好，url里不会有关键数据，不受浏览器的限制可以发送大量数据。
input
输入表单，有很多常用类型，具体类型由type属性控制
PS：一个特殊的input属性，disabled="disabled"表示该input标签被禁止编辑。
-
text type='text'
文本输入框，这里按回车是不能换行的。
-
password
密码输入框
-
checkbox
复选框
1. 备选项的name值必须相同，这样服务器才知道这几个选项属于同一个复选框；
2. 备选项的value属性值最好与备选项内容有关联，有了value值服务器才知道这个复选框到底被选了什么，被选项value属性会作为备选项name的值（以数组形式）发送给服务器。
3. checked='checked'预先选定该项
-
radio
单选框，和checkbox一样，备选项的name值必须一致，value必须有值（如果没有value的话，服务器收到的只有一个on，根本不知道选了什么）
提交的内容： 【name值】:【被选项的value值】
-
file
上传文件，这个标签有一个accept属性，如果写了accept属性，那么就只能上传accept属性允许的格式文件，
<input type='file' accept='image/png'>就说明这个按钮只允许上传png文件。
-
textarea
文本域，textarea跟text不通的不仅是文本域可以换行，它本身是有闭合标签的。故而它的value值不在textarea标签属性内，而是在两个标签中间。
-
hidden
页面看不见这个控件，<input type='hidden' name='xx' value='123'>
一般适用于网站安全，可以防止别人用假的页面数据欺骗服务器。
-
button
<input type='button' value='Button'>
就是一个按钮
-
submit
提交表单，是一个特殊的button，它集成了提交这个功能，如果用js写了提交功能绑定到按钮上，那么就要把submit改回button，否则会提交两次。
-
reset
刷新表单，并让表单回到value所指定的值，一般是清空；
这里有一种特殊情况，value本来就有值的，比如保留了上次输入的信息，那么就不会清空表单了而是回到上次输入状态。
PS：有一个特别的input属性，placeholder，placeholder='请输入密码'；这样的话会有默认的类似灰色【请输入密码】字样，一旦输入信息【请输入密码】会自动消失，如果没输入信息点了submit也不会把palceholder的值发送到服务器。
select
下拉菜单
<select name='city'>
<option value='xx'>xx</option>
<option value='ab' selected>ab</option>
</select>
如果想预先选定，就在相应选项的option标签末尾加一个selected即可
label for
把文本和表单控件绑定到一起，达到点击文本就触发相关表单控件的效果
<label for='xxx'>abd</label>
点击abd就等于点击了【id属性为xxx】的表单控件（input或者别的什么）
网友评论