//一个html5的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<hgroup>
<h2>Zoo Keeper Application From</h2>
<h4> please complete the from </h4>
</hgroup>
</header>
<div>
<fieldset>
<legend>Contact Details </legend>
<table>
<tr>
<td>
<label>Name<em>* </em></label>
</td>
<td>
<input id="name" type="text">
</td>
</tr>
<tr>
<td>
<label> Telephone</label>
</td>
<td>
<input id="telephone" type="text">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input id="email" type="text" />
</td>
</tr>
<tr>
<td>
<label>habby</label>
</td>
<td>
<input id="habby" type="checkbox" name="habby" />足球
<input id="habby" type="checkbox" name="habby" />篮球
</td>
</tr>
<tr>
<td>
<label>sex</label>
</td>
<td>
<input id="sex" type="radio" name="sex" />男
<input id="sex" type="radio" name="sex" />女
</td>
</tr>
<tr>
<td>
<label>home</label>
</td>
<td>
<select>
<option>云南</option>
<option>黑龙江</option>
</select>
</td>
</tr>
<tr>
<td>
<label>other</label>
</td>
<td>
<textarea>其他信息</textarea>
</td>
</tr>
</tr>
<tr>
<td>
<input type="button" value="按钮">
</td>
<td>
<input type="submit" />
<input type="reset" />
<input type="image" src="../img/image.png">
</td>
</tr>
</table>
</fieldset>
</div>
<footer>
</footer>
</body>
</html>
1.表单<input>中的placeholder=“文本框正确的输入内容”属性---用来提示;title属性当用户点击当前文本框时提示输入内容
2.在文本框获取焦点时改变样式
<style type="text/css">
input:focus{
background: palegoldenrod;
}
</style>
3.html验证原理
表单的<input>的required属性=表示该字段不能为空
4.关闭验证--<form novalidate>
焦点:挑选正确的起点--autofocus属性,只能给一个<input>或<textarea>标签添加该属性;
验证样式伪类:
required(必填),optional(选填)
valid(有效),invalid(无效)
in-range(在范围内),out-of-range(超出范围)
eg: input:required:invalid{
background-color:lightyellow;
}
正则表达式:匹配文本
常用于搜索(在长文档中查找匹配的文本)和验证(验证某个值匹配模式)
html5可以通过pattern应用到<input>或者<textarea>中
eg:
<input type="text" id="id" pattern="[a-z]{3}-[0-9]{3}" autofocus required />
js库:https://github.com/westonruter/webform2
下的download表单验证
http://www.useragentman.com/tests/html5Widgets
滑动条,数据选择器,颜色选择器
导入<head><script src="webform2.js"></script></head>
新的输入控件
<input type="email/url/search/tel/number/range/datetime/date/month/color">
number数值:有min和max属性,可以限制只输入数值
<input id="number" type="number" min="0" max="100" step="0.5">
网址url:必须是xxx://,且XX必须是字母;
email(电子邮箱):必须包含一个@和一个.
tel(电话号码):不接受字母
range(滑动条):数值型控件,不会显示值,可以使用js来处理;
<input id="weight" type="range" min="50" max="1000" value="160" step="5" >
datetime(日期):
<input type="date" >
<input type="time" >
<input type="month" >
<input type="week" >
color(颜色):
<input type="color" >
显示输入建议--datalist,显示一个下拉建议表,既可以输入又可以选择;
eg:
<legend id="zz">dddd</legend>
<input id= "www" list="a">
<datalist id="a">
<option label="zz" value="zz">
<option label="ww" value="ww">
</datalist>
注:所有控件为空都会验证成功,如果为必填项目,加上required属性;
<progress></process>进度条标签;js代码来获取和修改;
eg: a:不确定进度条
<progress >滚动条不断滚动
</progress>
<progress value="12" min="1" max="100">25%
</progress>
<meter></meter>计量条;low和high属性表示过高或者过低;
eg:
<meter min="0" max="100" low="10" high="60" value="30" >30px
</meter>
contentEditable标记内容编辑元素
sesignMode编辑页面和iframe标签一起使用;