- 标签的control属性
- 文本框的placehoulder属性
- 文本框的list属性
- 文本框的AutoComplete属性
- 文本框的pattern属性
- 文本框的SelectionDirection属性
- 复选框的indeterminate属性
- image提交按钮的height属性与width属性
1.标签的control属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的control属性</title>
</head>
<body>
<script>
function setValue(){
var lable = document.getElementById("lable");
var textbox = lable.control;
textbox.value="122352";
}
</script>
<form>
<lable id="lable">
邮编：
<input id="txt_zip" maxlength="6"/>
<small>请输入六位数字</small>
</lable>
<input type="button" value="设置默认值" οnclick="setValue()"/>
</form>
</body>
</html>
效果演示：
2.文本框的placehoulder属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的palceholder属性</title>
</head>
<body>
<input type="text" placeholder="请输入用户名">
</body>
</html>
效果演示：
3.文本框的list属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的list属性</title>
</head>
<body>
<form>
<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display: none">
<option value="HTML学习">HTML学习</option>
<option value="Android学习">Android学习</option>
<option value="ios学习">ios学习</option>
</datalist>
</form>
</body>
</html>
效果演示：（可自己输入，可选择预设字段）
4.文本框的AutoComplete属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的AutoComplete属性</title>
</head>
<body>
<input type="text" name="greeting" autocomplete="" list="greetings">
<datalist id="greetings" style="display: none">
<option value="HTML5学习">HTML5学习</option>
<option value="HTML5学习2">HTML5学习2</option>
<option value="HTML5学习3">HTML5学习3</option>
</datalist>
</body>
</html>
效果演示：
5.文本框的pattern属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的pattern属性</title>
</head>
<body>
<form action="http://www.baidu.com">
请输入A-Z任意六位数
<input type="text" pattern="[A-Z]{6}" name="greeting">
<input type="submit">
</form>
</body>
</html>
效果演示：
6.文本框的SelectionDirection属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框的SelectionDirection属性</title>
</head>
<body>
<script>
function AD() {
var control=document.forms[0]['test'];
var Direction=control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="text" name="test">
<input type="button" value="点击我进行测试" οnclick="AD()">
</form>
</body>
</html>
效果演示：（正向选择为forward,反向选择为backward,可以判断用户的操作行为）
7.复选框的indeterminate属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框的indeterminate属性</title>
</head>
<body>
<input type="checkbox" indeterminate id="cb">属性测试
<script>
var cb = document.getElementById("cb");
cb.indeterminate=true;
</script>
</body>
</html>
效果演示：（有选取、非选取、尚未明确三种状态）
8.image提交按钮的height属性与width属性
代码演示：
效果演示：
好的，今天的html5中的新增的表单元素就演示到这里、