正文

HTML5 中新增了多个表单属性，以下是一些主要的： 1. autocomplete 2. autofocus 3. form 4. formaction 5. formenctype 6. formmethod 7. formnovalidate 8. formtarget 9. min 10. max 11. multiple 12. pattern 13.

/0 浏览量
0413

随着HTML5的推出，网页开发者有了更多的工具来创建更加丰富和功能强大的表单。以下是对HTML5中新增的多个表单属性进行详细解释：

1. autocomplete

autocomplete 属性用于指定表单字段是否应该启用自动完成功能。它接受以下值：

  • on：启用自动完成。
  • off：禁用自动完成。
<input type="text" name="username" autocomplete="on">

2. autofocus

autofocus 属性用于在页面加载时自动将焦点设置到表单字段上。这对于确保用户可以直接开始输入非常有用。

<input type="text" name="username" autofocus>

3. form

form 属性允许表单字段关联到不同的表单元素。这允许用户在同一个表单中提交多个表单。

<form id="myForm">
  <input type="text" name="username" form="myForm">
  <input type="submit" value="Submit">
</form>
<input type="text" name="username" form="myForm">

4. formaction

formaction 属性允许你指定表单提交时的URL。

<form action="submit.php">
  <input type="text" name="username" formaction="process.php">
  <input type="submit" value="Submit">
</form>

5. formenctype

formenctype 属性用于指定表单提交时内容编码的类型。

<form action="submit.php" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

6. formmethod

formmethod 属性用于指定表单提交的方法，可以是 get 或 post。

<form action="submit.php" method="post">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

7. formnovalidate

formnovalidate 属性用于阻止表单在提交之前进行验证。

<form action="submit.php">
  <input type="text" name="username" formnovalidate>
  <input type="submit" value="Submit">
</form>

8. formtarget

formtarget 属性用于指定表单提交后页面应该加载到的目标窗口或框架。

<form action="submit.php" target="_blank">
  <input type="submit" value="Submit">
</form>

9. min

min 属性用于指定输入字段的允许最小值。

<input type="number" name="age" min="18">

10. max

max 属性用于指定输入字段的允许最大值。

<input type="number" name="age" max="99">

11. multiple

multiple 属性允许用户在文件输入字段中选择多个文件。

<input type="file" name="files" multiple>

12. pattern

pattern 属性用于指定输入字段的正则表达式模式。

<input type="text" name="username" pattern="[A-Za-z0-9]{5,}">

13. placeholder

placeholder 属性用于在输入字段获得焦点之前显示提示信息。

<input type="text" name="username" placeholder="Enter your username">

14. readonly

readonly 属性用于指定输入字段为只读，用户不能修改其值。

<input type="text" name="username" readonly>

15. required

required 属性用于指定输入字段是必填的。

<input type="text" name="username" required>

16. step

step 属性用于指定输入字段值的变化步长。

<input type="number" name="quantity" step="0.5">

这些新增的表单属性为开发者提供了更多的灵活性，使得表单设计更加符合用户的需求。通过合理运用这些属性，可以创建出既美观又实用的表单界面。

-- 展开阅读全文 --