千呼萬喚 HTML 5 (6) - 表單元素之 input 元素
作者：webabcd
介紹
HTML 5: 表單元素之 input 元素
- 表單元素之 input 元素 - text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week
- input 元素的通用屬性 - autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step
示例
1、text - 文本框
element/form/input/text.html
<!doctype html>
<html>
<head>
<title>text</title>
</head>
<body>
<!--
text - 文本框
autocomplete - 是否啟用自動完成功能，“on”或“off”
placeholder - 提示文本（Opera 支持此標准）
-->
<input type="text" autocomplete="on" placeholder="請輸入。。。" />
</body>
</html>
2、password - 密碼框
element/form/input/password.html
<!doctype html>
<html>
<head>
<title>password</title>
</head>
<body>
<!--
password - 密碼框
-->
<input type="password" value="111111" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
3、url - url 框
element/form/input/url.html
<!doctype html>
<html>
<head>
<title>url</title>
</head>
<body>
<!--
url - url 框，文本框形式
-->
<input type="url" value="http://www.cnblogs.com/" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
4、telephone - 電話框
element/form/input/telephone.html
<!doctype html>
<html>
<head>
<title>telephone</title>
</head>
<body>
<!--
telephone - 電話框，文本框形式
-->
<input type="telephone" value="110" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
5、email - 電子郵件框
element/form/input/email.html
<!doctype html>
<html>
<head>
<title>email</title>
</head>
<body>
<!--
email - 電子郵件框，文本框形式
-->
<input type="email" value="www@abc.com" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
6、search - 搜索框
element/form/input/search.html
<!doctype html>
<html>
<head>
<title>search</title>
</head>
<body>
<!--
search - 搜索框，文本框形式
-->
<input type="search" value="我是 search，是一個有特殊語義的 text" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
7、file - 用於上傳文件
element/form/input/file.html
<!doctype html>
<html>
<head>
<title>file</title>
</head>
<body>
<!--
file - 用於上傳文件
-->
<input type="file" />
</body>
</html>
8、radio - 單選框
element/form/input/radio.html
<!doctype html>
<html>
<head>
<title>radio</title>
</head>
<body>
<!--
radio - 單選框
checked - 是否是選中狀態
name - 相同的是同一組
-->
<input id="rad" type="radio" checked name="rad" />
<label for="rad">radio button title</label>
<input id="rad2" type="radio" name="rad" />
<label for="rad2">radio button title</label>
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
9、checkbox - 復選框
element/form/input/checkbox.html
<!doctype html>
<html>
<head>
<title>checkbox</title>
</head>
<body>
<!--
checkbox - 復選框
checked - 是否是選中狀態
-->
<input id="chk" type="checkbox" checked />
<label for="chk">checkbox title</label>
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].checked);
</script>
</body>
</html>
10、button - 一般按鈕
element/form/input/button.html
<!doctype html>
<html>
<head>
<title>button</title>
</head>
<body>
<!--
button - 一般按鈕
-->
<input type="button" value="button" />
</body>
</html>
11、submit - 提交按鈕
element/form/input/submit.html
<!doctype html>
<html>
<head>
<title>submit</title>
</head>
<body>
<!--
submit - 提交按鈕，用於提交 form 內元素
-->
<form action="#">
<input type="text" />
<input type="submit" value="submit button" />
</form>
</body>
</html>
12、reset - 復位按鈕
element/form/input/reset.html
<!doctype html>
<html>
<head>
<title>reset</title>
</head>
<body>
<!--
reset - 復位按鈕，用於復位 form 內元素
-->
<form action="#">
<input type="text" />
<input type="reset" value="reset" />
</form>
</body>
</html>
13、number - 數字輸入框
element/form/input/number.html
<!doctype html>
<html>
<head>
<title>number</title>
</head>
<body>
<!--
number - 數字輸入框（Opera 支持此標准）
value - 數字的值
min - 數字的最小值
max - 數字的最大值
step - 上下箭頭增減數字的時候，指定其步長
-->
<input type="number" value="10" min="10" max="100" step="10" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
14、range - 滑動條
element/form/input/range.html
<!doctype html>
<html>
<head>
<title>range</title>
</head>
<body>
<!--
range - 滑動條（Opera 支持此標准）
value - 數字值
min - 數字的最小值
max - 數字的最大值
step - 步長
-->
<input type="range" value="50" min="0" max="100" step="10" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
15、image - 顯示圖片
element/form/input/image.html
<!doctype html>
<html>
<head>
<title>image</title>
</head>
<body>
<!--
image - 顯示圖片
src - 圖片地址
-->
<input type="image" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
</body>
</html>
16、hidden - 隱藏元素，不會顯示
element/form/input/hidden.html
<!doctype html>
<html>
<head>
<title>hidden</title>
</head>
<body>
<!--
hidden - 隱藏元素，不會顯示
-->
<input type="hidden" value="我是 hidden" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
17、color - 顏色選擇器
element/form/input/color.html
<!doctype html>
<html>
<head>
<title>color</title>
</head>
<body>
<!--
color - 顏色選擇器（目前僅 Opera 支持此標准）
value - 選中的顏色值
-->
<input type="color" value="#FF0000" />
<script type="text/javascript">
alert(document.getElementsByTagName("input")[0].value);
</script>
</body>
</html>
18、datetime - 日期時間輸入/選擇框（UTC）, datetime-loca - 日期時間輸入/選擇框（本地時區）, date - 日期輸入/選擇框, time - 時間輸入/選擇, month - 月份輸入/選擇框, week - 星期輸入/選擇框
element/form/input/datetime_datetime-local_date_time_month_week.html.html
<!doctype html>
<html>
<head>
<title>datetime datetime-local date time month week</title>
</head>
<body>
<!--
目前僅 Opera 支持此標准
datetime - 日期時間輸入/選擇框（UTC）
datetime-loca - 日期時間輸入/選擇框（本地時區）
date - 日期輸入/選擇框
time - 時間輸入/選擇框
month - 月份輸入/選擇框
week - 星期輸入/選擇框
-->
<input type="datetime" />
<br />
<input type="datetime-local" />
<br />
<input type="date" />
<br />
<input type="time"" />
<br />
<input type="month" />
<br />
<input type="week" />
</body>
</html>
19、input 元素的通用屬性
element/form/input/_attributes.html
<!doctype html>
<html>
<head>
<title>input 元素的通用屬性: autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step</title>
</head>
<body>
<!--請用 opera 測試-->
<form action="#">
<!--
autocomplete - 是否啟用自動完成功能（on 或 off）
-->
<input type="text" autocomplete="on" />
<br />
<!--
placeholder - 用於定義提示文本
-->
<input type="text" autocomplete="on" placeholder="請輸入。。。" />
<br />
<!--
pattern - 用指定的正則表達式對 input 的值做驗證
-->
<input pattern="[0-9]" value="6" />
<br />
<!--
dirname - 用於將文本排列方向以參數的形式發給服務端
示例：下面的 input 在 submit 后，會自動增加參數 &textdir=ltr
-->
<input type="text" name="textName" dirname="textdir" />
<br />
<!--
size - 指定 input 的顯示寬度（單位：字符數）
-->
<input type="text" value="webabcd" size="10" />
<br />
<!--
maxlength - 指定可輸入的最大字符長度
-->
<input type="text" maxlength="10" />
<br />
<!--
readonly - 指定 input 是否是只讀模式
-->
<input type="text" value="webabcd" readonly />
<br />
<!--
required - 指定是否為必填元素
-->
<input type="text" required />
<br />
<!--
list - 指定建議數據源，建議數據源為一個 datalist 元素。所謂建議數據源可以理解為：系統推測的用戶可能輸入的內容列表，以方便用戶輸入，但並不會限制用戶的輸入
-->
<input type="email" list="contacts" />
<datalist id="contacts">
<option value="aabb@aa.com" />
<option value="ccdd@cc.com" />
<option value="eeff@ee.com" />
</datalist>
<br />
<!--
multiple - 是否可多選
如下例：可以在一個 input 中選擇多個 email
-->
<input type="email" list="contacts2" multiple />
<datalist id="contacts2">
<option value="aabb@aa.com" />
<option value="ccdd@cc.com" />
<option value="eeff@ee.com" />
</datalist>
<br />
<!--
以下屬性適用於 type="range", type="number" 等
min - 數字的最小值
max - 數字的最大值
step - 步長
-->
<input type="range" value="50" min="0" max="100" step="10" />
<br />
<input type="submit" value="submit" />
</form>
</body>
</html>
OK
[源碼下載]