15_HTML5 表单属性 --[HTML5 API 学习之旅]

HTML5 为 <form> 和 <input> 标签添加了多个新属性，以增强表单的功能性和用户体验。以下是一些新增的属性：
对于 <form> 标签：

1.novalidate：

• 克制欣赏器对表单数据举行默认验证，答应提交未通过验证的数据。
  

novalidate 属性可以用来禁用欣赏器对表单数据的默认验证，答应用户提交未通过验证的数据。这对于某些特别情况下大概是有用的，比方当你要使用自界说的 JavaScript 验证逻辑时。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 novalidate 属性：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Form Novalidate Example</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Novalidate Attribute</h2>
10. <form action="/submit_form" method="post" novalidate>
11.     <label for="fname">First name:</label><br>
12.     <input type="text" id="fname" name="fname" required><br>
13.    
14.     <label for="email">Email:</label><br>
15.     <input type="email" id="email" name="email" required><br><br>
16.    
17.     <input type="submit" value="Submit">
18. </form>
20. </body>
21. </html>

复制代码

在这个例子中：

• 表单包罗两个输入字段：一个用于名字（fname），另一个用于电子邮件地点（email）。这两个字段都被标记为 required，这意味着按照通常情况，欣赏器会在提交之前逼迫用户填写这些字段。
  
• 但是，由于 <form> 标签中包罗了 novalidate 属性，欣赏器将不会实验任何验证，纵然用户没有填写这两个字段，表单也可以被提交。
  
• 当用户点击 “Submit” 按钮时，表单数据将发送到 /submit_form URL，而不会受到欣赏器内置验证规则的限定。
  

请注意，固然 novalidate 可以克制欣赏器级别的验证，但你仍然应该在服务器端举行须要的验证，以确保吸取到的数据是安全且符合预期的。别的，假如须要的话，还可以实现客户端的 JavaScript 验证来更换或增补欣赏器的内置验证。
2.autocomplete：

• 控制表单是否启用自动完乐成能。可以设置为 on 或 off。
  

autocomplete 属性用于控制表单或特定输入字段是否启用自动完乐成能。当设置为 on 时，欣赏器会实验根据用户之前输入的值来添补表单；当设置为 off 时，则不会。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 autocomplete 属性：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Form Autocomplete Example</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Autocomplete Attribute</h2>
10. <form action="/submit_form" method="post" autocomplete="on">
11.     <label for="fname">First name:</label><br>
12.     <input type="text" id="fname" name="fname" autocomplete="on"><br>
13.    
14.     <label for="lname">Last name:</label><br>
15.     <input type="text" id="lname" name="lname" autocomplete="on"><br>
16.    
17.     <label for="email">Email:</label><br>
18.     <input type="email" id="email" name="email" autocomplete="on"><br>
19.    
20.     <label for="password">Password:</label><br>
21.     <input type="password" id="password" name="password" autocomplete="new-password"><br>
22.    
23.     <label for="address">Address:</label><br>
24.     <input type="text" id="address" name="address" autocomplete="street-address"><br><br>
25.    
26.     <input type="submit" value="Submit">
27. </form>
29. </body>
30. </html>

复制代码

在这个例子中：

• <form> 标签的 autocomplete 属性被设置为 "on"，这意味着整个表单将默认启用自动完乐成能。
  
• 每个 <input> 字段也有自己的 autocomplete 属性：
  
  
  
  • 对于文本和电子邮件输入字段（fname, lname, email），autocomplete 设置为 "on"，答应欣赏器根据用户的欣赏汗青提供自动补全发起。
    
  • 对于暗码字段 (password)，autocomplete 设置为 "new-password"，这提示欣赏器不要自动填写此字段，而是大概提供天生新暗码的选项。
    
  • 对于地点字段 (address)，autocomplete 设置为 "street-address"，这是一种更具体的自动完成范例，它告诉欣赏器这个字段是用来输入街道地点的，有助于欣赏器提供更干系的自动补全发起。
    
  
  

