HTML5表單新增元素和屬性(2)
control屬性
在標籤內部放置一個表單元素，並且通過該標籤的control屬性來訪問該表單元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function setValue(){
var label = document.getElementById("label");
var textbox = label.control;
textbox.value ="010010";
}
</script>
<form id="testform">
<label id="label">
郵編:
<input id="txt_zip" maxlength="6" />
<small>please input 6 number</small>
</label>
<input type="button" value="設置默認值" onclick="setValue()" />
</form>
</body>
</html>
placeholder屬性
placeholder是指當前文本框處於未輸入狀態時顯示輸入提示。當文本框處於未輸入狀態且未獲取光標焦點時，模糊提示輸入提示文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" placeholder="請輸入用戶名" />
</body>
</html>
list屬性
當行文檔的屬性
爲某個datalist元素的id
datalist元素類似於選擇框，當用戶想要設定的值叜選擇列表之內時，允許自動輸入。
datalist元素本身並不俠士，而是當文檔框獲得焦點時以提示輸入的方式顯示。
input的list屬性對應一個datalist標籤
datalist標籤包含一系列的optin選項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" name="greeting" list="greetings" />
<datalist id="greetings" style="display: none;">
<option value="HTML5學習">HTML5學習</option>
<option value="Android學習">Android學習</option>
<option value="IOS學習">IOS學習</option>
</datalist>
</form>
</body>
</html>
可下拉選擇
可編輯輸入
autocomplete屬性
幫助輸入所用的自動完成功能。
使用antocomplete屬性，安全性方面也得到了很好的控制。
pattern屬性
對input元素使用pattern屬性，並且將屬性值設置爲某個格式的正則表達式，在提交時會對這些進行檢查，檢查其內容是否符合給定格式。
當輸入內容不符合給定格式時，則不允許提交，同時在瀏覽器中顯示相應的文字提示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://localhost:8080/helloJSP/test01.jsp">
請輸入內容
<input pattern="[A-Z]{3}" name="part" />
<input type="submit" />
</form>
</body>
</html>
效果如下:
selectionDirection屬性
用戶在input和textarea元素中用鼠標選擇部分文字時，可以用selectionDirection屬性來獲取選擇的方向。
正向選取：forward
反向選取：backward
沒有選擇任何文字時：forward
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function AD(){
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="text" name="text" />
<input type="button" value="點擊我" onclick="AD()" />
</form>
</body>
</html>
indeterminate屬性
在JavaScript腳本代碼中對 CheckBox元素使用indeterminate屬性，說明覆選框處於“尚未明確是否選取”狀態。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" indeterminate id="cb" />屬性測試
<script>
var cb=document.getElementById("cb");
cb.indeterminate = true;
</script>
</body>
</html>
效果如下:
image提交按鈕的height屬性和width屬性
height和width分別用來指定圖片按鈕的高度和寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="test.jsp" method="post">
姓名：<input type="text" name="name" />
<input type="image" src="billd7.gif" alt="編輯" width="20" height="20" />
</form>
</body>
</html>
效果如下:
