HTML 表单基础教程

章节目标

• 理解表单的作用

• 理解表单与表单元素的关系

• 掌握表单标签及其属性

• 掌握各种表单元素标签及其属性

• 认识表单提交

HTML 目录

1. 表单概述
• 1.1 什么是表单？
• 1.2 表单与表单元素的关系

2. 使用 <form> 标签创建表单
• 2.1 基本语法
• 2.2 常用表单属性
• 2.3 GET 和 POST 提交方式的差别

3. 表单标签注意事项

4. 表单元素
• 4.1 <input /> 标签
• 4.1.1 <input> 标签的 type 属性值
• 4.1.2 <input> 标签的其他属性
• 4.2 <textarea> 标签
• 4.2.1 属性
• 4.2.2 示例
• 4.3 <select> 标签及 <option> 标签
• 4.3.1 <select> 标签属性
• 4.3.2 <option> 标签属性
• 4.3.3 示例
• 4.4 <button> 标签
• 4.4.1 属性
• 4.4.2 示例
• 4.5 <label> 标签
• 4.5.1 属性
• 4.5.2 示例
• 4.6 <fieldset> 和 <legend> 标签
• 4.6.1 属性
• 4.6.2 示例

5. 演示案例

1. 表单概述

1.1 什么是表单？

1.2 表单与表单元素的关系

2. 使用 <form> 标签创建表单

2.1 基本语法

2.2 常用表单属性

• id: 唯一标识。

• name: 表单名称，必须设置了 name 属性才能参与表单提交。

• action: 动作，指定表单数据提交到的URL。

• method: 提交方式，get（默认，不安全的）或 post（安全的）。

• enctype: 编码类型，用于指定表单数据的编码方式，常见值有 application/x-www-form-urlencoded（默认）、multipart/form-data（用于文件上传）和 text/plain。

• target: 指定表单提交后在何处显示响应结果，常见值有 _self（默认，当前窗口）、_blank（新窗口）、_parent（父窗口）和 _top（顶级窗口）。

• autocomplete: 控制表单的自动完成功能，值可以是 on 或 off。

• novalidate: 禁用表单的自动验证功能。

2.3 GET 和 POST 提交方式的差别

• GET:
• 将表单数据作为一个字符串附加在地址之后传递到服务器端。
• 数据长度有限制，不适合传输大量数据。
• 数据可见，不安全。
• 适用于搜索引擎查询、导航链接等场景。

• POST:
• 由浏览器隐藏地传递到服务器端。
• 数据长度没有限制，适合传输大量数据。
• 数据不可见，相对安全。
• 适用于用户提交敏感信息、文件上传等场景。

3. 表单标签注意事项

• 参与交互的表单元素必须具有 name 属性。

• 表单由表单元素组成。

• 表单必须有提交按钮。

• 参与表单元素传递的值由 value 属性决定。

• <form> 标签在浏览器中并不具备可见的外观，它只是作为数据的容器。为了让浏览者在表单中输入数据，还需要在表单内部创建表单元素。

4. 表单元素

4.1 <input /> 标签

4.1.1 <input> 标签的 type 属性值

1. text
• 描述: 用于输入单行文本。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• placeholder: 提示文本，当输入框为空时显示。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

2. password
• 描述: 用于输入密码，输入的内容会被隐藏。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• placeholder: 提示文本，当输入框为空时显示。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

3. checkbox
• 描述: 用于多选框，允许多个选项同时被选中。
• 属性:
• name: 输入字段的名称。
• value: 被选中时的值。
• checked: 是否默认选中。
• disabled: 是否禁用。
• 示例:

4. radio
• 描述: 用于单选按钮，同一组内的单选按钮只能有一个被选中。
• 属性:
• name: 输入字段的名称，同一组的单选按钮应具有相同的 name 值。
• value: 被选中时的值。
• checked: 是否默认选中。
• disabled: 是否禁用。
• 示例:

5. submit
• 描述: 用于提交表单。
• 属性:
• value: 提交按钮上显示的文本。
• formaction: 覆盖表单的 action 属性。
• formmethod: 覆盖表单的 method 属性。
• formtarget: 覆盖表单的 target 属性。
• formenctype: 覆盖表单的 enctype 属性。
• formnovalidate: 覆盖表单的 novalidate 属性。
• 示例:

6. reset
• 描述: 用于重置表单中的所有输入。
• 属性:
• value: 重置按钮上显示的文本。
• 示例:

7. email
• 描述: 用于输入电子邮件地址，浏览器会自动验证输入是否为有效的电子邮件格式。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• placeholder: 提示文本，当输入框为空时显示。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

8. number
• 描述: 用于输入数字，可以设置最小值、最大值和步长。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• min: 允许的最小值。
• max: 允许的最大值。
• step: 步长，每次增加或减少的值。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

9. date
• 描述: 用于选择一个日期。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• min: 允许的最小日期。
• max: 允许的最大日期。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

10. datetime-local
• 描述: 用于选择一个日期和时间，不包括时区。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• min: 允许的最小日期和时间。
• max: 允许的最大日期和时间。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

11. time
• 描述: 用于选择一个时间。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• min: 允许的最小时段。
• max: 允许的最大时段。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

12. url
• 描述: 用于输入网址，浏览器会自动验证输入是否为有效的URL。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• placeholder: 提示文本，当输入框为空时显示。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

13. search
• 描述: 用于输入搜索关键词，通常会显示一个清除按钮以方便用户清空输入。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• placeholder: 提示文本，当输入框为空时显示。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