请注意，固然设置了 autocomplete="on" 或其他具体值，但并不是全部欣赏器都会按照预期举动工作，由于一些欣赏器大概会忽略这些设置大概有差异的实现方式。别的，对于涉及敏感信息的字段（如暗码），应审慎使用自动完乐成能以确保用户的安全性和隐私。
3.target：

• 指定表单提交后在那里表现相应结果。值可以是 _self（默认）、_blank、_parent 或 _top，也可以是指向某个 iframe 的名称。
  

target 属性用于指定表单提交后，服务器相应表现的目的窗口或框架。这个属性的值可以是以下预界说的关键字之一，大概是任何由 <iframe> 界说的名字：

• _self：默认值，在当前页面加载相应（即在同一窗口或标签页中）。
  
• _blank：在新的欣赏器标签页或窗口中加载相应。
  
• _parent：在父级欣赏上下文中加载相应（假如表单元于嵌套的 iframe 中，则是在包罗该 iframe 的文档中）。
  
• _top：在整个窗口中加载相应，取消全部嵌套的欣赏上下文（假如存在的话）。
  

下面是一个简朴的 HTML5 表单示例，展示了怎样使用 target 属性来控制表单提交后的相应表现位置：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Form Target Example</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Target Attribute</h2>
10. <!-- 假设我们有一个名为 'responseFrame' 的 iframe -->
11. <iframe name="responseFrame" src="about:blank" style="width: 100%; height: 300px; border: 2px solid black;"></iframe>
13. <br><br>
15. <form action="/submit_form" method="post" target="responseFrame">
16.     <label for="fname">First name:</label><br>
17.     <input type="text" id="fname" name="fname"><br>
18.    
19.     <label for="email">Email:</label><br>
20.     <input type="email" id="email" name="email"><br><br>
21.    
22.     <input type="submit" value="Submit">
23. </form>
25. </body>
26. </html>

复制代码

在这个例子中：

• 表单包罗两个输入字段：一个用于名字（fname），另一个用于电子邮件地点（email）。
  
• 表单的 action 属性指向 /submit_form，这应该被更换为现实处置惩罚表单数据的 URL。
  
• method 设置为 "post"，意味着表单数据将通过 HTTP POST 哀求发送。
  
• target 属性设置为 "responseFrame"，这是页面中 <iframe> 元素的 name 属性值。因此，当用户提交表单时，服务器的相应将会在这个 iframe 内部表现，而不是重新加载整个页面或打开新标签页。
  

如许做的利益是可以保持主页面稳定，同时在特定地区展示表单提交的结果，提供更好的用户体验。比方，在在线论坛中，用户可以在不离开讨论页面的情况下发布复兴，而复兴内容则可以在 iframe 中即时表现。
4.action：

• 指定处置惩罚表单数据的脚本的 URL。这不是新属性，但在 HTML5 中支持使用片断标识符和相对路径。
  

5.method：

• 指定提交表单时使用的 HTTP 方法（GET、POST）。固然这不是新属性，但 HTML5 明白了哪些方法是正当的。
  

6.enctype：

• 界说表单数据应该用哪种内容范例编码。对于文件上传通常使用 multipart/form-data。这也不是新属性，但是 HTML5 提供了更明白的支持。
  

enctype 属性用于指定表单数据在提交给服务器时应该怎样编码。这个属性通常与 <form> 标签的 method="post" 一起使用，由于它对 GET 哀求无效（GET 哀求的数据是通过 URL 参数通报的）。HTML5 支持以下几种 enctype 值：

• application/x-www-form-urlencoded：默认值。表单数据会以 URL 编码的情势发送，即每个键值对被编码成 key=value 的情势，而且多个键值对之间用 & 符号毗连。
  
• multipart/form-data：用于文件上传或包罗二进制数据的表单。它不会对字符举行编码，而是将数据作为多部门消息发送，每部门对应一个文件或其他数据项。
  
• text/plain：简朴地将空格更换为加号 (+)，但不实验其他编码。重要用于调试，由于格式不太适当服务器处置惩罚。
  

