HTML 表单元素
HTML 提供了丰富的表单元素，能够满足用户的各种输入需求。
这些元素包括<input>、<select>、<textarea>、<button>、<datalist>等，每种元素都有其独特的用途和功能。
通过灵活运用这些元素，开发者可以创建出功能强大且用户友好的表单界面。
<input> 元素
<input>是所有 HTML 表单元素中最重要的元素。
<input>元素根据不同的 type 属性，可以变化为多种形态。
在后续的章节中，我们会讲到 Input 输入类型。
<select> 元素
在 HTML 里，<select>元素用于创建下拉列表：
<select name="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="cherry">樱桃</option>
</select><option>元素定义<select>元素的待选择的选项。
列表通常会把首个选项显示为被选选项，通过添加selected属性来定义预定义选项：
<select name="fruit">
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
<option value="cherry">樱桃</option>
</select><textarea> 元素
<textarea>元素定义多行输入字段（文本域）：
<textarea name="message" rows="10" cols="30">
这是一个文本域，用于多行的数据输入
</textarea><button> 元素
<button>元素用来定义可点击的按钮：
<button type="button" onclick="alert('Hello World!')">Click Me!</button>HTML5 <datalist> 元素
<datalist>元素用来定义<input>元素规定预定义选项列表：
<form action="action_page.php">
<input list="fruit">
<datalist id="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="cherry">樱桃</option>
</datalist>
</form>HTML 表单元素列表
| 元素 | 描述 |
|---|---|
| <input> | 用于创建多种输入控件，如文本、密码、日期、文件上传等。 |
| <select> | 创建下拉选择框，用户可以从预定义选项中选择。 |
| <textarea> | 提供多行文本输入框，适合用户输入较长的文本内容。 |
| <button> | 创建按钮，支持提交、重置或自定义行为。 |
| <label> | 为表单元素提供标签，提升可访问性。 |
| <fieldset> | 将表单元素分组，通常与 <legend> 一起使用。 |
| <legend> | 为 <fieldset> 分组添加标题。 |
| <datalist> | 为输入框提供预定义选项列表，用户可以从列表中选择或输入自定义内容。 |
| <output> | 显示计算结果或脚本输出，通常与 JavaScript 结合使用。 |
| <progress> | 显示任务的完成进度。 |
| <meter> | 显示标量值或分数值，例如磁盘使用量或评分。 |
| <optgroup> | 将 <option> 分组，用于创建分层下拉菜单。 |
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
110
阅读
0
评论