标签的control属性:在HTML5中,可以在标签内部放置一个表单元素,并通过该标签的control属性来访问该表单元素。
<!DOCTYPE html>
<html>
<head lang="en">
<title>标签的control属性</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function setValue(){
var label = document.getElementById('label');
var textbox = label.control;
textbox.value = "010010";
}
</script>
<form>
<label id="label">
邮编:
<input id="txt_zip" maxlength="6"/>
<small>请输入6位邮编</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()"></input>
</form>
</body>
</html>
View Code
文本框的autocomplete属性:帮助输入所用的自动完成功能,是一个省时又方便的功能。在HTML5之前,因为谁都可以看见输入的值,所以在安全当面存在缺陷,HTML5中只要使用autocomplete属性,安全性方面也可以得到很好的控制。语法:<form autocomplete="on|off">
<!DOCTYPE html>
<html>
<head lang="en">
<title>文本框的autocomplete属性</title>
<meta charset="utf-8">
</head>
<body>
<form action="1.html" method="post">
姓名:<input type="text" name="greeting" autocomplete="off"/><br/>
年龄:<input type="text" name="greeting" autocomplete="on"/><br/>
邮箱:<input type="email" name="greeting" autocomplete="off"/><br/>
<input type="submit"/>
</form>
</body>
</html>
View Code
文本框的list属性:在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
<!DOCTYPE html>
<html>
<head lang="en">
<title>文本框的list属性</title>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="text" name="greeting" list="greetings"/>
<datalist id="greetings" style="display: none">
<option value="html">html</option>
<option value="php">php</option>
<option value="android">android</option>
</datalist>
</form>
</body>
</html>
View Code
文本框的pattern属性:在HTML5中,对input元素使用pattern属性,并且将属性值设置为某个格式的正则表达式,在提交时会针对这些进行检查其是否符合给定的格式。若不符合时,则不允许提交,同时在浏览器中显示提示文字,提示输入的内容必须符合给定的格式。
<!DOCTYPE html>
<html>
<head lang="en">
<title>文本框的pattern属性</title>
<meta charset="utf-8">
</head>
<body>
<form action="1.html" method="post">
<input type="text" pattern="[A-Z]{5}">请输入A-Z之间的字符,最多5位
<input type="submit"/>
</form>
</body>
</html>
View Code
文本框的placeholder属性:placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
<!DOCTYPE html>
<html>
<head lang="en">
<title>文本框的placeholder属性</title>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="text" placeholder="请输入电话号码"/>
<input type="text" placeholder="请输入电子邮件地址"/>
</form>
</body>
</html>
View Code
文本框的SelectionDirection属性:HTML5增加的SelectionDirection属性,当用户在这两个元素(input和textarea)中用鼠标选取部分文字时,可以使用该属性来获取选取方向。当用户正向选取文字时,该属性值为forward,当用户反向选取文字时,该属性值为backward。当用户没有选取任何文字时,该属性值为forward。
<!DOCTYPE html>
<html>
<head lang="en">
<title>文本框的SelectionDirection属性</title>
<meta charset="utf-8">
</head>
<body>
<!-- Firefox中测试,Chrome不支持 -->
<script type="text/javascript">
function AD(){
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="test" name="text"/>
<input type="button" value="点我" onclick="AD()"/>
</form>
</body>
</html>
View Code
复选框的indeterminate属性:对于复选框checkbox元素来说,过去只是选取与非选取这两种状态。在HTML5中,可以在JavaScript脚本代码中对该元素使用indeterminate属性,以说明复选框处于“尚未明确是否选取”状态。
<!DOCTYPE html>
<html>
<head lang="en">
<title>复选框的indeterminate属性</title>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" indeterminate id="aa"/>测试
<script type="text/javascript">
var aa = document.getElementById('aa');
aa.indeterminate = true;
</script>
</body>
</html>
View Code
image提交按钮的height与width属性:针对类型为image的input元素,HTML5新增了两个属性,height、width分别用来指定图片按钮的高度和宽度。
<!DOCTYPE html>
<html>
<head lang="en">
<title>image提交按钮的height与width属性</title>
<meta charset="utf-8">
</head>
<body>
<form action="1.html" method="post">
姓名:<input type="text" name="name"/>
<input type="image" src="./timg.jpg" alt="错误" width="20" height="15"/>
</form>
</body>
</html>
View Code