表单是网页搜集用户输入信息的最常见方式
表单的组成:
- 外壳 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或者别的什么)