14. tel
• 描述: 用于输入电话号码，浏览器不会自动验证输入格式。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• placeholder: 提示文本，当输入框为空时显示。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

15. file
• 描述: 用于上传文件。
• 属性:
• name: 输入字段的名称。
• accept: 接受的文件类型，例如 image/* 表示接受所有图片文件。
• multiple: 是否允许多文件上传。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

16. hidden
• 描述: 用于创建不可见的输入字段，常用于传递一些不需要用户编辑的数据。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的值。
• 示例:

17. color
• 描述: 用于选择颜色。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值，格式为六位十六进制颜色代码。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

18. range
• 描述: 用于输入范围值，通常显示为滑块。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• min: 允许的最小值。
• max: 允许的最大值。
• step: 步长，每次增加或减少的值。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

19. month
• 描述: 用于选择一个月份。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• min: 允许的最小月份。
• max: 允许的最大月份。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

20. week
• 描述: 用于选择一个周。
• 属性:
• name: 输入字段的名称。
• value: 输入字段的初始值。
• min: 允许的最小周。
• max: 允许的最大周。
• required: 是否必填。
• readonly: 是否只读。
• disabled: 是否禁用。
• 示例:

21. image
• 描述: 用于提交表单的图像按钮。
• 属性:
• src: 图像的路径。
• alt: 图像的替代文本。
• width: 图像的宽度。
• height: 图像的高度。
• formaction: 覆盖表单的 action 属性。
• formmethod: 覆盖表单的 method 属性。
• formtarget: 覆盖表单的 target 属性。
• formenctype: 覆盖表单的 enctype 属性。
• formnovalidate: 覆盖表单的 novalidate 属性。
• 示例:

4.1.2 <input> 标签的其他属性

• type: 表单元素的类型。

• placeholder: 提示用户做什么，常用于输入框。

• id: 标签在整个页面中的唯一标识符。

• name: 表单元素的名称，只有设置了 name 属性的表单元素才能参与表单提交。对于逻辑上视为一组的多个单选按钮，它们必须设置相同的名称才能确保单选。

• value: 表单元素的值，即它表示的数据。

• size: 一般用于文本框和密码框，表示它们的宽度，以字符数度量。

• maxlength: 一般用于文本框和密码框，表示它们可以接受的最多字符数。

• min 和 max: 用于设置数值输入的最小值和最大值。

• step: 用于设置数值输入的步长。

• checked: 只用于单选按钮和复选框，用于设置它们在初始状态下被选中。

• src: 只用于图像按钮，设置图像文件的地址。

• alt: 只用于图像按钮，设置图像的替代文字。

• accept: 只用于文件域，设置文件域可接受的文件类型。

• disabled: 禁用表单元素，使它无法被浏览者操作。被禁用的表单元素不参与表单提交。

• readonly: 使表单元素的数据无法被浏览者更改。

• pattern: 用于设置输入值的正则表达式，用于验证输入格式。

• autofocus: 使表单元素在页面加载时自动获得焦点。

• autocomplete: 控制表单元素的自动完成功能，值可以是 on 或 off。

4.2 <textarea> 标签

4.2.1 属性

• id: 唯一标识。

• name: 多行文本域名称，必须设置了 name 属性才能参与表单提交。

• disabled: 禁用多行文本域，使其无法被浏览者操作，不能参与表单提交。

• readonly: 只读，浏览者不能修改数据。

• cols: 设置文本域宽度。

• rows: 设置文本域高度。

• wrap: 设置多行文本域的换行模式。
• off: 不自动换行。
• virtual: 虚拟换行，自动换行，无标志。
• physical: 物理换行，自动换行，有标志。

• placeholder: 提示用户做什么，常用于输入框。

• required: 必填属性，确保用户必须填写该字段。

• minlength 和 maxlength: 设置文本域允许的最小和最大字符数。

• autofocus: 使文本域在页面加载时自动获得焦点。

• autocomplete: 控制文本域的自动完成功能，值可以是 on 或 off.

4.2.2 示例

4.3 <select> 标签及 <option> 标签

4.3.1 <select> 标签属性

• id: 唯一标识。

• name: 列表框名称，必须设置了 name 属性才能参与表单提交。

• disabled: 禁用列表框。

• size: 设置列表框显示多少项。

• multiple: 设置列表框选项可被浏览者多选。

• autofocus: 使列表框在页面加载时自动获得焦点。

• required: 必填属性，确保用户必须选择一个选项。

4.3.2 <option> 标签属性

• value: 选项表示的数据。

• selected: 设定选项在初始状态下默认被选中。

• disabled: 禁用选项，使其无法被选择。

4.3.3 示例

4.4 <button> 标签

4.4.1 属性

• id: 唯一标识。

• name: 按钮名称。

• value: 值。

• type:
• submit: 提交按钮。
• reset: 重置按钮。
• button: 普通按钮。

• disabled: 禁用按钮。

• form: 指定按钮所属的表单，值为表单的 id。

• formaction: 覆盖表单的 action 属性。

• formmethod: 覆盖表单的 method 属性。

• formtarget: 覆盖表单的 target 属性。

• formenctype: 覆盖表单的 enctype 属性。

• formnovalidate: 覆盖表单的 novalidate 属性。

4.4.2 示例

4.5 <label> 标签

4.5.1 属性

• for: 用来与某个表单控件进行绑定。

• form: 指定标签所属的表单，值为表单的 id。

4.5.2 示例

4.6 <fieldset> 和 <legend> 标签

4.6.1 属性

• disabled: 禁用整个分组中的所有表单元素。

• form: 指定分组所属的表单，值为表单的 id。

4.6.2 示例

5. 演示案例