千呼万唤 HTML 5 (6) - 表单元素之 input 元素

介绍
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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	`<!doctype html>` `<html>` `<head>` `<title>file</title>` `</head>` `<body>` `<!--` `file - 用于上传文件` `-->` `<input` `type="file"` `/>` `</body>` `</html>`

8、radio - 单选框
element/form/input/radio.html

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27	`<!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

柠檬铺