html5中input的type类型有哪些(总结)

一、总结

一句话总结:时间、颜色、(邮件、电话、url)、(数字、数字范围)、搜索search

二、html5中input的type类型

描述
button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段(带有 calendar 控件)
datetime 定义日期字段(带有 calendar 和 time 控件)
datetime-local 定义日期字段(带有 calendar 和 time 控件)
month 定义日期字段的月(带有 calendar 控件)
week 定义日期字段的周(带有 calendar 控件)
time 定义日期字段的时、分、秒(带有 time 控件)
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 "浏览..." 按钮,供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

三、HTML5 input类型总结

1、文字总结

一、文本类

  Text,文本

  Url,网络地址

  Password,密码

  Email,邮箱地址

二、操作类

  Checkbox ,复选框

  Radio,单选框

  File,上传文件

  Number,数值

  Range,百分百滑动条

三、功能类

  Button,按钮

  Image,图片提交按钮

  Submit,文字提交按钮

  Reset,重置表单

四、Date类

  Date,年月日控件

  Month,年月控件

  Week,年周控件

  Time,时间控件

  Datetime,年月日+时间控件

  Datetime-local,本地年月日+时间控件

五、特殊类

  Hidden,隐藏信息

扩展:

1.文本类属性:placeholder。这是一个占位符,可以作为提示信息,而且无法被用户选中。

2.Url和e-mail,在H5中,会在提交表单的时候检测其格式是否书写正确。

3.操作类。一般input标签会结合label标签使用,label一般有两种书写方法:

1.非跨度:<label><input></input></label>

2.跨度:<label for="input_id"></label>
    <input id="input_id"></input>

  如果网页结构中,input和label是相邻的关系,可以直接使用非跨度的书 写方法,以减少代码量。

4.file。在实际应用中,网页表单中需要上传的文件一般不止一个,这时候就要用到multiple属性,它是一个布尔值属性,在添加这个属性后,就可以上传多个属性。另外,上传的文件可以被规定,使用accept属性。这个一个数组属性,属性值是MIME规定的文件类型。

5.Button。Button类型只能在value中定义按钮上显示的提示文字。Image类型只能在src中链接图片。

  而button标签则结合了button和image的属性,它是一个双标签,也就是说它可以在内部嵌套其他标签,让按钮的显示效果更多元化。

6.Date类。Date类型的input标签是H5中新增加的。它实际上是一个控件,可以很方便的选择和显示时间数据,但是目前支持该控件的浏览器并不多。其中IE是完全不支持的。

7.Hidden。这个属性的input标签无法显示,也无法被用户控制。它的作用可以用来标记一些隐藏的表单信息。

  例如:在一些网站中,对于用户的描述,有一个信息完整度的提示。

  用户在注册的时候,必填项有5个,可填项有5个。注册的表单可以用hidden来记录可填项中有多少个是有数据的。

  假如,一个用户把所有的可填项全部填写。那么他的信息完整度就是100%。

  另一个用户的可填项一个也没有填写,他的信息完整度就是50%。

  而这个数值可以根据hidden中记录的数值来进行计算。

