4.HTML5常用表单元素一览表

1.<form> 元素

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form> 
form属性描述
accept-charset规定在被提交表单中使用的字符集(默认:页面字符集)。
action规定向何处提交表单的地址(URL)(提交页面)。
autocomplete规定浏览器应该自动完成表单(默认:开启)。
enctype规定被提交数据的编码(默认:url-encoded)。
method规定在提交表单时所用的 HTTP 方法(只支持GET和POST方法,默认:GET)。
name规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate规定浏览器不验证表单。
rel规定链接资源和当前文档之间的关系。
target规定 action 属性中地址的目标(默认:_self)。

2.<input> 元素

input元素/type属性描述
隐藏类型<input type=”hidden”>
文本类型<input type=”text” name=”firstname”>
搜索类型<input type=”search” name=”googlesearch”>
电话号码类型<input type=”tel” name=”usrtel”>
URL类型<input type=”url” name=”homepage”>
E-mail类型<input type=”email” name=”email”>
密码类型<input type=”password” name=”psw”>
月份类型<input type=”month” name=”bdaymonth”>
周类型<input type=”week” name=”week_year”>
日期类型<input type=”date” name=”bday”>
时间类型<input type=”time” name=”usr_time”>
本地日期和时间类型<input type=”datetime-local” name=”bdaytime”>
数字类型<input type=”number” name=”quantity” min=”1″ max=”5″>
区间范围类型<input type=”range” name=”points” min=”0″ max=”10″>
颜色类型<input type=”color” name=”favcolor”>
单选框类型<input type=”radio” name=”sex” value=”male” checked>
复选框类型<input type=”checkbox” name=”vehicle” value=”Bike”>
文件类型<input type=”file” id=”formFileDisabled” disabled>
图片按钮类型<input type=”image”>
按钮类型<input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”>
重设按钮类型<input type=”reset”>
提交按钮类型<input type=”submit” value=”Submit”>
input元素/其它属性描述
autofocus规定当页面加载时 <input> 元素应该自动获得焦点。
disabled规定输入字段应该被禁用。
form规定 <input> 元素所属的一个或多个表单。
formaction规定当提交表单时处理该输入控件的文件的 URL。
formenctype规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method=”post” 的表单)。
formmethod用以向 action URL 发送表单数据(form-data)的 HTTP 方法。
formnovalidate规定在提交表单时不对 <input> 元素进行验证。
formtarget规定的名称或关键词指示提交表单后在何处显示接收到的响应。
height 和 width规定 <input> 元素的高度和宽度。
list引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
maxlength规定输入字段的最大字符数。
minlength规定输入字段的最小字符数。
max规定输入字段的最大值。
min规定输入字段的最小值。
multiple规定允许用户在 <input> 元素中输入一个以上的值。
pattern规定通过其检查输入值的正则表达式。
placeholder规定用以描述输入字段预期值的提示。
readonly规定输入字段为只读(无法修改)。
required规定输入字段是必需的(必需填写)。
size规定输入字段的宽度(以字符计)。
step规定输入字段的合法数字间隔。
value规定输入字段的默认值。

3.<textarea> 元素

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

4.<button> 元素

//按钮类型
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
//重设类型
<button type="reset"></button>
//提交类型
<button type="submit"></button>

5.<select> 元素和<datalist> 元素

select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加。

datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

6.<label> 元素

如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

7.<fieldset> 元素和<legend> 元素

<fieldset> 元素组合表单中的相关数据,<legend> 元素为 <fieldset> 元素定义标题。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/frond/htmlcss/3845.html

发表评论

登录后才能评论