下面是一个简朴的 HTML5 表单示例，展示了怎样使用 enctype="multipart/form-data" 来实现文件上传功能：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Form Enctype Example - File Upload</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Enctype Attribute for File Upload</h2>
10. <form action="/upload" method="post" enctype="multipart/form-data">
11.     <label for="fname">First name:</label><br>
12.     <input type="text" id="fname" name="fname"><br>
13.    
14.     <label for="file">Select file to upload:</label><br>
15.     <input type="file" id="file" name="file" multiple><br><br>
16.    
17.     <input type="submit" value="Upload File">
18. </form>
20. </body>
21. </html>

复制代码

在这个例子中：

• 表单包罗两个输入字段：
  
  
  
  • 一个文本框用于输入名字（fname）。
    
  • 一个文件选择器（<input type="file">），答应用户选择一个或多个文件举行上传（通过设置 multiple 属性）。
    
  
  
• action 属性指定了处置惩罚表单数据的服务器端脚本的 URL，在这里为 /upload，你须要根据现实情况调解这个路径。
  
• method 设置为 "post"，意味着表单数据将通过 HTTP POST 哀求发送。
  
• enctype 设置为 "multipart/form-data"，这是由于我们要上传文件，而文件数据不能被简朴地 URL 编码，以是须要以多部门消息的情势发送。
  

当用户选择文件并点击 “Upload File” 按钮后，表单将按照 multipart/form-data 编码方式提交，服务器端应准备好吸取和处置惩罚这种格式的数据。请注意，服务器端也须要精确设置来分析 multipart 数据并生存上传的文件。
7.accept-charset：

• 指定服务器处置惩罚表单数据所担当的字符集。这也不是一个新属性，但在 HTML5 中得到了更好的界说和支持。
  

8.name：

• 为表单指定名称，以便在 JavaScript 中引用。只管这不是新属性，但它对于表单元向来说仍然告急。
  

对于 <input> 标签：

1.required：

• 规定必须填写输入字段才气提交表单。
  

2.pattern：

• 使用正则表达式来规定输入字段的模式，用于自界说验证。
  

pattern 属性用于规定输入字段的值必须匹配的正则表达式。这个属性对于确保用户输入符合特定格式非常有用，比方验证电子邮件地点、电话号码或邮政编码等。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 pattern 属性来确保用户输入有用的美国邮政编码（ZIP code）。美国邮政编码通常由 5 位数字构成，偶尔反面跟着一个连字符和额外的 4 位数字（称为 ZIP+4 格式）。

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Pattern Example - US ZIP Code</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Pattern Attribute for US ZIP Code Validation</h2>
10. <form action="/submit_form" method="post">
11.     <label for="zip">Enter a US ZIP Code:</label><br>
12.     <input type="text" id="zip" name="zip" pattern="[0-9]{5}(-[0-9]{4})?" required>
13.     <small>Format: 12345 or 12345-6789</small><br><br>
14.    
15.     <input type="submit" value="Submit">
16. </form>
18. </body>
19. </html>

复制代码

在这个例子中：

• <input> 元素的 type 设置为 "text"，表现这是一个文本输入框。
  
• id 和 name 属性分别设置为 "zip"，用于标识该输入框。
  
• pattern 属性包罗了一个正则表达式 [0-9]{5}(-[0-9]{4})?，它界说了答应的输入格式：
  
  
  
  • [0-9]{5}：要求前五个字符必须是数字。
    
  • (-[0-9]{4})?：可选部门，表现可以跟一个连字符和四个额外的数字。
    
  
  
• required 属性确保用户必须填写此字段，不能为空。
  
• <small> 标签提供了关于精确格式的小提示信息，资助用户明白应该怎样输入数据。
  

当用户实验提交表单时，假如输入的邮政编码不符合 pattern 中界说的正则表达式，则欣赏器会表现一个错误消息，并克制表单提交，直到用户提供一个有用的邮政编码为止。
请注意，固然 pattern 可以在客户端提供即时反馈，但为了安全性和完备性，你仍然应该在服务器端举行相应的验证，由于并非全部欣赏器都完全支持 HTML5 的表单验证功能，而且用户大概绕过这些客户端查抄。
3.min 和 max：

• 分别为数值或日期范例的输入字段设置最小值和最大值。
  

