- 標籤的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中的新增的表單元素就演示到這裏、