HTML表单元素

HTML 表单元素用于存储用户输入。有不同类型的表单元素，如文本框、复选框、下拉列表、提交按钮等。例如，

<form>
    <label for="name">Name:</label>
    <input type="text" name="name"><br><br>
    <label for="sex">Sex:</label>
    <input type="radio" name="sex" id="male" value="male">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="female" value="female">
    <label for="female">Female</label> <br><br>
    <input type="submit" value="Submit">
</form>

浏览器输出

在这里，<input> 和 <label> 都是 HTML 表单元素。

HTML表单元素

针对不同的输入类型，有各种 HTML 表单元素。HTML5 中可用的表单元素如下：

• HTML <input> 标签
• HTML <label> 标签
• HTML <button> 标签
• HTML <select>, <option> 和 <optgroup> 标签
• HTML <textarea> 标签
• HTML <fieldset> 标签
• HTML <legend> 标签
• HTML <datalist> 标签
• HTML <output> 标签

HTML <input> 标签

HTML <input> 标签定义了用户可以输入数据的字段。例如，

<input type="text" name="firstname">

浏览器输出

这里，

• type - 决定 <input> 标签接受的输入类型
• name - 指定输入的名称

要了解更多关于 HTML input 标签及其类型的信息，请访问HTML Input 标签。

HTML <label> 标签

HTML label 标签用于为表单元素创建标题。<label> 标签内的文本会显示给用户。

<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">

浏览器输出

for 属性用于将标签与表单元素关联起来。for 属性的值设置为表单元素的 id，在上面的例子中是 firstname。

HTML Label 主要用于可访问性，因为屏幕阅读器会朗读与字段关联的标签，它也改善了用户体验，因为点击标签也会使输入字段获得焦点。

这在小屏幕上也非常有用，因为它使得执行诸如聚焦输入、选择复选框、选择单选框等操作变得更容易。

HTML <button> 标签

HTML <button> 元素是一个交互式元素，用户可以通过鼠标、键盘、手指、语音命令或其他辅助技术激活它。

它在点击时执行可编程操作，例如提交表单或打开对话框。例如，

<button type="button">Click me</button>

type 属性决定了点击按钮时执行的动作。它有 3 个可能的值：

• 提交（submit）

如果 type 的值为 submit，则按钮点击动作会提交表单。例如，

<form>
    <label for="name">Name:</label>
    <input type="text" name="name"><br><br>
    <button type="submit">Submit</button>
</form>

• 重置（reset）

如果 type 的值为 reset，则按钮点击动作会将所有表单元素的值重置为其初始值。例如，

<form>
    <label for="name">Name:</label>
    <input type="text" name="name"><br><br>
    <button type="reset">Reset</button>
</form>

浏览器输出（重置后）

• 按钮（button）

如果 type 的值为 button，则按钮点击动作没有默认功能。通常，JavaScript 用于为这类按钮添加功能。例如，

<button type="button">Click me</button>

浏览器输出

HTML <select>、<option> 和 <optgroup> 标签

HTML <select> 标签用于创建选项菜单。每个选项都由 <option> 标签表示。例如，

<label for="pets">Pets:</label>
<select id="pets">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>

浏览器输出

浏览器输出

此外，我们还可以将选项元素分组在 <optgroup> 标签内，以创建选项组。例如，

<label for="pets">Pets:</label>
<select id="pets">
    <optgroup label="Mammals">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
    </optgroup>
    <optgroup label="Insects">
        <option value="spider">Spider</option>
        <option value="ants">Ants</option>
    </optgroup>
    <optgroup label="Fish">
        <option value="goldfish">Goldfish</option>
    </optgroup>
</select>

浏览器输出

HTML <textarea> 标签

HTML <textarea> 标签用于定义一个可自定义的多行文本输入字段。例如，

<textarea rows="10" cols="30"> Type something…</textarea>

浏览器输出

这里，rows 和 cols 属性表示文本字段的行数和列数。

HTML <fieldset> 标签

HTML <fieldset> 标签用于对相似的表单元素进行分组。它是一个展示性标签，不影响表单中的数据。例如，

<form >
    <fieldset>
        <label for="firstname">First name:</label><br>
        <input type="text" id="firstname" name="fname"><br>
        <label for="lastname">Last name:</label><br>
        <input type="text" id="lastname" name="lname"><br>
    </fieldset>
</form>

浏览器输出

这里，边框来自 <fieldset> 元素。

HTML <legend> 标签

HTML <legend> 标签是另一个展示性标签，用于为 <fieldset> 元素提供标题。它的作用类似于 HTML <label> 标签。例如，

<form>
    <fieldset>
    <legend>Name</legend>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname"><br>
    </fieldset>
</form>

浏览器输出

HTML <datalist> 标签

<datalist> 标签为 <input> 元素定义了一个预定义选项列表。它用于为表单元素提供自动补全选项，当用户填写表单时，这些选项会作为推荐选项显示。例如，

<label for="country-choice">Choose a country:</label>
<input list="country-options" id="country-choice" name="country-choice">
<datalist id="country-options">
    <option value="Australia">
    <option value="Austria">
    <option value="America">
    <option value="Nepal">
</datalist>

浏览器输出

在这里，当用户输入 au 时，浏览器会向用户推荐包含这些字母的选项。

HTML <output> 标签

HTML <output> 标签是一个容器元素，用于存储通常使用 JavaScript 执行的计算结果。例如，

<form>
    <input type="number" id="b" name="b" value="50" /> +
    <input type="number" id="a" name="a" value="10" /> =
    <output name="result" for="a b"></output>
</form>
<script>
    const output = document.getElementsByName("result")[0]
    const inputA = document.getElementById('a')
    const inputB = document.getElementById('b')
    output.innerText = Number(inputA.value) + Number(inputB.value)
</script>

浏览器输出

<output> 标签的 for 属性接受一个以空格分隔的值，该值包含计算中使用的所有输入。您会注意到我们在 for 中使用了 a b。这表示 <output> 标签内的输出是使用输入 a 和 b 生成的。

<output> 内部的值通常由 Javascript 生成并填充到元素中。在这里，我们计算了两个输入的和，并将其插入到 <output> 元素中。