您的位置:首页 > Web前端 > HTML5

h5新增表单控件及其相关属性

2016-06-05 16:12 507 查看

新的输入型控件

email : 电子邮箱文本框,跟普通的没什么区别当输入不是邮箱的时候,验证通不过移动端的键盘会有变化

tel : 电话号码

url : 网页的URL

search : 搜索引擎

chrome下输入文字后,会多出一个关闭的X

range : 特定范围内的数值选择器

min(最小值)、max(最大值)、step( 步数 )

例子 : 用JS来显示当前数值

<form>
<input type="range" step="2" min="0" max="10" value="2" />
<input type="submit" />
</form>




number : 只能包含数字的输入框

color : 颜色选择器

datetime : 显示完整日期

datetime-local : 显示完整日期,不含时区

time : 显示时间,不含时区

date : 显示日期

week : 显示周

month : 显示月

新的表单特性和函数

placeholder : 输入框提示信息

例子 : 微博的密码框提示

<form>
<input type="text" placeholder="请输入4-16个字符" />
<input type="submit" />
</form>


autocomplete : 是否保存用户输入值

默认为on,关闭提示选择off

<form>
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
<input type="submit" />
</form>


autofocus : 指定表单获取输入焦点

list和datalist : 为输入框构造一个选择列表

list值为datalist标签的id

required : 此项必填,不能为空

Pattern : 正则验证 pattern=”\d{1,5}“

Formaction 在submit里定义提交地址

<form action="http://www.baidu.com">
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" />
<input type="submit" value="提交" />
<input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />
</form>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: