介绍
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>texttitle>
head>
<body>
<input type&＃61;"text" autocomplete&＃61;"on" placeholder&＃61;"请输入。。。" />
body>
html>
2、password - 密码框
element/form/input/password.html
doctype html>
<html>
<head>
<title>passwordtitle>
head>
<body>
<input type&＃61;"password" value&＃61;"111111" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
3、url - url 框
element/form/input/url.html
doctype html>
<html>
<head>
<title>urltitle>
head>
<body>
<input type&＃61;"url" value&＃61;"http://www.cnblogs.com/" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
4、telephone - 电话框
element/form/input/telephone.html
doctype html>
<html>
<head>
<title>telephonetitle>
head>
<body>
<input type&＃61;"telephone" value&＃61;"110" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
5、email - 电子邮件框
element/form/input/email.html
doctype html>
<html>
<head>
<title>emailtitle>
head>
<body>
<input type&＃61;"email" value&＃61;"www&＃64;abc.com" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
6、search - 搜索框
element/form/input/search.html
doctype html>
<html>
<head>
<title>searchtitle>
head>
<body>
<input type&＃61;"search" value&＃61;"我是 search&＃xff0c;是一个有特殊语义的 text" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
7、file - 用于上传文件
element/form/input/file.html
doctype html>
<html>
<head>
<title>filetitle>
head>
<body>
<input type&＃61;"file" />
body>
html>
8、radio - 单选框
element/form/input/radio.html
doctype html>
<html>
<head>
<title>radiotitle>
head>
<body>
<input id&＃61;"rad" type&＃61;"radio" checked name&＃61;"rad" />
<label for&＃61;"rad">radio button titlelabel>
<input id&＃61;"rad2" type&＃61;"radio" name&＃61;"rad" />
<label for&＃61;"rad2">radio button titlelabel>
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
9、checkbox - 复选框
element/form/input/checkbox.html
doctype html>
<html>
<head>
<title>checkboxtitle>
head>
<body>
<input id&＃61;"chk" type&＃61;"checkbox" checked />
<label for&＃61;"chk">checkbox titlelabel>
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].checked);
script>
body>
html>
10、button - 一般按钮
element/form/input/button.html
doctype html>
<html>
<head>
<title>buttontitle>
head>
<body>
<input type&＃61;"button" value&＃61;"button" />
body>
html>
11、submit - 提交按钮
element/form/input/submit.html
doctype html>
<html>
<head>
<title>submittitle>
head>
<body>
<form action&＃61;"#">
<input type&＃61;"text" />
<input type&＃61;"submit" value&＃61;"submit button" />
form>
body>
html>
12、reset - 复位按钮
element/form/input/reset.html
doctype html>
<html>
<head>
<title>resettitle>
head>
<body>
<form action&＃61;"#">
<input type&＃61;"text" />
<input type&＃61;"reset" value&＃61;"reset" />
form>
body>
html>
13、number - 数字输入框
element/form/input/number.html
doctype html>
<html>
<head>
<title>numbertitle>
head>
<body>
<input type&＃61;"number" value&＃61;"10" min&＃61;"10" max&＃61;"100" step&＃61;"10" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
14、range - 滑动条
element/form/input/range.html
doctype html>
<html>
<head>
<title>rangetitle>
head>
<body>
<input type&＃61;"range" value&＃61;"50" min&＃61;"0" max&＃61;"100" step&＃61;"10" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
15、image - 显示图片
element/form/input/image.html
doctype html>
<html>
<head>
<title>imagetitle>
head>
<body>
<input type&＃61;"image" src&＃61;"http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
body>
html>
16、hidden - 隐藏元素&＃xff0c;不会显示
element/form/input/hidden.html
doctype html>
<html>
<head>
<title>hiddentitle>
head>
<body>
<input type&＃61;"hidden" value&＃61;"我是 hidden" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
17、color - 颜色选择器
element/form/input/color.html
doctype html>
<html>
<head>
<title>colortitle>
head>
<body>
<input type&＃61;"color" value&＃61;"#FF0000" />
<script type&＃61;"text/Javascript">
alert(document.getElementsByTagName("input")[0].value);
script>
body>
html>
18、datetime - 日期时间输入/选择框&＃xff08;UTC&＃xff09;, datetime-loca - 日期时间输入/选择框&＃xff08;本地时区&＃xff09;, 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 weektitle>
head>
<body>
<input type&＃61;"datetime" />
<br />
<input type&＃61;"datetime-local" />
<br />
<input type&＃61;"date" />
<br />
<input type&＃61;"time"" />
<br />
<input type&＃61;"month" />
<br />
<input type&＃61;"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, steptitle>
head>
<body>
<form action&＃61;"#">
<input type&＃61;"text" autocomplete&＃61;"on" />
<br />
<input type&＃61;"text" autocomplete&＃61;"on" placeholder&＃61;"请输入。。。" />
<br />
<input pattern&＃61;"[0-9]" value&＃61;"6" />
<br />
<input type&＃61;"text" name&＃61;"textName" dirname&＃61;"textdir" />
<br />
<input type&＃61;"text" value&＃61;"webabcd" size&＃61;"10" />
<br />
<input type&＃61;"text" maxlength&＃61;"10" />
<br />
<input type&＃61;"text" value&＃61;"webabcd" readonly />
<br />
<input type&＃61;"text" required />
<br />
<input type&＃61;"email" list&＃61;"contacts" />
<datalist id&＃61;"contacts">
<option value&＃61;"aabb&＃64;aa.com" />
<option value&＃61;"ccdd&＃64;cc.com" />
<option value&＃61;"eeff&＃64;ee.com" />
datalist>
<br />
<input type&＃61;"email" list&＃61;"contacts2" multiple />
<datalist id&＃61;"contacts2">
<option value&＃61;"aabb&＃64;aa.com" />
<option value&＃61;"ccdd&＃64;cc.com" />
<option value&＃61;"eeff&＃64;ee.com" />
datalist>
<br />
<input type&＃61;"range" value&＃61;"50" min&＃61;"0" max&＃61;"100" step&＃61;"10" />
<br />
<input type&＃61;"submit" value&＃61;"submit" />
form>
body>
html>
京公网安备 11010802041100号