2、代码

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
<style>
form {
width: 670px;
margin: 0 auto;
} td {
background-color: #ffffff;
} td, input {
font-size: 20px;
} th {
font-size: 26px;
background-color: #22ccff;
letter-spacing: 2px;
} #sub {
float: right;
margin-left: 10px;
position: relative;
top: 50px;
left: 0px;
-webkit-transition: all 0.5s ease-in-out 0.0s;
-moz-transition: all 0.5s ease-in-out 0.0s;
-ms-transition: all 0.5s ease-in-out 0.0s;
-o-transition: all 0.5s ease-in-out 0.0s;
transition: all 0.5s ease-in-out 0.0s;
}
</style>
</head>
<body>
<form target="_blank" action="URL">
<!-- 额外的提交按钮 -->
<input type="submit" value="提交" id="sub"/>
<table bgcolor="#000" cellpadding="10" align="center">
<!-- 文本类 -->
<tr>
<th colspan="2">文本类</th>
</tr>
<tr>
<td>text</td>
<td><input type="text" value="attribute:value" pattern="[A-Z,a-z]{1}[a-z,0-9]{3,10}"/></td>
</tr>
<tr>
<td>url</td>
<td>
<input type="url" placeholder="attribute:placeholder" value="a:b"/>
</td>
</tr>
<tr>
<td>password</td>
<td>
<input type="password" maxlength="8" placeholder="请输入密码" autofocus required/>
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="email" value="1@2.3"/>
</td>
</tr>
<tr>
<td>tel</td>
<td><input type="tel"></td>
</tr>
<tr>
<td>search</td>
<td><input type="search"/></td>
</tr>
<tr>
<td colspan="2">
<p>“placeholder”:占位符;</p>
<p>“autofocus”:焦点获取;</p>
<p>“required”;表单必填项;</p>
<p>“pattern”;输入规范,该值为一个正则表达式;</p>
<p>在H5中,URL和email类型在提交表单时,会检测是否符合格式。</p>
</td>
</tr>
<!-- 文本类 end --> <!-- 操作类 -->
<tr>
<th colspan="2">操作类</th>
</tr> <tr>
<td>checkbox</td>
<td>
<label><input type="checkbox" name="ch_box"/>box_1</label>
<label><input type="checkbox" name="ch_box"/>box_2</label>
<label><input type="checkbox" name="ch_box"/>box_3</label>
<input type="checkbox" id="ch_box4"/>
<label for="ch_box4">box_4</label>
</td>
</tr>
<tr>
<td>radio</td>
<td>
<label><input type="radio" name="radio"/>ra_1</label>
<label><input type="radio" name="radio"/>ra_2</label>
<label><input type="radio" name="radio"/>ra_3</label>
<label><input type="radio" name="radio"/>ra_4</label>
</td>
</tr>
<tr>
<td colspan="2">
label:<br/>
非跨度:&lt;label&gt;&lt;input&gt;&lt;/input&gt;&lt;/label&gt;<br/>
跨&emsp;度:&lt;label for="input_id"&gt;&lt;/label&gt;<br/>
&emsp;&emsp;&emsp;&emsp;&lt;input id="input_id"&gt;&lt;/input&gt;
</td>
</tr>
<tr>
<td>file</td>
<td>
<input type="file" multiple="multiple"/>
<p>multiple="multiple":允许添加多个值;</p>
<p>accept="MIME_type";指定上传文件的类型;</p>
<p>如:accept="image/jpg,image/gif"</p>
<p><a href="http://www.w3school.com.cn/media/media_mimeref.asp" target="_blank">MIME_type 附录表</a></p>
</td>
</tr>
<tr>
<td>number</td>
<td><input type="number" max="100" min="90" step="2"/>
<p>只允许输入数字;"e":自然常数;</p></td>
</tr>
<tr>
<td>range</td>
<td>
<input type="range" max="100" min="0" step="20"/>
<p>“value”,默认为50,范围0~100;</p>
</td>
</tr>
<tr>
<td colspan="2">max:最多值;min:最小值;step:步长;</td>
</tr>
<tr>
<td>color</td>
<td><input type="color" value="#00ff00"/> 数值型:#ffffff;</td>
</tr>
<!-- 操作类 end --> <!-- 表单功能 -->
<tr>
<th colspan="2">功能类</th>
</tr> <tr>
<td>button</td>
<td>
<input type="button" value="button"/>
<button>This is a button.<img src="btn_03.png" width="52"/></button>
<p>“button”允许嵌入其他元素;</p>
</td>
</tr>
<tr>
<td>image</td>
<td><input type="image" src="btn_03.png" width="32"
height="26"/><span>&emsp;H5中使用“width”“height”修改图片大小;</span></td>
</tr>
<tr>
<td>submit</td>
<td>
<input type="submit"/>
<p>get:在url地址上传送参数到服务器;<br/>post:在后台传送参数到服务器; </p>
</td>
</tr>
<tr>
<td>reset</td>
<td><input type="reset"/></td>
</tr>
<!-- 表单功能 end --> <!-- 日期类型 -->
<tr>
<th colspan="2">Date 类</th>
</tr> <tr>
<td>date</td>
<td><input type="date"/></td>
</tr>
<tr>
<td>month</td>
<td><input type="month"/></td>
</tr>
<tr>
<td>week</td>
<td><input type="week"/></td>
</tr>
<tr>
<td>time</td>
<td><input type="time"/></td>
</tr>
<tr>
<td>datetime</td>
<td><input type="datetime" value="2016-08-02T08:32Z"/></td>
</tr>
<tr>
<td>datetime-local</td>
<td><input type="datetime-local"/></td>
</tr>
<!-- 日期类型 end -->
<!-- 特殊类 -->
<tr>
<th colspan="2">特殊类</th>
</tr> <tr>
<td>hidden</td>
<td><input type="hidden"/>
<p>可用于记录一些表单状态信息<br/>(例如使用value的值标记可选项为非空值的个数),<br/>或者其他自定义信息;</p></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
function sub_move() {
var s = document.getElementById("sub");
window.onscroll = function _scroll() {
var top = document.documentElement.scrollTop || document.body.scrollTop;
s.style.top = top + 50 + "px";
}
}
</script>
<script type="text/javascript">
window.onload = function main() {
sub_move();
}
</script>
</html> input 类型 demo

