表单相关标签
学思创
155
表单主要用于收集用户输入的数据，当用户提交表单时，用户输入的数据将被作为请求参数提交到服务器。表单通常由各种输入字段组成，如文本框、单选框、复选框和下拉列表等。
<form>：用于创建HTML表单以收集用户输入。表单可以包含各种表单控件，如文本框、单选框、复选框和下拉列表等。
| <form>属性 | 值 | 描述 |
| action | URL | 定义一个 URL。当点击提交按钮时，向这个 URL 发送数据 |
| method | get | post | 用于向action URL提交表单数据时，使用的 HTTP 方法。默认是 get |
| enctype | application/x-www-form-urlencoded | multipart/form-data | text/plain |
在提交表单数据时使用的编码类型，默认是application/x-www-form-urlencoded。 |
| target | _self | _blank | _top | _parent |
当表单提交后，响应（结果）应在何处显示，与超链接的target一样，属性值_self（默认值，当前页面窗口）、_blank（新窗口）、_top（顶层框架）、_parent（父级框架） |
| accept-charset | UTF-8 |
指定表单提交的字符编码 |
| autocomplete | on | off |
是否启用浏览器的自动完成功能，帮助用户更快地填写表单。on: 浏览器可以自动填充字段值 |
| name | string |
为表单定义一个唯一的名称 |
| noValidate | true | false |
设置禁用表单的验证 |
method属性值get与post区别
| get请求 | post请求 | |
| 数据传输 | GET请求会将数据作为参数附加在URL之后，以查询字符串的形式发送 | POST请求将数据作为请求体发送，与URL无关 |
| 数据安全性 | 由于GET请求将数据暴露在URL中，因此不适用于发送敏感信息，因为这些信息可能会被记录在浏览器历史记录、服务器日志或其他地方 | POST请求不会暴露数据，因此更安全 |
| 数据大小限制 | GET请求的URL长度有限制（通常不超过2000个字符），因为数据被附加在URL中 | POST请求没有这样的限制，可以发送大量数据 |
| 幂等性 | GET请求是幂等的，意味着多次执行相同的GET请求，服务器的状态不会改变 | POST请求不是幂等的，每次执行相同的POST请求可能会导致服务器状态的改变 |
| 浏览器缓存 | GET请求可以被浏览器缓存 | POST请求不会被缓存 |
使用GET方式提交表单时，参数字符串的请求参数名和请求参数值之间以字符等号“=”隔开，多组请求参数之间以字符“&”隔开。
注意：当<form>的method的值get时，enctype的值只能是application/x-www-form-urlencoded、text/plain；当<form>中有文件上传则method的值必须为post且enctype的值为multipart/form-data；
<input>：用于在HTML表单中创建输入字段。这些字段可用于接收用户输入的各种类型的数据，包括文本、密码、复选框、单选按钮、提交按钮等等。
| <input>属性 | 值 | 描述 | ||||||||||||||||||||||||||||||||||||||||||||||
| type |
|
设置输入字段的类型 | ||||||||||||||||||||||||||||||||||||||||||||||
| checked | true | false | 设置单选框、复选框初始选中状态 | ||||||||||||||||||||||||||||||||||||||||||||||
| disable | true | false | 首次加载时禁用此元素 | ||||||||||||||||||||||||||||||||||||||||||||||
| max | number | 输入字段值的最大值 | ||||||||||||||||||||||||||||||||||||||||||||||
| min | number | 输入字段值的最小值 | ||||||||||||||||||||||||||||||||||||||||||||||
| maxlength | number | 设置文本框中所允许输入的字符最大数 | ||||||||||||||||||||||||||||||||||||||||||||||
| minlength | number | 设置文本框中所允许输入的字符最小数 | ||||||||||||||||||||||||||||||||||||||||||||||
| readonly | true | false | 设置不允许用户修改值 | ||||||||||||||||||||||||||||||||||||||||||||||
| src | URL | 要显示的图像的 URL，仅用于 type="image" 时 | ||||||||||||||||||||||||||||||||||||||||||||||
| alt | sting | 设置图像的替代文本，仅用于 type="image" 时 | ||||||||||||||||||||||||||||||||||||||||||||||
| autocomplete | on | off | 是否启用浏览器的自动完成功能，帮助用户更快地填写表单。on: 浏览器可以自动填充字段值 off: 浏览器不应该自动填充字段值 |
||||||||||||||||||||||||||||||||||||||||||||||
| autofocus | true | false | 当页面打开时，该组件会自动获得焦点 | ||||||||||||||||||||||||||||||||||||||||||||||
| placeholder | string | 一个简短文字提示，用于在控件没有值时帮助用户输入数据 | ||||||||||||||||||||||||||||||||||||||||||||||
| name | string | 提供表单控件的名称，也是请求参数名 | ||||||||||||||||||||||||||||||||||||||||||||||
| value | mixed | 设置初始值 | ||||||||||||||||||||||||||||||||||||||||||||||
| accept | MIME | 一个逗号分隔的 MIME 类型列表，指示文件传输的 MIME 类型 | ||||||||||||||||||||||||||||||||||||||||||||||
| form | string | 设置该表单控件所属的表单，值应该是它所属表单的id | ||||||||||||||||||||||||||||||||||||||||||||||
| list | string | 设置一个 datalist 元素，该元素将与输入字段关联。datalist 元素包含一组预定义的选项，用户可以在其中选择输入值，或者在输入字段中键入内容来选择选项 | ||||||||||||||||||||||||||||||||||||||||||||||
| required | true | false | 设置该控件的值是否是必需的 | ||||||||||||||||||||||||||||||||||||||||||||||
| pattern | Pattern | 一个正则表达式，用于限制输入字段的值必须符合的格式。如果输入字段的值不符合该正则表达式，则无法提交表单。 | ||||||||||||||||||||||||||||||||||||||||||||||
| step | number | 设置输入字段的合法数字间隔。它主要用于 type 属性为 number 或 range 的输入字段。 |
<label>：用于定义一个用户界面项的标签。它通常与 <input> 标签一起使用，以标记和描述输入字段。当用户点击<label>包裹的区域，该标签内的表单控件就会自动获得焦点。
| <label>属性 | 描述 |
| for | 指定了与该标签相关联的输入字段的 ID，以便在点击标签时选择相应的输入字段 |
让<label>和表单控件关联两种方式：
- 显式关联：将文本、表单控件一起放在<label></label>的内部即可。
- 隐式关联：在<label>上使用for属性，并设置其值为所关联表单控件的id属性值。
<button>：用于在HTML文档中创建一个按钮。当用户点击该按钮时，可以触发JavaScript代码或提交表单等操作。
| <button>属性 | 值 | 描述 |
| disable | true | false | 设置是否禁用此按钮 |
| name | string | 设置按钮的名称 |
| type | button | reset | submit | 设置按钮类型button：无动作按钮;；reset：重置按钮；submit：提交按钮 |
| value | mixed | 设置按钮初始值 |
| form | string | 设置该按钮所属的表单，值应该是它所属表单的id |
| formaction | URL | 设置表单提交的URL |
| formenctype | application/x-www-form-urlencoded | multipart/form-data | text/plain |
设置表单提交的编码类型 |
| formmethod | get | post | 设置表单提交的方式 |
| formnovalidate | true | false | 设置禁用表单的验证 |
| formtarget | _self | _blank | _top | _parent | 设置表单提交后，响应（结果）应在何处显示 |
用<input>与<button>都可以作为按钮，由于<input>的单标签，当需要需要用按钮包裹其他内容，需要使用<button>标签
<select>：用于在HTML中创建一个下拉列表。这个列表可以包含多个 <option> 元素，每个 <option> 元素代表一个选项，用户可以从中选择一个或多个选项。
| <select>属性 | 值 | 描述 |
| multiple | true | false | 设置该列表框是否允许多选 |
| size | number | 设置列表框内可同时显示多少个列表项 |
| autocomplete | on | off | 设置自动填充功能提示 |
| disable | true | false | 设置是否禁用此列表框 |
| name | string | 设置列表框的名称，也是请求参数名 |
| required | true | false | 设置该列表框值是否是必需的 |
| form | string | 设置该列表框所属的表单，值应该是它所属表单的id |
<select>标签只能包含两个子元素：
- <optgroup>：用于对<option>进行分组
- <option>：用于定义列表框的选项或菜单项
| <option>属性 | 值 | 描述 |
| disabled | true | false | 设置是否禁用此选项 |
| label | string | 设置选项的标签文本 |
| selected | true | false | 设置选项初始选中状态 |
| value | mixed | 设置选项对应的请求参数值 |
<datalist>：用于在文本输入框中提供一个预定义的选项列表。这个列表由<datalist>标签内的<option>标签定义
使用<datalist>标签可以方便地为用户提供一些预设的选项，而无需编写额外的JavaScript代码。当用户在文本输入框中输入内容时，如果输入的内容与<datalist>标签中的某个<option>标签的值匹配，那么该选项将会自动被选中。
<textarea>：用于创建一个文本区域 (text-area) （一个多行的文本输入区域）。
| <textarea>属性 | 值 | 描述 |
| cols | number | 文本区内可见的列数 |
| rows | number | 文本区内可见的行数 |
| disabled | true | false | 设置是否禁用此文本域 |
| readonly | true | false | 设置不允许用户修改文本内容 |
| required | true | false | 设置该文本域的内容是否是必需的 |
| autocomplete | on | off | 设置自动填充功能提示 |
| dirname | string | 文本域中显示的文本的目录名或文件夹路径 |
| form | string | 设置该文本域所属的表单，值应该是它所属表单的id |
| maxlength | number | 设置文本域中所允许输入的字符最大数 |
| minlength | number | 设置文本域中所允许输入的字符最小数 |
| name | string | 提供文本域的名称，也是请求参数名 |
| placeholder | string | 一个简短文字提示，用于在控件没有值时帮助用户输入数据 |
| wrap | soft | hard | 设置文本域的文本换行方式，默认soft（文本在提交时不进行换行） |
<output>：用于在网页上显示计算结果。它通常与表单元素（如 <input>、<select> 和 <textarea>）一起使用，以便在用户输入或选择某些值后显示计算结果
| <output>属性 | 值 | 描述 |
| for | string | 指定了与该输出元素关联的表单元素，值应该是其他元素的id |