使用表单目的是为了收集用户信息。
在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单。
表单的组成
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素) 和提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。
在HTML标签中,<form>
标签用于定义表单域,以实现用户信息的收集和传递。
<form>
会把它范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域。 |
表单元素(表单控件)
1.<input>
表单元素
在英文单词中,input是输入的意思,而在表单元素中<input>
标签用于收集用户信息。
在<input>
标签中,包含一个 type
属性。
根据不同的 type
属性值,输入字段拥有很多种形式 (可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值"/>
注意:
<input />
标签为单标签。 type
属性设置不同的属性值用来指定不同的控件类型。
type
属性的属性值及其描述如下:
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和"浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。 |
除type
属性外,<input>
标签还有其他很多属性,其常用属性如下∶
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义 input 元素的名称。 |
value | 由用户自定义 | 规定 input 元素的值。 |
checked | checked | 规定此 input 元素首次加载时应当被选中。 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
name
和value
是每个表单元素都有的属性值,主要给后台人员使用。name
表单元素的名字,要求同一组单选按钮和复选框要有相同的name
值。checked
属性主要针对于单选按钮和复选框,主要作用是一打开页面,就可以默认选中某个表单元素。maxlength
是用户可以在表单元素输入的最大字符数,一般较少使用。
<form action="1.php" method="get" name="form1">
<!-- text 文本框用户可以里面输入任何文字-->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!-- password 密码框用户看不见输入的密码-->
密码:<input type="password" name="pwd"><br>
<!-- radio 单选按钮 可以实现多选1 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
性别:男 <input type="radio" name="sex" value="man"> 女 <input type="radio" name="sex" value="woman" checked="checked"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好:吃饭 <input type="checkbox" name="hobby" value="eat"> 睡觉 <input type="checkbox" name="hobby" value="sleep"> 打豆豆 <input type="checkbox" name="hobby" value="dadoudou">
<br>
<!-- submit 提交按钮 可以把表单域 form 里面的表单元素里面的值提交给后台服务器-->
<input type="submit" value="免费注册"><br>
<!-- reset 重置按钮 可以还原表单元素初始的默认状态-->
<input type="reset" value="重新填写"><br>
<!-- button 普通按钮 后期结合js搭配使用-->
<input type="button" value="获取短信验证码"><br>
<!-- file 文件域 上传文件使用的-->
上传头像:<input type="file">
</form>
HTML5 新增 input 表单
属性值 | 说明 |
---|---|
type=“email” | 限制用户输入必须为Email类型 |
type=“url” | 限制用户输入必须为URL类型 |
type=“date” | 限制用户输入必须为日期类型 |
type=“time” | 限制用户输入必须为时间类型 |
type=“month”” | 限制用户输入必须为月类型 |
type=“week” | 限制用户输入必须为周类型 |
type=“number” | 限制用户输入必须为数字类型 |
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type=“color” | 生成一个颜色选择表单 |
HTML5 新增表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表示其内容不能为空 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off / on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 默认已经打开,如 autocomplete="on”,关闭 autocomplete =“off” 需要放在表单内,同时加上name属性,同时成功提交 |
multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改 placeholder 里面的字体颜色:
input::placeholder {
color: pink;
}
2.<label>
标签
<label>
标签为 input
元素定义标注 (标签) 。
<label>
标签用于绑定一个表单元素
当点击<label>
标签内的文本时,浏览器就会自动将焦点 (光标) 转到或者选择对应的表单元素上,用来增加用户体验。
核心: <label>
标签的 for
属性的属性值应当与 input
元素的 id
属性的属性值相同。
<label for="sex">男</ label>
<input type="radio" name="sex" id="sex">
3.<select>
表单元素
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>
标签控件定义下拉列表。
<body>
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option>火星</option>
</select>
4.<textarea>表单元素
使用场景:
当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使 <textarea>
标签。
在表单元素中,<textarea>
标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
<body>
今日反馈:
<textarea cols="50" rows="5">
...
</textarea>
</body>
- 通过
<textarea>
标签可以轻松地创建多行文本输入框。 - cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用CSS来改变大小。