使用表单目的是为了收集用户信息。
在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单。
表单的组成 在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素) 和提示信息3个部分构成。
表单域表单域是一个包含表单元素的区域。
在HTML标签中,
常用属性:
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
| name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域。 |
在英文单词中,input是输入的意思,而在表单元素中标签用于收集用户信息。
在标签中,包含一个 type 属性。
根据不同的 type 属性值,输入字段拥有很多种形式 (可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
注意:
标签为单标签。
type 属性设置不同的属性值用来指定不同的控件类型。
type 属性的属性值及其描述如下:
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
| checkbox | 定义复选框。 |
| file | 定义输入字段和"浏览"按钮,供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。 |
除type属性外,标签还有其他很多属性,其常用属性如下∶
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义 input 元素的名称。 |
| value | 由用户自定义 | 规定 input 元素的值。 |
| checked | checked | 规定此 input 元素首次加载时应当被选中。 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
- name 和 value 是每个表单元素都有的属性值,主要给后台人员使用。
- name 表单元素的名字,要求同一组单选按钮和复选框要有相同的name 值。
3. checked 属性主要针对于单选按钮和复选框,主要作用是一打开页面,就可以默认选中某个表单元素。 - maxlength 是用户可以在表单元素输入的最大字符数,一般较少使用。
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为URL类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month”” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空,为必填内容 |
| placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
| autocomplete | off / on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 默认已经打开,如 autocomplete="on”,关闭 autocomplete =“off” 需要放在表单内,同时加上name属性,同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改 placeholder 里面的字体颜色:
input::placeholder {
color: pink;
}
2.


