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

2.<input> 元素

#文本类型
<input type="text" name="firstname">
#E-mail类型
<input type="email" name="email">
#密码类型
<input type="password" name="psw">
#单选按钮类型
<input type="radio" name="sex" value="male" checked>
#复选框类型
<input type="checkbox" name="vehicle" value="Bike">
#按钮类型
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
#数字类型
<input type="number" name="quantity" min="1" max="5">
#月份和年份类型
<input type="month" name="bdaymonth">
#周和年类型
<input type="week" name="week_year">
#日期和时间类型(有时区)
<input type="datetime" name="bdaytime">
#日期类型
<input type="date" name="bday">
#时间类型(无时区)
<input type="time" name="usr_time">
#本地日期和时间类型(无时区)
<input type="datetime-local" name="bdaytime">
#颜色类型
<input type="color" name="favcolor">
#搜索类型
<input type="search" name="googlesearch">
#电话号码类型
<input type="tel" name="usrtel">
#URL类型
<input type="url" name="homepage">
#区间范围类型
<input type="range" name="points" min="0" max="10">
#提交按钮类型
<input type="submit" value="Submit">

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>

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>

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注