菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML 教程

HTML 首页 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 格式化 HTML 引用 HTML 注释 HTML 颜色 HTML CSS HTML 链接 HTML 图像 HTML 收藏夹图标 HTML 页面标题 HTML 表格 HTML 列表 HTML 块和内联元素 HTML Div HTML 类 HTML Id HTML Iframes HTML JavaScript HTML 文件路径 HTML Head HTML 布局 HTML 响应式 HTML Computercode HTML 语义化 HTML 风格指南 HTML 实体 HTML 符号 HTML 表情符号 HTML 字符集 HTML URL 编码 HTML vs. XHTML

HTML 表单

HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML 输入属性 输入表单属性

HTML 图形

HTML Canvas HTML SVG

HTML 媒体

HTML 媒体 HTML 视频 HTML 音频 HTML 插件 HTML YouTube

HTML API

HTML 地理定位 HTML 拖放 HTML Web 存储 HTML Web Workers HTML SSE

HTML 示例

HTML 示例 HTML 编辑器 HTML 测验 HTML 练习 HTML 网站 HTML 面试准备 HTML 新兵训练营 HTML 证书 HTML 摘要 HTML 无障碍性

HTML 参考

HTML 标签列表 HTML 属性 HTML 全局属性 HTML 浏览器支持 HTML 事件 HTML 颜色 HTML Canvas HTML 音频/视频 HTML Doctype HTML 字符集 HTML URL 编码 HTML 语言代码 HTTP 消息 HTTP 方法 PX 转 EM 转换器 键盘快捷键

HTML 表单元素


本章介绍所有不同的 HTML 表单元素。


HTML <form> 元素

HTML <form> 元素可以包含一个或多个以下表单元素

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>
  • <output>
  • <option>
  • <optgroup>

<input> 元素

最常用的表单元素之一是 <input> 元素。

根据 type 属性的不同,<input> 元素可以显示为多种方式。

示例

<label for="fname">名字:</label>
<input type="text" id="fname" name="fname">
自己动手试一试 »

下一个章节将介绍 type 属性的所有不同值:HTML 输入类型


<label> 元素

<label> 元素为多个表单元素定义了一个标签。

<label> 元素对屏幕阅读器用户很有用,因为当用户聚焦于输入元素时,屏幕阅读器会大声朗读标签。

<label> 元素也有助于那些点击非常小区域(例如单选按钮或复选框)有困难的用户 - 因为当用户点击 <label> 元素内的文本时,它会切换单选按钮/复选框。

<label> 标签的 for 属性应与 <input> 元素的 id 属性相等,以便将它们绑定在一起。


<select> 元素

<select> 元素定义了一个下拉列表

示例

<label for="cars">选择一辆车:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">Audi</option>
</select>
自己动手试一试 »

<option> 元素定义了一个可以选择的选项。

默认情况下,下拉列表中的第一项被选中。

要定义一个预先选中的选项,请在选项中添加 selected 属性

示例

<option value="fiat" selected>菲亚特</option>
自己动手试一试 »

可见值

使用 size 属性来指定可见值的数量

示例

<label for="cars">选择一辆车:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">Audi</option>
</select>
自己动手试一试 »

允许多选

使用 multiple 属性允许用户选择多个值

示例

<label for="cars">选择一辆车:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">Audi</option>
</select>
自己动手试一试 »

<textarea> 元素

<textarea> 元素定义了一个多行输入字段(文本区域)

示例

<textarea name="message" rows="10" cols="30">
猫正在花园里玩耍。
</textarea>
自己动手试一试 »

rows 属性指定文本区域中可见的行数。

cols 属性指定文本区域的可见宽度。

以上 HTML 代码在浏览器中的显示效果如下

您也可以使用 CSS 定义文本区域的大小

示例

<textarea name="message" style="width:200px; height:600px;">
猫正在花园里玩耍。
</textarea>
自己动手试一试 »


<button> 元素

<button> 元素定义了一个可点击的按钮

示例

<button type="button" onclick="alert('Hello World!')">点击我!</button>
自己动手试一试 »

以上 HTML 代码在浏览器中的显示效果如下


注意: 始终为 button 元素指定 type 属性。不同的浏览器可能为 button 元素使用不同的默认类型。


<fieldset> 和 <legend> 元素

<fieldset> 元素用于在表单中对相关数据进行分组。

<legend> 元素为 <fieldset> 元素定义了一个标题。

示例

<form action="/action_page.php">
  <fieldset>
    <legend>个人信息:</legend>
    <label for="fname">名字:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">姓:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="提交">
  </fieldset>
</form>
自己动手试一试 »

以上 HTML 代码在浏览器中的显示效果如下

个人信息

姓氏



<datalist> 元素

<datalist> 元素为 <input> 元素指定了一系列预定义选项。

当用户输入数据时,他们会看到一个预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

示例

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
自己动手试一试 »

<output> 元素

<output> 元素表示计算结果(例如脚本执行的计算)。

示例

执行计算并将结果显示在 <output> 元素中

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>
自己动手试一试 »


HTML 表单元素

标签 描述
<form> 定义一个用于用户输入的 HTML 表单
<input> 定义一个输入控件
<textarea> 定义多行输入控件(文本区域)
<label> 定义 <input> 元素的标签
<fieldset> 对表单中的相关元素进行分组
<legend> 定义 <fieldset> 元素的标题
<select> 定义一个下拉列表
<optgroup> 定义下拉列表中的一组相关选项
<option> 定义下拉列表中的一个选项
<button> 定义一个可单击按钮
<datalist> 指定输入控件预定义选项的列表
<output> 定义计算结果

有关所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持