定义及作用
- 表单是包含表单元素的区域,而表单元素允许在表单中输入内容。
- 表单是用来收集不同类型的用户输入。
标签
- 表单使用<form>标签来设置,如下:
<form>
...
input Elements
...
</form>
表单输入元素
输入标签(<input>)是表单里边主要会用到的输入标签,输入类型是由类型属性(type)定义的。常用的type类型如下:
-
文本域:<input type = "text">
<form>
<input type="text">
</form>
上述代码效果如下(可输入文本,如:“hello”):
![运行结果 ](http://upload-images.jianshu.io/upload_images/3114127-cb76afd19c2c6ce9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ######密码字段:<input type = "password">
<form>
<input type = "password">
</form>
上述代码效果如下(输入字符不会明文显示,以圆点代替)
![运行结果](http://upload-images.jianshu.io/upload_images/3114127-17efcd54b40225b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ######单选按钮:<input type = "radio">
<form>
<input type = "radio" name = "person" value = "boy">boy
<input type = "radio" name = "person" value = "girl">girl
</form>
上述代码效果如下(将两个类型为“radio”的输入框的name属性值设成相同的,就达到单选的效果,只能选其中一个)
![运行结果](http://upload-images.jianshu.io/upload_images/3114127-f110e5aad64bbc05.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ######复选框:<input type = "checkbox">
<form>
<input type = "checkbox" name = "person" value = "bo"/>boy
<input type = "checkbox" name = "person" value = "girl">girl
<input type = "checkbox" name = "person" value = "man">man
<input type = "checkbox" name = "person" value = "woman">woman
</form>
上述代码效果如下(可选择任意多个):
![运行结果](http://upload-images.jianshu.io/upload_images/3114127-9cd31f3a24f210f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- #####提交按钮:<input type = "submit">
<form action= "#">
<input type = "checkbox" name = "person" value = "bo"/>boy
<input type = "checkbox" name = "person" value = "girl">girl
<input type = "checkbox" name = "person" value = "man">man
<input type = "checkbox" name = "person" value = "woman">woman
<input type = "submit">
</form>
上述代码效果如下(点击提交会把表单中的数据提交到action属性值所对应的文件中进行其他处理,此处用“#”代替文件名):
![运行结果](http://upload-images.jianshu.io/upload_images/3114127-c0aed1a564f8bf54.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
######下拉列表:
<form>
<select name="person">
<option value="man">man</option>
<option value="woman">woman</option>
<option value="boy">boy</option>
<option value="girl">girl</option>
</select>
</form>
![运行结果](http://upload-images.jianshu.io/upload_images/3114127-39fa934bde961e0f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##form属性
- accept-charset(“字符集”):规定服务器可处理的表单数据字符集
- 属性允许指定一系列字符集,服务器必须支持这些字符集,从而得以正确解释表单中的数据
- 如果可接受字符集与用户所使用的字符即不相匹配的话,浏览器可以选择忽略表单或是将该表单区别对待
- 默认值是“unknown”,表示表单的字符集与包含表单的文档的字符集相同。
- 常用的字符集有:
- UTF-8 - Unicode 字符编码
- ISO-8859-1 - 拉丁字母表的字符编码
- action(URL):规定当提交表单时,想何处提交表单数据
- autocomplete(on/off): 属性规定表单是否应该启用自动完成功能。
- *自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。*
- enctype: 规定在发送到服务器之前应该如何对表单数据进行编码
- application/x-www-form-urlencoded(默认):提交之前对所有字符编码
- text/plain:空格转换为 "+" 加号,但不对特殊字符编码。
- multipart/form-data:不对字符编码,在使用包含文件上传控件的表单时,必须使用该值
- method(post/get):规定用于发送 form-data 的 HTTP 方法。
- name:规定表单的名称
- novalidate:使用该属性则提交表单时不进行验证
- target:规定在何处打开actionURL,具体值可参见《html——a标签与img标签》文章。