表单标签

学习HTML中的表单标签及其相关属性HTML表单指南 - 学习 Web 开发 | MDN (mozilla.org) (opens new window)

表单用来收集用户信息

组成

• 表单域
• 表单控件（表单元素）
• 提示信息

表单域

表单域 是一个 包含表单元素的区域

<form></form> 标签用于定义表单域，以实现用户信息的收集和传递

form 会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式get/post" name="表单域名称">
    各种表单控件
</form>

表单控件（表单元素）

input 收集用户信息

<intput type="属性值" name="" value="" checked="checked" maxlength=""/>

type属性值	描述
button	可以点击的按钮，用于通过js启动脚本
checkbox	复选框
file	输入字段和"浏览"按钮，供文件上传
hidden	隐藏的输入字段
image	图像形式的提交按钮
password	密码字段，字符被掩码
radio	单选安按钮
reset	重置按钮，清除表单所有数据
submit	提交按钮，把表单数据发送到服务器
text	单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

其他属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度

注意

1. name和value每个表单都有的属性值，主要给后台人员使用
2. name表单元素的名字，要求单选按钮和复选框要有相同的name值
3. checked 针对单选、复选 打开页面默认选中某个元素

新增的input类型

属性值	说明
type="email"	限制用户输入必须为email类型
url	url
data	日期
time	时间
month	月
week	周
number	数字
tel	手机号码
search	搜索框
color	生成一个颜色选择表单

label 标注/标签

绑定一个表单元素，当点击label标签内文本时，浏览器自动将光标转到或选择对应的表单元素上，用来增加用户体验

<label>标签的for属性应与对应表单id属性相同

<label for="sex">男</lable>
<input type="radio" name="sex" id="sex" /> 

button 标签

<button type="submit">Send your message</button>

submit 提交表单 reset 重置表单 button 没有行为

select下拉表单元素

<select>
    <option selectd="selected">选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

注意

1. select里至少有一个option
2. option中定义selectd="selected"，当前项为默认项

textarea文本域元素

多行文本输入（留言板、评论）

<textarea row="3" cols="20">
文本内容
</textarea>

row：行数 cols：每行字符数

开发中使用CSS来改变大小

• IE9+以上版本才支持

新增的表单属性

属性	值	说明
required	required	必填。表单拥有该属性表示其内容不能为空
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	记住之前输入的文字并提示，默认打开（需要放在表单内，同时加上name属性，同时成功提交）
multiple	multiple	可以多选文件提交

修改placehoder里的颜色

input::placeholder {
    color: pink;
}