四、input相关总结

一、使input文本框不可编辑的三种方法

1.disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。
示例:<input type="text" disabled="disabled" />

2.readonly 属性规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。
readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
示例:<input type="text" readonly="readonly">

3.readonly unselectable="on" 该属性跟disable类似,input 元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。
示例:<input type="text"  readonly  unselectable="on" >
(还是菜鸟一枚,写的不对的地方欢迎指正!)

二、input调用移动端的相册等

<input type="file" accept="image/*" capture="camera">                 //支持相册

<input type="file" accept="video/*" capture="camcorder">             //支持视频

<input type="file" accept="audio/*" capture="microphone">           //支持录音

<input type="file" accept="image/*" multiple>                          //直接支持多选

建议在电脑上开发测试的时候不要加上accept的这个属性,他会明显使找并打开文件的过程变慢,效率很低

html5中input的type类型有哪些(总结)的更多相关文章

  1. html5中input新增type值的使用

    二狗在最近的项目以html5和webapp为主,并接触到了input新增type值的使用,下面就把这些玩意一一以实例列举出来 一:type = date:定义日期:年-月-日 input type=& ...

  2. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  3. 笔记:HTML5中input元素新增的type值

    在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...

  4. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  5. HTML5中input标签有用的新属性

    HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...

  6. HTML5中input新增类型+表单新增属性+其他标签属性

    @ (猴头) Input 新增属性 email  邮箱(只在手机端有效) url  网址(只在iphone手机有效) tel  手机号(只在手机端有效) number  数字(右侧有上下按钮,只能输入 ...

  7. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

  8. 【HTML5】input元素type属性值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. input的type类型

    对部分生僻的input属性值解释: type="reset": 可以一键清空form表单里面所有的数据 <form> <input type="text ...

随机推荐

  1. hiho 1182 : 欧拉路&#183;三

    1182 : 欧拉路·三 这时题目中给的提示: 小Ho:是这种.每次转动一个区域不是相当于原来数字去掉最左边一位,并在最后加上1或者0么. 于是我考虑对于"XYYY",它转动之后能 ...

  2. BPX-tree

    写的匆忙 估计有BUG 修改后  会去掉这个 说明 /** * @author shuly * @date 2017/6/5. */ // hint 一日为叶,终身为叶, 最后还是要转换成 <链 ...

  3. 阿里一道Java并发面试题 (详细分析篇)

    说明 前天分享了一篇关于阿里的"Java常见疑惑和陷阱"的文章,有人说这个很早就有了,可能我才注意到,看完之后发现内容非常不错,有几个我也是需要停顿下想想,如果后续有机会我录制一个 ...

  4. Docker---(4)Docker 部署spring web项目

    原文:Docker---(4)Docker 部署spring web项目 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.n ...

  5. 使用 LaTeX 绘制 PGM(Probabilistic Graphical Models)中的贝叶斯网络(bayesian networks)

    Software for drawing bayesian networks (graphical models) 这里需要调用 latex 中的绘图库:TikZ and PGF. 注意,下述 tex ...

  6. Android 最简洁的获取联系人头像的代码

    ContentResolver cr = view.getContext().getContentResolver(); Uri uri = ContentUris.withAppendedId(Co ...

  7. WinXP局域网共享设置

    关闭局域网共享 1.不允许SAM帐户和共享的匿名枚举(系统默认是允许的). 组策略-计算机配置-Windows 设置-安全设置-本地安全策略-安全选项-网络访问:不允许SAM帐户和共享的匿名枚举. 设 ...

  8. css结构设计思想

    本文摘自博客园-予沁安的文章:结构化CSS设计思维,作为学习笔记记录一下 1.LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的 ...

  9. 管理aix的密码策略

    aix 中 /etc/security/user 存放用户的概要 常用参数参数如下 1.account_locked      defines whether the account is locke ...

  10. SorceTree 与 Bitbucket连接

    选择bitbucket,由于bitbucket免费的帐号最多能够8个人一起协同开发.我们项目组人数少于8个,私有仓库也不限制. 经过半个多月的应用,大家感觉也还不错,对个人而言.在家也能訪问代码,对公 ...