min 和 max 属性用于规定输入字段的最小值和最大值，实用于须要数值或日期范例的 <input> 元素。这些属性有助于确保用户输入的数据在预期范围内，从而进步数据的有用性和用户体验。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 min 和 max 属性来限定用户可以输入的年岁范围（比方，18 到 100 岁）：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Min and Max Example - Age Range</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Min and Max Attributes for Age Range Validation</h2>
10. <form action="/submit_form" method="post">
11.     <label for="age">Enter your age (between 18 and 100):</label><br>
12.     <input type="number" id="age" name="age" min="18" max="100" required>
13.     <small>Valid range: 18 to 100</small><br><br>
14.    
15.     <input type="submit" value="Submit">
16. </form>
18. </body>
19. </html>

复制代码

在这个例子中：

• <input> 元素的 type 设置为 "number"，表现这是一个数字输入框。
  
• id 和 name 属性分别设置为 "age"，用于标识该输入框。
  
• min 属性设置为 "18"，表现答应输入的最小值是 18。
  
• max 属性设置为 "100"，表现答应输入的最大值是 100。
  
• required 属性确保用户必须填写此字段，不能为空。
  
• <small> 标签提供了关于有用范围的小提示信息，资助用户明白应该怎样输入数据。
  

当用户实验提交表单时，假如输入的年岁不在 min 和 max 界说的范围内，欣赏器会表现一个错误消息，并克制表单提交，直到用户提供一个有用的年岁为止。
别的，min 和 max 属性也可以与日期范例的 <input> 元素一起使用。下面是一个使用 min 和 max 来限定日期选择范围的例子：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Min and Max Example - Date Range</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Min and Max Attributes for Date Range Validation</h2>
10. <form action="/submit_form" method="post">
11.     <label for="eventDate">Select an event date (between 2024-01-01 and 2024-12-31):</label><br>
12.     <input type="date" id="eventDate" name="eventDate" min="2024-01-01" max="2024-12-31" required>
13.     <small>Valid range: January 1, 2024 to December 31, 2024</small><br><br>
14.    
15.     <input type="submit" value="Submit">
16. </form>
18. </body>
19. </html>

复制代码

在这个日期选择的例子中：

• <input> 元素的 type 设置为 "date"，表现这是一个日期选择器。
  
• min 和 max 属性分别设置为 "2024-01-01" 和 "2024-12-31"，表现答应选择的日期范围是从 2024 年 1 月 1 日到 2024 年 12 月 31 日。
  
• 用户只能选择在此范围内的日期，超出这个范围的选择会被欣赏器克制。
  

通过这种方式，min 和 max 属性可以资助开辟者更有用地控制用户输入的数据范围，确保网络到的数据符合预期的要求。
4.step：

• 规定输入字段中正当数字隔断，实用于数值型输入字段。
  

step 属性用于规定输入字段的正当数字隔断，它通常与 <input> 范比方 number, range, date, datetime-local, month, time, 和 week 一起使用。这个属性有助于确保用户输入的数据符合预期的增量或精度。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 step 属性来限定一个数值输入框中的步长为0.5，而且联合 min 和 max 来设置数值范围：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Step Example - Numeric Input</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Step Attribute for Numeric Input</h2>
10. <form action="/submit_form" method="post">
11.     <label for="price">Enter a price (increments of 0.5, min 1.0, max 10.0):</label><br>
12.     <input type="number" id="price" name="price" step="0.5" min="1.0" max="10.0" required>
13.     <small>Valid steps: 1.0, 1.5, 2.0, ..., up to 10.0</small><br><br>
14.    
15.     <input type="submit" value="Submit">
16. </form>
18. </body>
19. </html>

复制代码

在这个例子中：

• <input> 元素的 type 设置为 "number"，表现这是一个数值输入框。
  
• id 和 name 属性分别设置为 "price"，用于标识该输入框。
  
• step 属性设置为 "0.5"，这意味着用户只能输入以 0.5 为增量的数值（比方，1.0、1.5、2.0 等）。
  
• min 和 max 属性分别设置为 "1.0" 和 "10.0"，表现答应输入的最小值是 1.0，最大值是 10.0。
  
• required 属性确保用户必须填写此字段，不能为空。
  
