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 空格转换为 "+" 加号,但不对特殊字符编码。
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]">
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>
textarea
textarea多行文本输入表单元素
可以通过rows和cols规定textarea尺寸
<textarea cols="30" rows="10"></textarea>
select
select下拉菜单
<select>
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>