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

鳄鱼君Ba

发表文章数:514

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML5教程 » HTML5文档中的input元素的type属性值介绍

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

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

我们这里只介绍一些常用的属性。在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 选取时间、日、月、年(本地时间)

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《HTML5文档中的input元素的type属性值介绍》 发布于2020-05-29

分享到:
赞(3) 赏杯咖啡

评论 抢沙发

1 + 3 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册