[HTML5]：所有表单元素的使用方式(附元素属性)-优快云博客

本文链接：https://blog.youkuaiyun.com/fengwei4618/article/details/77876223

本文介绍了HTML5中用于收集用户数据的表单元素，包括form、input、label、select、option、button和textarea。HTML5新增了多种input类型的属性，如email、date等，增强了表单的功能。同时，详细讲解了各元素的用途，如label元素用于关联输入元素，button元素可以包含文本或图片。还提到了textarea元素的placeholder属性，并提醒了使用时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML文档中，表单用于在网页中收集用户输入的数据，负责数据采集功能，表单元素有如下标签。

表单元素	功能描述
<form>	定义一个表单，用于申明采集数据的区域范围。里面可以嵌套其他表单元素
<input>	定义一个输入域。输入类型由type属性决定。
<label>	为input 元素定义标记。使用for属性和input元素ID进行绑定
<select>	定义一个下拉列表。可创建单选或多选菜单列表
<option>	定义选择列表中的可选项。一般和<select>元素一起使用，其他地方使用没意义
<button>	定义一个按钮。功能比<input>元素的button类型更加强大
<textarea>	定义一个多行文本输入域。设置长和宽建议使用CSS

form元素

form属性	值	描述
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	get post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top framename	规定在何处打开 action URL。

实例

 <!-- form元素综合演示 -->
            <form action="#" method="get" accept-charset="UTF-8" autocomplete="on" enctype="UTF-8" name="form-1" target="_self">
                <!-- form元素内部嵌套其他表单元素 -->
            </form>

上面实例中form元素一些属性的说明：action="#" 代表提交到本地页面， method="get"表示提交的数据参数会附在URL之后，tartget="_self"表示从自身窗口打开。

input元素

input属性	值	描述
accept	MIME_type	规定通过文件上传来提交的文件类型
checked	checked	规定input元素首次加载时应当被选中
disabled	disabled	规定input元素不能使用
type	下面给出	规定input元素的类型
name	自定义	input元素的名称。提交到服务器时用name值来指定。
value	自定义	规定input元素的值。value值的设置与type有关，有的为提交数据，有的是控件名

type属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

实例

           <!-- input元素的type属性综合使用 -->
            <form action="#" method="get" target="_self">
                账号：<input type="text" name="user" ><br>
                密码：<input type="password" name="psw" ><br>
                性别：
                <input type="radio" name="sex" value="1">男
                <input type="radio" name="sex" value="0">女
                <input type="radio" name="sex" value="10" checked>保密<br>
                爱好：
                <input type="checkbox" name="hobby" value="read">读书
                <input type="checkbox" name="hobby" value="swim">游泳
                <input type="checkbox" name="hobby" value="computer">玩电脑<br>
                上传文件：<input type="file" name="up-file" ><br>
                <input type="submit"  value="提交"/>
                <input type="reset"  value="重置"/><br>
                <!-- 和submit作用一样，只是点击图片来触发提交表单，submit和image两个选一个就行 -->
                <input type="image" src="" name="up-img" value="点击图片提交">
            </form>

使用get提交值，URL地址如下：

上面用到的type属性值都是html4的，在HTML5中增加了许多新类型，例如email、date、number、serach等等都非常实用，有兴趣的可以去尝试。

label元素

label 元素没有任何特殊效果。它唯一作用就是当点击 label 元素内的文本时，就会触发此控件，浏览器就会自动将光标焦点转到绑定的表单元素上。

label属性	值	描述
for	element_id	规定 label 与哪个表单元素绑定。
formHTML5	form_id	规定 label 字段所属的一个或多个表单。

实例

<label for="input-1">点击输入框</label>
       <label for="ta">点击留言框</label><br>
       输入框：<input type="text" value="" id="input-1"><br>
       留言框：<br>
       <textarea name="" id="ta" cols="30" rows="10"></textarea>

select元素与option元素

select属性	功能描述
options[]	返回包含当前下拉列表中所有选项的一个数组。
disabled	设置或返回是否应禁用下拉列表。
selectedIndex	设置或返回当前下拉列表中被选中项的索引值。
id className	设置或返回下拉列表的 id / 类名。
length	返回下拉列表中的选项数目。
multiple	设置或返回是否选择多个项目。
name	设置或返回下拉列表的名称。
type	返回下拉列表的表单类型。
size	设置或返回下拉列表中的可见行数。
tabIndex	设置或返回下拉列表的 tab 键控制次序。
autofocus HTML5	规定在页面加载时下拉列表自动获得焦点。
required HTML5	规定提交表单前必须选一个下拉列表中的选项。
form HTML5	返回select节点所属的一个或多个表单引用。

