全面剖析 标签 ------ 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 中的新属性

属性

描述

accept

mime_type

规定通过文件上传来提交的文件的类型。 (只针对type="file")

align

left

Right

top

middle

bottom

HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type="image")

alt

text

定义图像输入的替代文本。 (只针对type="image")

autocomplete    New

on

off

规定输入字段是否应该启用自动完成功能。

autofocus     New

autofocus

规定输入字段在页面加载是否获得焦点。

checked

checked

规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

disabled

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

规定输入字段的最大值。

maxlength

number

规定输入字段中的字符最大长度。

min    New

number

date

规定输入字段的最小值。

multiple   New

multiple

规定允许用户输入多个值到 input元素。

name

Filed_name

规定 input 元素的名称。

pattern   New

Regexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字

placeholder   New

text

规定帮助用户填写输入字段的提示信息 。

readonly

readonly

规定输入字段是只读的。

required   New

required

规定输入字段的值为必需。

size

number

规定输入字段的宽度。

src

URL

规定显示为提交按钮的图像的 URL。

(只针对 type="image")

step    New

Number_of_char

规定输入字的合法数字间隔。

type

见后详解

规定input元素的类型。

value

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博客