Forms表单

form

• method

method提交表单的请求方式get或者post
<form method="get"></form>
<form method="post"></form>

• action

action提交表单的地址
<form action="/login"></form>

• enctype

enctype发送表单数据之前如何对其进行编码
<form action="/login" method="post" enctype="application/x-www-form-urlencoded"></form>

application/x-www-form-urlencoded（默认编码方式）在发送前编码所有字符
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

更多form属性

input

• type

值	描述
text	文本
radio	单选按钮
checkbox	复选框
submit	提交按钮
button	按钮
hidden	隐藏的输入字段
image	图像形式的提交按钮
password	密码字段
file	上传文件
reset	重置按钮

radio单选按钮。单选按钮只允许用户选择中其中一个选项。
一组radio的name值要相同，例如：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女

checkbox复选框按钮。复选框按钮允许用户选择中其中一个或者多个选项。
一组checkbox的name值要相同，例如：
<input type="checkbox" name="ball" value="basketball">篮球
<input type="checkbox" name="ball" value="football">足球
<input type="checkbox" name="ball" value="tennis">网球
<input type="checkbox" name="ball" value="volleyball">排球

button按钮，点击之后执行相应绑定的事件
image图像形式的提交按钮，submit提交按钮，点击之后提交表单中的数据
<input type="image" src="/image/submit.jpg">
<input type="submit">

• placeholder

placeholder提示信息
<input type="text" placeholder="提示信息">

• autocomplete

autocomplete自动填充功能
<input type="text" autocomplete="on">  开启自动填充功能
<input type="text" autocomplete="off"> 关闭自动填充功能

• autofocus

autofocus页面加载时是否获得焦点（不适用于type="hidden"）
<input type="text" autofocus="autofocus">

• pattern

pattern规定输入字段值的格式（正则校验）
<input type="text" pattern="[0-9]">

更多input属性

label

label点击label标签时，浏览器会自动触发对应将焦点转到和标签相关的表单元素上
label标签的for属性的值需要和对应表单元素的id值相同
<form>
    <label for="male">男</label>
    <input type="radio" name="sex" value="male" id="male">
    <label for="female">Female</label>
    <input type="radio" name="sex" value="female" id="female">
</form>

更多label属性

textarea

textarea多行文本输入表单元素
可以通过rows和cols规定textarea尺寸
<textarea cols="30" rows="10"></textarea>

更多textarea属性

select

select下拉菜单
<select>
    <option value="beijing" selected="selected">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>

更多select属性

查看浏览器支持情况