• <small> 标签提供了关于有用步长的小提示信息，资助用户明白应该怎样输入数据。
  

当用户实验提交表单时，假如输入的代价不符合 step 中界说的增量，大概不在 min 和 max 界说的范围内，欣赏器会表现一个错误消息，并克制表单提交，直到用户提供一个有用的代价为止。
使用 step 属性与 range 范例

step 属性也非常适当用在 <input type="range"> 上，以控制滑块的移动隔断。以下是一个使用 step 的滑块输入的例子：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Step Example - Range Slider</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Step Attribute for Range Slider</h2>
10. <form action="/submit_form" method="post">
11.     <label for="volume">Set volume level (increments of 10):</label><br>
12.     <input type="range" id="volume" name="volume" min="0" max="100" step="10" value="50">
13.     <output for="volume" name="volumeOutput">50</output><br><br>
14.    
15.     <input type="submit" value="Submit">
16. </form>
18. <script>
19. // 更新输出元素的值，使其与滑块的当前值匹配
20. document.querySelector('#volume').addEventListener('input', function(e) {
21.     document.querySelector('[for="volume"]').value = e.target.value;
22. });
23. </script>
25. </body>
26. </html>

复制代码

在这个滑块的例子中：

• <input> 元素的 type 设置为 "range"，表现这是一个滑块控件。
  
• min 和 max 属性分别设置为 "0" 和 "100"，界说了滑块的最小值和最大值。
  
• step 属性设置为 "10"，意味着滑块只能停在每十个单元的位置上（比方，0、10、20、…、100）。
  
• value 属性初始化滑块的位置为中心值 50。
  
• 使用 JavaScript 监听 input 变瞎搅及时更新 <output> 元素的文本内容，反映滑块的当前值。
  

通过这种方式，step 属性可以资助开辟者更精确地控制用户输入的数值范围和增量，从而进步用户体验和数据精确性。
5.placeholder：

• 提供一个提示信息，在用户输入内容前表现在输入框内。
  

6.autofocus：

• 页面加载时自动将焦点设置到该输入字段上。
  

autofocus 属性是一个布尔属性，用于指定当页面加载时，应该自动得到焦点的 <input> 元素。这意味着该输入框会自动激活，用户可以直接开始输入，而无需先点击或导航到该元素。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 autofocus 属性：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Autofocus Example</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Autofocus Attribute</h2>
10. <form action="/submit_form" method="post">
11.     <label for="fname">First name:</label><br>
12.     <input type="text" id="fname" name="fname" autofocus><br>
13.    
14.     <label for="lname">Last name:</label><br>
15.     <input type="text" id="lname" name="lname"><br>
16.    
17.     <label for="email">Email:</label><br>
18.     <input type="email" id="email" name="email"><br><br>
19.    
20.     <input type="submit" value="Submit">
21. </form>
23. </body>
24. </html>

复制代码

在这个例子中：

• 第一个文本输入框（<input type="text" id="fname" name="fname" autofocus>）包罗 autofocus 属性。
  
• 当页面加载时，欣赏器会自动将焦点设置到这个输入框上，用户可以直接开始输入名字，而不须要先点击该输入框。
  
• 其他输入字段（如姓氏和电子邮件）没有 autofocus 属性，因此它们不会在页面加载时自动得到焦点。
  

注意事项

• 单一性：在一个页面上，通常只有一个表单元素应具有 autofocus 属性。假如有多个元素设置了 autofocus，则举动大概因欣赏器而异；某些欣赏器大概会忽略多余的 autofocus 设置，大概只应用第一个遇到的 autofocus。
  
• 用户体验：固然 autofocus 可以进步服从，但太过使用大概会干扰用户体验。比方，在页面顶部有自动聚焦的输入框大概导致页面自动滚动，影响用户的初次欣赏体验。
  
• 辅助技能：对于使用屏幕阅读器等辅助技能的用户，自动聚焦大概会导致不测的举动，由于他们大概盼望从页面顶部开始欣赏内容。
  

通过公道使用 autofocus 属性，可以为用户提供更流畅的交互体验，特别是在须要立即输入信息的情况下，比如搜刮框或登录页面上的用户名/暗码字段。
7.autocomplete：

