博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2012-02-06 09:20  webabcd  阅读(5446)  评论(0编辑  收藏

[索引页]
[源码下载] 


千呼万唤 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
[源码下载]