option属性	功能描述
defaultSelected	返回 selected 属性的默认值。
disabled	设置或返回选项是否应被禁用。
form	返回对包含该元素的 <form> 元素的引用。
id	设置或返回选项的 id。
index	返回下拉列表中某个选项的索引位置。
label	设置或返回选项的标记（仅用于选项组）。
selected	设置或返回 selected 属性的值。
text	设置或返回某个选项的纯文本值。
value	设置或返回被送往服务器的值。

实例

   <form action="#" method="get">
            <select name="country" required="required">
                <option value="1">中国</option>
                <option value="2">美国</option>
                <option value="3">日本</option>
                <option value="4">朝鲜</option>
                <option value="5">印度</option>
            </select>
       </form>

button元素

与input元素中的type=button相比，button元素提供了更为强大的功能和更丰富的内容，所以不要用input元素的button类型来做按钮，应该用button元素。

<button>元素中间的所有内容都是按钮内容，即按钮上显示的文本内容，其中包括任何可接受的正文内容。例如，我们可以在按钮中包含一个图片或者相关文本，做成一个图片按钮。HTML5还为button元素提供了许多新属性，可以用来代替form的一些属性。

button属性	值	描述
name	自定义	定义按钮的名称。
value	自定义	定义按钮的初始值。
disabled	disabled	规定该按钮已被禁用。
type	button reset submit	定义按钮是什么类型。默认是button类型，常用于JS
autofocusHTML5	autofocus	规定在页面加载时下拉列表自动获得焦点。
formHTML5	form_id	规定该按钮属于一个或多个表单。
formactionHTML5	URL	规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
formenctypeHTML5	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。
formmethodHTML5	get post	规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
formnovalidateHTML5	formnovalidate	提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
formtargetHTML5	_blank _self _parent _top framename	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。

实例

  <form>      
        <button type="button" οnclick="alert('你点击了一个按钮')">弹出按钮信息</button>
        <button disabled="disabled">disabled按钮</button><br>
        账号：<input type="text" name="user" id=""/><br>
        密码：<input type="password" name="psw" id=""/><br>
        <!-- 使用HTML5的新属性来设置提交的URL和提交方式 -->
        <button type="submit" formaction="#" formmethod="get">登录</button>
        <button type="reset" >重置</button>
  </form>
       <!-- URL地址：
            buttonTest.html?user=123456&psw=psw123#
        -->

textarea元素

textarea属性	值	描述
cols	number	规定该文本域内的列数。建议使用css来设置样式。
rows	number	规定该文本域内的行数。建议使用css来设置样式。
disabled	disabled	规定该文本域已被禁用。
name	自定义	定义该文本域的名称。
readonly	readonly	规定该文本域为只读。
autofocusHTML5	autofocus	规定当页面加载时，文本区域自动获得焦点。
requiredHTML5	required	规定该文本域是必填的。
placeholderHTML5	自定义	给该文本域做一个简单提示。类似于输入框的placeholder
maxlengthHTML5	number	规定该文本域中最大的字符数。
formHTML5	form_id	规定该文本域属于一个或多个表单
wrapHTML5	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

实例

<form action="#" method="get">
            留言：<br>
            <textarea name="context" style="width: 200px; height: 100px;" placeholder="请给一个描述" required></textarea>
            <p><button type="submit">提交</button></p>
        </form>

文本域效果如图：

其余属性的作用已给出，请自行测试其效果。

最后要说一下placeholder这个属性，大部分无法显示提示内容，都是因为在<textarea></textarea>之间有空格，所以导致里面有内容，则placeholder无效！要验证是否有内容可以点击文本域，会发现光标显示不在第一位，如下：

  <form action="#" method="get">
            <!-- 两个标签要紧挨着 不能有内容，尤其是空格！-->
            <textarea name="context" style="width: 200px; height: 100px;" placeholder="请给一个描述"></textarea>
            <!-- 标签写在下一行，有空格内容 -->
            <textarea name="context" style="width: 200px; height: 100px;" placeholder="请给一个描述">
            </textarea>
        </form>

有空格和没空格，两者进行对比：