全面剖析 <input> 标签 ------ HTML\HTML5
<input>标签因其形式多样、功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一。下面就来对<input>做一个全面的剖析:
标签定义:
<input> 标签用于搜集用户信息。
标签使用:
<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。(根据不同的 type 属性值,输入字段拥有很多种形式。)
标签说明:
1)HTML 4.01 与 HTML5之间的差异:
在 HTML 4.01 中, "align" 数据已经不再使用。HTML5 中不支持该属性。
在 HTML5中, <input> 添加了几个属性,并且添加了对应的值。
2)HTML 与 XHTML之间的差异:
在 HTML 中,<input> 标签没有结束标签。
在 XHTML 中,<input> 标签必须被正确地关闭。
标签属性:
new :HTML5 中的新属性
属性 |
值 |
描述 |
mime_type |
规定通过文件上传来提交的文件的类型。 (只针对type="file") |
|
left Right top middle bottom |
HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type="image") |
|
text |
定义图像输入的替代文本。 (只针对type="image") |
|
autocomplete New |
on off |
规定输入字段是否应该启用自动完成功能。 |
autofocus New |
autofocus |
规定输入字段在页面加载是否获得焦点。 |
checked |
规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") |
|
disabled |
规定应该禁用的 <input> 元素。 |
|
form New |
formname |
规定 <input> 元素所属的一个或多个表单。 |
formaction New |
URL |
覆盖表单的 action 属性。(只针对 type="submit" 和 type="image") |
formenctype New |
application/x-www-form-urlencoded multipart/form-data text/plain |
覆盖表单的 enctype 属性。 (只适合 type="submit" 和 type="image")。 |
formmethod New |
get post |
覆盖表单的 method属性。 (只适合 type="submit" 和 type="image") |
formnovalidate New |
formnovalidate |
覆盖表单的 novalidate 属性。 如果使用该属性,则提交表单时不进行验证。 |
formtarget New |
_blank _self _parent _top framename |
覆盖表单的 target 属性。 (只适合 type="submit" 和 type="image") |
height New |
pixels |
定义 input 字段的高度。 (适用于 type="image") |
list New |
datalist_id |
引用包含输入字段的预定义选项的 datalist 。 |
max New |
number date |
规定输入字段的最大值。 |
number |
规定输入字段中的字符最大长度。 |
|
min New |
number date |
规定输入字段的最小值。 |
multiple New |
multiple |
规定允许用户输入多个值到 input元素。 |
Filed_name |
规定 input 元素的名称。 |
|
pattern New |
Regexp_pattern |
规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字 |
placeholder New |
text |
规定帮助用户填写输入字段的提示信息 。 |
readonly |
规定输入字段是只读的。 |
|
required New |
required |
规定输入字段的值为必需。 |
number |
规定输入字段的宽度。 |
|
URL |
规定显示为提交按钮的图像的 URL。 (只针对 type="image") |
|
step New |
Number_of_char |
规定输入字的合法数字间隔。 |
见后详解 |
规定input元素的类型。 |
|
value |
规定input元素的值。 |
|
width New |
pixels |
规定 input 字段的宽度。 (只针对type="image") |
标签类型 (type):
说明:所有主流浏览器都支持 type 属性,但是并非所有主流浏览器都支持所有不同的 input 类型。
text:默认。定义一个单行的文本字段。(默认宽度为20)
password:定义密码字段。(字符会被遮盖)
checkbox:复选框(checked属性:是否选中)
radio:单选框(name属性:指定多个单选框的在一个区域里进行单选操作)
button:定义普通按钮。常用于与JS一起启动脚本。(value属性:button按钮显示的文本)
reset:定义重置按钮(清除文本区域内容,重置所有表单值为默认值)
submit:定义提交按钮。
hide:定义隐藏输入字段。(存放仅用于自己使用的信息)
file:定义输入字段和 "浏览"按钮,供文件上传。
image:定义图像形式的提交按钮。
以下类型为 HTML5 新增 type 类型:
email:在提交表单时会自动验证email的格式是否正确,格式不正确浏览器是不允许提交的。opera浏览器中必须有name属性,否则不起作用。
<input type="email" name="email">
url:在提交表单时会自动验证url的格式。Opera中会自动在开始处添加http://.
<input type="url" />
number:可以限制输入的数字,若未输入则会抛出一个错误。(step为上一个数字与下一个数字的间隔)
<input type="number" max="12" min="0" step="1"/>
range:此类型将显示一个可拖动的滑块条,能够选择性的对限制范围内的数值进行设置。拖动时会反馈给value一个值.
<input type="range" min="1" max="10" />
search:此类型表示输入的将是一个搜索关键字。
<input type="search" />
color: 此类型表单可让选择颜色值,并反馈到value中.
<input type="color"/>
telephone:此类型可输入一个电话号码。
<input type="telephone" />
Date pickers (date, month, week, time, datetime, datetime-local):( 供选取日期和时间 )
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
注:“HTML5新增属性的样例显示以及具体兼容性情况”可参考
http://mrthink.net/demo/ihtml520110220.htm 出处:Mr.Think博客
全面剖析 <input> 标签 ------ HTML\HTML5的更多相关文章
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- HTML5<input>标签
在表单中最为核心的就是<input>标签,使用<input>标签可以在表单中定义文本输入框.单选按钮.复选框.重置按钮等,其基本语法格式如下: <input type=& ...
- input 标签实现带提示文字的输入框
方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- 【整合】input标签JS改变Value事件处理方法
某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改 ...
- Input标签使用整理
0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能. ...
- 表单相关标签之input标签
用于搜集用户信息. <input type="text" name="fname" /> 标签属性 type 规定 input 元素的类型.输入字段 ...
- input标签之外是否一定添加form标签
原文转载自:https://blog.csdn.net/lamanchas/article/details/78753031 input标签外是否添加form标签需要按情形区分:应用场景的区别:1.所 ...
- html 常用标签 a form input 标签 等等等
前端HTML HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk ...
随机推荐
- MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子
MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子: 前端: 我们以前在前端定义了两个控件: <div class="row"> < ...
- JS进阶之非阻塞
回调函数,阻塞和非阻塞对于初学者来说总是一些不好理解的东西,最好的办法就是通过实际写代码去体会.笔者今天就通过一个例子来简单解释一下JS的非阻塞,分享分享我的理解. 首先回调函数:这是一个异步过程,简 ...
- Oracle循环中的EXIT、RETURN、CONTINUE解密
有时候编写Oracle中用游标等信息去循环处理逻辑的时候,对EXIT.RETURN.CONTINUE很容易搞混淆,网上搜了资料也不是很清楚,所以本人自己写了一小段代码测试了这三种用法.案例代码如下: ...
- windows对象模型分类
- Java并发编程:Thread类的使用
Java并发编程:Thread类的使用 在前面2篇文章分别讲到了线程和进程的由来.以及如何在Java中怎么创建线程和进程.今天我们来学习一下Thread类,在学习Thread类之前,先介绍与线程相关知 ...
- php实现设计模式之 观察者模式
代码片段一: <?php /** * 观察者模式:定于对象间的一种一对多的依赖关系,当一个对象发生改变时,所有依赖它的对象都收到通知并自动更新. */ //例子:少林方丈的通讯录,当扫地僧的号码 ...
- 深入理解cookies
HTTP cookies,通常又称作"cookies",已经存在了很长时间,但是仍旧没有被予以充分的理解.首要的问题是存在了诸多误区,认为cookies是后门程序或病毒,或压根不知 ...
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- 多个精美的导航样式web2.0源码
效果体验:http://keleyi.com/keleyi/phtml/divcss/6.htm 兼容多浏览器,例如IE,Chrome,火狐 等. 完整代码,保存到htm文件打开也可以查看效果: &l ...
- iOS 多线程GCD简介
一.简介 1.1 GCD (Grand Central Dispatch )是Apple开发的一个多核编程的解决方法. Grand 含义是“伟大的.宏大的”,Central含义“中央的”,Dispat ...