与表单相关的标签

本文解释了与表单相关的标签。

这解释了各种表单字段，例如文本输入和下拉菜单。

YouTube Video

与表单相关的标签

<form> 标签

1<form action="/submit" method="post">...</form>

• <form> 标签用于定义整个表单。
• action 属性指定目标，method 属性指定方法（GET 或 POST）。
• 您还可以指定 target 属性，类似于 <a> 标签。

<input> 标签（文本输入字段）

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

• <input type="text"> 创建一个单行文本输入字段。用户可以输入任何文本。

• placeholder 属性指定了一段描述性文本，该文本会在输入框为空时显示。这可以帮助用户更容易理解期望的输入内容。这段文本会在用户开始输入时自动消失。

  • placeholder 适用于提供补充信息，不适用于重要指令，例如必填输入。在这种情况下，您应该使用标签。

<input> 标签（密码输入字段）

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> 创建一个密码输入字段。输入的字符被隐藏和掩盖，以确保安全。

<input> 标签（电子邮件地址输入字段）

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> 创建一个用于输入电子邮件地址的字段，并包括验证以确保正确的电子邮件格式。

<input> 标签（复选框）

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> 创建一个复选框。当有多个选项时，用户可以选择多个项目。

<input> 标签（单选按钮）

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> 创建一个单选按钮，允许用户从一组中只能选择一个选项。

<input> 标签（提交按钮）

1<input type="submit" value="Submit">

• <input type="submit"> 创建一个用于提交表单中数据的按钮。
• value 属性的值在提交时会包含在表单数据中。

<input> 标签（重置按钮）

1<input type="reset" value="Reset">

• <input type="reset"> 创建一个按钮，可以重置表单中的所有输入值。

<input> 标签（隐藏字段）

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> 创建一个不在屏幕上显示的隐藏字段，用于在表单提交时向后端发送数据。

<input> 标签（颜色选择器）

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> 显示一个颜色选择器，并创建一个供用户选择颜色的输入字段。

<input> 标签（日期输入字段）

1<input type="date" name="birthday">

• <input type="date"> 创建一个日期输入字段，显示选择日期的日历。

<input> 标签（时间输入字段）

1<input type="time" name="appointment_time">

• <input type="time"> 创建一个用于输入时间的字段，并显示时间选择器。

<input> 标签（文件输入字段）

1<input type="file" name="resume">

• <input type="file"> 创建一个供用户选择和上传文件的输入字段。
• form 标签的 enctype 属性必须设置为 multipart/form-data。

<input> 标签（数字）

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> 创建一个数字输入字段，允许设置最小值、最大值和步长（增量/减量值）。

<input> 标签（数字范围选择字段）

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> 创建一个输入字段，用户可以使用滑块在一定范围内选择一个值。

<textarea> 标签

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• <textarea> 标签创建一个多行文本输入字段。适用于输入长文本或评论。

<select> 标签

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• <select> 标签创建一个下拉菜单，选项由 <option> 标签定义。用户可以选择一个或多个项目。

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• 要启用多项选择，请添加 multiple 属性。指定此属性会将选项显示为列表框。

<optgroup> 标签

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• <optgroup> 标签用于将相关项分组在一起。label 属性允许您设置组名，即使列表很长，也可以为用户提供清晰的选项。

<label> 标签

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• <label> 标签为输入字段、复选框和单选按钮定义标签，提升可用性和可访问性。
• 例如，单击标签可以聚焦输入字段或切换复选框的选中状态。

<fieldset> 标签

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• <fieldset> 标签对相关表单控件进行分组，<legend> 标签为组提供标题。

<button> 标签

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• <button> 标签定义了一个可点击的按钮，用于触发表单提交或其他操作。

  指定 type="button" 时，它作为一个普通按钮功能。点击它不会提交表单或触发任何其他默认操作。当您想用 JavaScript 设置自定义操作时使用。

  指定 type="submit" 时，它作为表单提交按钮功能。点击此按钮时，包含它的表单将被提交。

  指定 type="reset" 时，它作为表单重置按钮功能。点击它将重置表单中的所有输入字段并将其返回到初始状态。

  如果未指定 type 属性，某些浏览器可能将其视为 type="submit"，因此建议明确指定类型以确保预期行为。

• <button> 标签可以在起始标签和结束标签之间包含其他HTML内容，从而可以创建带有图标或复杂文本的按钮。

• 对于使用 <input> 标签的提交按钮，value 属性的值会包含在表单数据中，但对于 <button> 标签，默认情况下不会发送。

  通过为 <button> 标签指定 name 和 value 属性，可以将其值作为表单数据发送。

<datalist> 标签

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• <datalist> 标签为 <input> 元素提供了一组可选择的选项。用户可以从列表中选择或输入自己的值。

<output> 标签

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• <output> 标签用于显示计算结果或用户交互的结果。它用于动态显示表单或脚本中的计算结果。
• 对于 for 属性，请指定要关联的表单元素的 ID，用空格分隔。

<progress> 标签

1<progress value="70" max="100">70%</progress>

• <progress> 标签用于显示任务的进度。例如，它可以直观地显示文件下载或安装的进度。

<meter> 标签

1<meter value="0.6">60%</meter>

• <meter> 标签表示一个在已知范围内的数值测量。它用于显示在特定范围内的测量值，例如磁盘使用或燃料表。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video