您现在的位置是：网站首页> 前端技术> HTML HTML

HTML 常见表单元素与属性的使用

Smile 2020-05-07 HTML Javascript 阅读：1327

简介HTML 表单用于收集用户输入，在 web 开发中大量使用到，表单由不同类型的 input 元素、复选框、单选按钮、提交按钮等表单元素构成，这里简单总结下常见的表单元素

1、<form> 元素定义 HTML 表单，具有如下属性

accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）

2、 HTML 所有表单元素

（1）<input> 元素是最重要的表单元素，根据不同的 type 属性，可以变化为多种形态，例如

<input type="text" name="username">
<input type="radio" name="sex" value="0">
<input type="radio" name="sex" value="1">
<input type="checkbox" name="savor[]">
<input type="checkbox" name="savor[]">

（2）<select> 元素定义下拉列表，示例

<select name="savor">
	<option value="1">唱</option>
	<option value="2">跳</option>
	<option value="3">rap</option>
	<option value="4">篮球</option>
</select>

（3）<option>通常和<select>配合使用，通过添加 selected 属性来定义预定义选项，默认首个选项显示为被选选项

<option value="2" selected>跳</option>

（4）<textarea> 元素定义多行输入字段（文本域）

<textarea name="content" rows="10" cols="30">
大家好，我是练习时长两年半的个人练习生，喜欢唱，跳，rap.
</textarea>

（5）<button> 元素定义可点击的按钮

<button type="button">确认提交</button>

（6）HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表
用户会在他们输入数据时看到预定义选项的下拉列表
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性

示例

<form action="user.php">
    <input list="cid">
    <datalist id="cid">
        <option value="音乐">
        <option value="地理">
        <option value="体育">
    </datalist> 
</form>

3、<input>元素的多种 type 属性

常见 type 输入属性
属性	描述
text	定义文本输入字段
password	定义密码输入字段
radio	定义单选按钮
checkbox	定义复选框
button	定义按钮
submit	定义提交表单数据至表单处理程序的按钮
HTML5 type 输入类型，老式 web 浏览器不支持的输入类型，会被视为输入类型 text
属性	描述
number	定义数字值的输入字段
date	定义日期的输入字段
color	定义颜色的输入字段
range	定义一定范围内的值的输入字段
month	允许用户选择月份和年份
week	允许用户选择周和年
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）
email	定义电子邮件地址的输入字段
search	定义搜索输入字段
tel	定义电话号码的输入字段
url	定义 URL 地址的输入字段

4、常见的输入字段的限制属性

属性	描述
disabled	规定输入字段应该被禁用
readonly	规定输入字段为只读（无法修改）
max	规定输入字段的最大值
min	规定输入字段的最小值
maxlength	规定输入字段的最大字符数
pattern	规定通过其检查输入值的正则表达式
required	规定输入字段是必需的（必需填写）
size	规定输入字段的宽度（以字符计）
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值