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

HTML5之智能表单

2015-05-16 20:09 239 查看

<!doctype html>
<html>
<head></head>
<body>
<form action="http://localhost/test.php" method="post" id="register"></form>

<input type="text" name="user" value="" form="register" />
<input type="password" name="pwd" value="" form="register" />
<select name="year" form="register">
<option value="1970">1970</option>
<option value="1980">1980</option>
<option value="1990">1990</option>
</select>
<input type="submit" value="注册" form="register" />
<hr />
默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />
邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
URL：<input type="url" name="url" value="" form="register" /><br />
DATE:<input type="date" name="riqi" value="" form="register" /><br />
TIME：<input type="time" name="shijian" value="" form="register" /><br />
Month：<input type="month" name="yue" value="" form="register" /><br />
WEEK：<input type="week" name="zhou" value="" form="register" /><br />
数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />
颜色：<input type="color" name="yanse" value="" form="register" /><br />
<hr />
自动填充表单<br />
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>人在囧途</option>
<option>车在囧途</option>
<option>泰囧</option>
</datalist>
<hr />
输出表单output<br />
<form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result"></output>
</form>

</body>
</html>

智能表单的使用和规范

Type="email"	限制用户输入必须为Email类型
Type="url"	限制用户输入必须为URL类型
Type="date"	限制用户输入必须为日期类型
Type="time"	限制用户输入必须为时间类型O
Type="month"	限制用户输入必须为月类型O
Type="week"	限制用户输入必须为周类型O
Type="number"	限制用户输入必须为数字类型
Type="range"	产生一个滑动条的表单
Type="search"	产生一个搜索意义的表单配合results="n"属性 ,显示一个搜索图标
Type="color"	生成一个颜色选择表单

新增的表单属性

属性	值	说明
Required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
Autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
Pattern	正则表达式	输入的内容必须匹配到指定正则

Autocomplete列表
Datalist标签配合option标签实现的自动填充表单功能：

<input type="search" name="move" list="search" >

<datalist id="search" >
<option>关键词1</option>
<option>关键词2</option>
<option>关键词3</option>
</datalist>

output的使用

<form oninput="res.value=no1.value*no2.value“ >
<input type="text" name="no1">
<input type="text" name="no2">
<output name="res"></output>
</form>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航