• 控制特定输入字段是否启用自动完乐成能，可设为 on 或 off。
  

8.form：

• 规定 <input> 属于哪个表单，纵然它不在谁人表单内部。这使得你可以将输入元素放置在文档的恣意位置，但仍与特定表单关联。
  

form 属性用于将 <input> 元素关联到一个或多个表单，纵然这些输入元素不在那些表单的 HTML 结构内部。这为结构和构造表单提供了更大的机动性，答应你将表单控件放置在页面的任何位置，同时仍然与特定的表单逻辑干系联。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 form 属性来关联不在表单标签内的输入元素：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Form Attribute Example</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Form Attribute</h2>
10. <!-- 定义表单 -->
11. <form id="userForm" action="/submit_form" method="post">
12.     <label for="fname">First name:</label><br>
13.     <input type="text" id="fname" name="fname"><br>
14.    
15.     <!-- 注意这里没有包含其他输入字段 -->
16. </form>
18. <!-- 将输入字段放在表单之外 -->
19. <label for="lname">Last name:</label><br>
20. <input type="text" id="lname" name="lname" form="userForm"><br>
22. <label for="email">Email:</label><br>
23. <input type="email" id="email" name="email" form="userForm"><br><br>
25. <!-- 提交按钮也在表单之外 -->
26. <input type="submit" value="Submit" form="userForm">
28. </body>
29. </html>

复制代码

在这个例子中：

• <form> 标签订义了一个 ID 为 "userForm" 的表单，并指定了提交 URL 和方法。
  
• 第一个文本输入框（fname）位于 <form> 标签内部，因此它默认属于这个表单。
  
• 别的两个输入字段（lname 和 email），以及提交按钮 (Submit)，都位于 <form> 标签外部，但它们通过 form 属性指定的值 "userForm" 关联到了同一个表单。
  
• 当用户点击 “Submit” 按钮时，全部关联到 userForm 的输入字段的数据都将被提交到 /submit_form URL。
  

使用场景

• 复杂结构：当你须要更复杂的页面结构，而不想受限于表单标签的位置时，可以使用 form 属性将输入元素放置在文档的恣意位置。
  
• 模态窗口或弹出式表单：假如表单的一部门是在模态窗口或弹出层中表现，你可以将这部门控件放在页面的差异位置，但仍能与原始表单保持关联。
  
• 分组控件：对于大型表单，大概盼望将差异部门的控件分组表现在差异的地区，同时确保它们都属于同一个表单逻辑。
  

通过这种方式，form 属性提供了更大的机动性，使得表单计划和用户体验更加丰富多样。
9.multiple：

• 答应用户选择多个值，重要用于 <input type="email"> 和 <input type="file">。
  

multiple 属性答应用户选择多个值，重要用于 <input type="email"> 和 <input type="file"> 范例的输入框。它使得用户可以在同一个输入字段中选择或输入多个电子邮件地点或文件。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 multiple 属性来答应用户选择多个文件举行上传：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Multiple Example - File Upload</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Multiple Attribute for File Upload</h2>
10. <form action="/upload_files" method="post" enctype="multipart/form-data">
11.     <label for="files">Select files to upload:</label><br>
12.     <input type="file" id="files" name="files[]" multiple><br><br>
13.    
14.     <input type="submit" value="Upload Files">
15. </form>
17. </body>
18. </html>

复制代码

在这个例子中：

• <input> 元素的 type 设置为 "file"，表现这是一个文件选择器。
  
• id 和 name 属性分别设置为 "files"，用于标识该输入框。注意，name 属性反面加上了方括号 []，这在服务器端脚本（如 PHP）中是常用的约定，表现吸取的是一个数组。
  
• multiple 属性答应用户选择多个文件。用户可以通过按住 Ctrl（Windows/Linux）或 Command（Mac）键并点击文件，大概直接拖拽多个文件到选择窗口来选择多个文件。
  
• enctype="multipart/form-data" 是必须的，由于它指定了表单数据应该怎样编码，特别是对于文件上传，数据不能简朴地 URL 编码，而是作为多部门消息发送。
  

当用户选择了多个文件并点击 “Upload Files” 按钮时，全部选中的文件将被提交到 /upload_files URL。服务器端须要准备利益理这些文件，通常会以数组的情势吸取它们，并逐个生存。
使用 multiple 属性与电子邮件输入

除了文件上传外，multiple 属性还可以用于 <input type="email">，答应用户输入多个电子邮件地点，用逗号分隔：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input Multiple Example - Email Addresses</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input Multiple Attribute for Email Addresses</h2>
10. <form action="/send_email" method="post">
11.     <label for="emails">Enter email addresses (comma-separated):</label><br>
12.     <input type="email" id="emails" name="emails[]" multiple><br><br>
13.    
14.     <input type="submit" value="Send Emails">
15. </form>
17. </body>
18. </html>

复制代码

在这个例子中：

• <input> 元素的 type 设置为 "email"，表现这是一个用于输入电子邮件地点的文本框。
  
• multiple 属性答应用户输入多个电子邮件地点，每个地点之间用逗号分隔。
  
• 用户可以输入像 [email protected], [email protected] 如许的字符串，欣赏器会实验验证每个地点是否为有用的电子邮件格式。
  

通过这种方式，multiple 属性为用户提供了一个更方便的方式来举行多文件上传或多电子邮件地点输入，提拔了用户体验和功能机动性。
10.list：

• 引用一个 <datalist> 元素，为输入提供预界说选项列表。
  

list 属性用于将 <input> 元素与一个 <datalist> 元素关联，从而为用户提供一个预界说的选项列表。用户可以在输入框中选择这些选项之一，大概输入自己的值。这在须要提供提示或常用选项的情况下非常有用，比如国家选择、产物名称等。
下面是一个简朴的 HTML5 表单示例，展示了怎样使用 list 属性和 <datalist> 元向来创建带有发起列表的文本输入框：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>Input List Example - Country Selection</title>
5. </head>
6. <body>
8. <h2>HTML5 Form with Input List Attribute for Country Selection</h2>
10. <form action="/submit_form" method="post">
11.     <label for="country">Choose a country:</label><br>
12.     <input type="text" id="country" name="country" list="countryList"><br><br>
13.    
14.     <!-- datalist 提供了预定义的选项 -->
15.     <datalist id="countryList">
16.         <option value="Afghanistan">
17.         <option value="Albania">
18.         <option value="Algeria">
19.         <option value="Andorra">
20.         <option value="Angola">
21.         <option value="Antarctica">
22.         <option value="Argentina">
23.         <option value="Armenia">
24.         <option value="Australia">
25.         <option value="Austria">
26.         <!-- 更多国家可以添加在这里 -->
27.     </datalist>
29.     <input type="submit" value="Submit">
30. </form>
32. </body>
33. </html>

复制代码

在这个例子中：

• <input> 元素的 type 设置为 "text"，表现这是一个文本输入框。
  
• id 和 name 属性分别设置为 "country"，用于标识该输入框。
  
• list 属性设置为 "countryList"，它指向页面中的 <datalist> 元素。
  
• <datalist> 元素有一个 id 为 "countryList"，此中包罗了多个 <option> 标签，每个标签都有一个 value 属性，指定了一个国家的名字。
  
• 当用户开始在输入框中键入时，欣赏器会表现一个下拉列表，包罗全部匹配的国家名，用户可以选择此中一个作为输入值，也可以继续输入自己想要的内容。
  

使用场景

• 自动补全：对于有固定或有限选项的字段（如国家、州省、都会），可以使用 list 属性提供自动补全功能，进步用户体验。
  
• 数据标准化：确保用户输入符合预期格式或选项，镌汰错误输入的大概性。
  
• 用户友爱性：通过提供常用的选项，资助用户更快地完成表单填写过程。
  

通过这种方式，list 属性和 <datalist> 元素相联合，不但提供了更好的用户体验，还增强了数据输入的精确性和服从。
这些属性极大地丰富了 HTML 表单的功能，使开辟者可以大概创建更加动态和交互式的 Web 应用步调。请注意，差异欣赏器大概对某些属性的支持程度有所差异。
HTML5 表单属性   <input> 标签  list  1个示例