HTML5文档中的input元素的type属性值介绍

HTML5文档中的input元素的type属性值介绍

input 元素是表单中最常见的元素,网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。以下是它的常用属性:

属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
hidden隐藏域
file文件域
emailemail地址输入域
urlURL地址输入域
number数值输入域
range一定范围内数字值的输入域
Date pickers日期和时间的输入类型
search搜索域
color颜色输入类型
属性属性值描述
name用户自定义控件的名称
value用户自定义input控件中的默认文本值
size正整数input控件在页面中显示的宽度
readonlyreadonly该控件内容为只读(不能编辑修改)
disableddisabled第一次加载页面时禁用该控件(显示为灰色)
checkedchecked定义选择控件默认被选择的项
maxlength正整数控件允许输入的最多字符数
autocompleteon/off设定是否自动完成表单字段内容
autofocusautofocus指定页面加载后是否自动获取焦点
formform元素的id设定字段隶属于哪一个或多个表单
listdatalist元素的id指定字段的候选输入值列表
multiplemultiple指定输入框是否可以选择多个值
min、max、step数值规定输入框所允许的最小值、最大值、间隔
pattern字符串验证输入的内容是否与定义的正则表达式匹配
placeholder字符串为input输入框提供一种提示
requiredrequired规定输入框填写内容不能为空

我们这里只介绍一些常用的属性。在HTML5中,<input />元素拥有多个type属性值,用于定义不同的控件。

● 单行文本输入框,用来输入简短的信息,例如用户名、账号、证件号码等

<input type="text" value="鳄鱼君Ba" maxlength="5" />

● 密码输入框,用来输入密码,其内容将以圆点的形式显示

<input type="password" size="40" />

● 单选按钮,用于选择性别,是否操作等

<input type="radio" name="gender" checked="checked" />女

● 复选框,用于多项选择,例如兴趣、爱好等,可对其应用checked属性,指定默认选中项

<input type="checkbox" />睡觉

● 普通按钮,常常配合JavaScript脚本使用

<input type="button" value="普通按钮" />

● 提交按钮,是表单中的核心控件,用户完成信息的输入后,一般都需要单击提交按钮才能完成表单数据提交

<input type="submit" value="提交按钮" />

● 重置按钮,当用户输入的信息有误时,可单机重置按钮取消已输入的所有表单信息。

<input type="reset" value="重置按钮" />

● 图像形式,用图像代替默认的按钮,外观更加美观。

<input type="image" src="./login.png" />

● 隐藏域,用户是不可见的,常用于后台的程序。

<input type="hidden" />

● 文件上传域,用于上传文件,并提交到服务器。

<input type="file" />

综合练习,自行查看效果:

<form action="#" method="post">
    用户名:     <!-- text单行文本输入框 -->
    <input type="text" name="username" >
    密码:       <!-- password密码输入框 -->
    <input type="password" name="password"> 
    性别:       <!-- radio单选框 -->
    <input type="radio" name="gender" checked="checked">女
    <input type="radio" name="gender" >男<br>
    兴趣:
    <input type="checkbox" >女人
    <input type="checkbox" >女人
    <input type="checkbox" >女人<br>
    上传个人头像:   <!-- 文件域 -->
    <input type="file" ><br>
    <input type="submit" value="提交按钮">
    <input type="botton" value="普通按钮">
    <input type="reset" value="重置按钮">
    <input type="image" src="1.png">
    <input type="hidden">
</form>

其他type属性值:

● email类型,用于验证输入框的内容是否符合Email邮件地址格式;如果不符合则提示相应的错误信息。

请输入你的邮箱:<input type="email" name="formemail"/>

● url类型,用于输入URL地址的文本框。

请输入你的个人网址:<input type="url" name="user_url"/>

● tel类型,用于提供输入电话号码的文本框,由于电话格式比较多,很难实现一个同用的格式,所以常常喝pattern属性配合使用。

请输入你的电话:<input type="tel" name="telphone" patern="^d{11}$" />

● search类型,用于输入搜索关键词的文本框,它能自动记录一些字符。在用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。

请输入搜索关键词:<input type="search" name="searchinfo" />

● color类型,用于提供设置颜色的文本框,用于实现一个RGB颜色输入,其基本格式为#RRGGBB,默认为#000000,通过value属性值可以更改默认颜色。

请选择更换颜色:<input type="color" name="choice_color" />

综合以上代码,参考:

<form action="#" method="post">
    请输入你的邮箱:<input type="email" name="formemail"/><br>
    请输入你的个人网址:<input type="url" name="user_url"/><br>
    请输入你的电话:<input type="tel" name="telphone" patern="^d{11}$" /><br>
    请输入搜索关键词:<input type="search" name="searchinfo" /><br>
    请选择更换颜色:<input type="color" name="choice_color" /><br>
    <input type="submit" value="普通提交">
</form>

● number类型,用于提供输入数值的文本框,在提交表单时,会自动检查该输入框中的内容是否为数字。如果输入的内容不是数组或者数字不在限定范围内,则会出现错误提示。

请输入一个数字:<input type="number" name="number" value="1" min="1" max="20" step="4" />

● range类型,用于提供一定范围内数值的输入范围,在网页中显示为滑动条。它的常用属性与number一样。

请输入一个数字:<input type="range" name="number" value="1" min="1" max="20" step="4" />

● Date pickers类型,指定日期类型,HTML5中提供了多个可供选取日期和时间的输入类型,用于验证输入的日期。

<input type="date"  />

Date pickers类型-时间和日期类型:

时间和日期格式说明
date选取日、月、年
month选取月、年
week选取周和年
time选取时间(小时和分钟)
datetime选取时间、日、月、年(UTC时间)
datetime-local选取时间、日、月、年(本地时间)
分享到 :

发表评论

登录... 后才能评论