您现在的位置是: 网站首页> 前端技术> HTML HTML
HTML 常见表单元素与属性的使用
Smile
2020-05-07 23:39:00
HTML
Javascript
阅读:2547
简介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 | 允许用户选择日期和时间(无时区) |
定义电子邮件地址的输入字段 | |
search | 定义搜索输入字段 |
tel | 定义电话号码的输入字段 |
url | 定义 URL 地址的输入字段 |
4、常见的输入字段的限制属性
属性 | 描述 |
disabled | 规定输入字段应该被禁用 |
readonly | 规定输入字段为只读(无法修改) |
max | 规定输入字段的最大值 |
min | 规定输入字段的最小值 |
maxlength | 规定输入字段的最大字符数 |
pattern | 规定通过其检查输入值的正则表达式 |
required | 规定输入字段是必需的(必需填写) |
size | 规定输入字段的宽度(以字符计) |
step | 规定输入字段的合法数字间隔 |
value | 规定输入字段的默认值 |
很赞哦! (0)