html - 表单（form）&input

定义及作用

• 表单是包含表单元素的区域，而表单元素允许在表单中输入内容。
• 表单是用来收集不同类型的用户输入。

标签

• 表单使用<form>标签来设置，如下：
  <form>
  ...
  input Elements
  ...
  </form>

表单输入元素

输入标签（<input>）是表单里边主要会用到的输入标签，输入类型是由类型属性（type）定义的。常用的type类型如下：

• 文本域：<input type = "text">

<form>
<input type="text">
</form>

上述代码效果如下（可输入文本，如：“hello”）：
![运行结果 ](http:https://img.haomeiwen.com/i3114127/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标签》文章。