HTML5权威指南笔记：13-定制input元素

来源：互联网发布：淘宝天猫内部优惠劵编辑：程序博客网时间：2024/05/16 15:05

1 用input 元素输入文字

type属性设置为text的input元素在浏览器中显示为一个单行文本框，这是未设置type属性情况下的默认形式。
text型input元素可用的额外属性

属性说明是否HTML5新增 dirname 指定元素内容文字方向的名称，参见1.5节是 list 指定为文本框提供建议值的datalist元素，其值为datalist元素的id值，详见1.3节是 maxlength 设定用户可以在文本框中输入的字符的最大数目，详见1.3节否 pattern 指定一个用于输入验证的正则表达式，详见第14章是 placeholder 指定关于所需数据类型的提示，详见1.2节是 readonly 用来将文本框设为只读以阻止用户编辑其内容，详见1.4节否 required 表明用户必须输人一个值，否则无法通过输入验证，详见第14章是 size 通过指定文本框中可见的字符数目设定其宽度，详见1.1节否 value 设置文本框的初始值，详见1.2节否

1.1 设定元素大小

maxlength属性设定了用户能够输入的字符的最大数目， size属性则设定了文本框能够显示的字符数目

<input size="10" maxlength="10" id="fave" name="fave"/>

1.2 设置初始值和占位式提示

可以用value属性设置一个默认值，还可以用placeholder属性设置一段提示文字

<input placeholder="Your name" id="name" name="name"/><input value="Apple" id="fave" name="fave"/>

1.3 使用数据列表

可以将input元素的list属性设置为一个datalist元素的id属性值，这样用户在文本框中输入数据时只消从后一元素提供的一批选项中进行选择就行了

datalist元素元素类型短语允许具有的父元素任何可以包含短语元素的元素局部属性无内容 option元素和短语内容标签用法开始标签和结束标签是否为HTML5新增是在HTML5中的变化无习惯样式无

提供给用户选择的值各用一个option元素指定

option元素元素类型无允许具有的父元素 datalist 、select 、optgroup 局部属性 disabled 、selected 、label和value 内容字符数据标签用法虚元素形式，或开始标签与结束标签一起使用是否为HTML5新增否在HTML5中的变化无习惯样式无

例子：

<!--使用datalist元素--><!DOCTYPE HTML><html>    <head>    </head>    <body>                <form method="post" action="http://titan:8080/form">                <label for="fave">                    <!--使用list选定datalist-->                    Fruit: <input list="fruitlist" id="fave" name="fave"/>                </label>            <button type="submit">Submit Vote</button>        </form>        <datalist id="fruitlist">            <!--其value属性值在该元素代表的选项被选中时就是input元素所用的数据值                显示的时候不会是value的值-->            <option value="Apples" label="Lovely Apples"/>            <option value="Oranges">Refreshing Oranges</option>            <option value="Cherries"/>        </datalist>    </body></html>

1.4 生成只读或被禁用的文本框

readonly和disabled属性都可以用来生成用户不能编辑的文本框，其结果的外观不同。
设置了disabled属性的input元素的数据不会提交到服务器，readonly属性会。

<input value="Adam" disabled id="name" name="name"/><input value="Boston" readonly id="city" name="city"/>

2 用input 元素输入密码

type属性值设置为password 的input元素用于输入密码
password型input 元素可用的额外属性

属性说明是否HTML5新增 maxlength 设定用户可以在密码框中输入的字符的最大数目，详见1.1节否 pattern 指定一个用于输入验证的正则表达式，详见第14章是 palceholder 指定关于所需数据类型的提示，详见1.2节是 readonly 将密码框设为只读以阻止用户编辑其中的内容，详见1.4节否 required 表明用户必须输入一个值，否则无法通过输入验证，详见第14章是 size 通过指定密码框中可见的字符数目设定其宽度，详见1.1节否 value 设置初始密码值否

例子：

<input type="password" placeholder="Min 6 characters"                        id="password" name="password"/>

3 用input 元素生成按钮

将input元素的type属性设置为submit 、reset和button会生成类似button元素

submit：生成用来提交表单的按钮
reset：生成用来重置表单的按钮
button：生成不执行任何操作的按钮

<input type="submit" value="Submit Vote"/><input type="reset" value="Reset Form"/><input type="button" value="My Button"!>

4 用input 元素为输入数据把关

用千输入受限数据的input元素的type属性值

属性说明是否HTML5新增 checkbox 将输入限制为在一个“是/否” 二态复选框中进行选择否 color 只能输入颜色信息是 date 只能输入日期是 datetime 只能输入带时区信息的世界时（包括日期和时间）是 datetime-local 只能输入不带时区信息的世界时（包括日期和时间）是 email 只能输入规范的电子邮箱地址是 month 只能输入年和月是 number 只能输入整数或浮点数是 radiobutton 将输入限制为在一组固定选项中进行选择否 range 只能输入指定范围内的数值是 tel 只能输入规范的电话号码是 time 只能输入时间信息是 week 只能输人年及星期信息是 url 只能输入完全限定的URL 是

4.1 用input元素获取数值

type属性设置为number的input元素生成的输入框只接受数值
number型input元素可用的额外属性

属性说明是否HTML5新增 list 指定为文本框提供建议值的datalist元素。其值为datalist元素的id值。datalist元素的介绍详见1.3节是 min 设定可接受的最小值（也是下调按钮（如果有的话）的下限）以便进行输入验证。输入验证的介绍详见第14章是 max 设定可接受的最大值（也是上调按钮（如果有的话）的上限）以便进行输人验证。输入验证的介绍详见第14章是 readonly 用来将文本框设置为只读以阻止用户编辑其内容。详见1.4节否 required 表明用户必须输入一个值，否则无法通过输入验证。详见第14章是 step 指定上下调节数值的步长是 value 指定元素的初始值否

例子：

 <!--min 、max 、step和value属性值可以是整数或小数--><input type="number" step="1" min="O" max="100"    value="1" id="price" name="price"/>

4.2 用input元素获取指定范围内的数值

使用range型input元素，能从事先规定的范围内选择一个数值，range型input元素支持的属性与number型相同

<input type="range" step="1" min="0" max="100"value="1" id="price" name="price"/>

4.3 用input 元素获取布尔型输入

checkbox型input元素会生成供用户选择是或否的复选框。
checkbox型input元素可用的额外属性

属性说明是否HTML5新增 checked 设置了该属性的复选框刚显示出来时或重置表单后呈勾选状态否 required 表示用户必须勾选该复选框，否则无法通过输入验证。详见第14章是 value 设定在复选框呈勾选状态时提交给服务器的数据值。默认为on 否

<input type="checkbox" id="veggie" name="veggie"/>

只有处于勾选状态的复选框的数据值会发送给服务器。

4.4 用input元素生成一组固定选项

radio型input元素可以用来生成一组单选按钮，供用户从一批固定的选项中作出选择
radio型input元素可用的额外属性同checkbox型一样

    <!--radio它们的name属性都设置为一样，这样一来，选择其中任何一个按钮都会取消对另外两个按钮的选择    value属性值，提交表单时选定按钮的这个值会被发送给服务器-->    <label for="apples">        <input type="radio" checked value="Apples" id="apples"               name="fave" />        Apples    </label>    <label for="oranges">        <input type="radio" value="Oranges" id="oranges" name="fave" />        Oranges    </label>    <label for="cherries">        <input type="radio" value="Cherries" id="cherries" name="fave" />        Cherries    </label>

4.5 用input元素获取有规定格式的字符串

type属性设置为email 、tel和url的input元素能接受的输入数据分别为有效的电子邮箱地址、电话号码和URL。
email型、tel型和url型input元素可用的额外属性

属性说明是否HTML5新增 list 指定为文本框提供建议值的datalist元素，其值为datalist元素的id值，详见1.3节是 maxlength 设定用户能够在文本框中输入的字符的最大数目，详见1.1节否 pattern 指定一个用于输入验证的正则表达式，详见第14章是 placeholder 指定关于所需数据类型的提示，详见1.2节是 readonly 用来将文本框设为只读以阻止用户编辑其内容否 required 表示用户必须提供一个值，否则无法通过输人验证，详见第14章是 size 通过指定文本框中可见的字符数目设定其宽度，详见1.1节否 value 指定元素的初始值，详见1.2节。对于email型input元素，其值可能是单个邮箱地址，也可能是以逗号分隔的多个邮箱地址否 multiple email支持，设置后可以接受多个电子邮箱地址是

例子：

 <p>        <label for="email">            Email: <input type="email" placeholder="user@domain.com"                          id="email" name="email" />        </label>    </p>    <p>        <label for="tel">            Tel: <input type="tel" placeholder="(XXX)-XXX-XXXX"                        id="tel" name="tel" />        </label>    </p>    <p>        <label for="url">            Your homepage: <input type="url" id="url" name="url" />        </label>    </p>

4.6 用input 元素获取时间和日期

用来获取时间和日期的input元素类型

type属性值说明示例 datetime 获取世界时日期和时间，包括时区信息 2011-07-19T16:49:39.491Z datetime-local 获取本地日期和时间（不含时区信息） 2011-07-19T16:49:39.491 date 获取本地日期（不含时间和时区信息） 2011-07-20 month 获取年月信息（不含日、时间和时区信息） 2011-08 time 获取时间 17:49:44.746 week 获取当前星期 2011-W30

用于输入日期和时间的input元素可用的额外属性

例子：

<input type="date" id="lastbuy" name="lastbuy"/>

4.7 用input元素获取颜色值

color型input元素只能用来选择颜色。
颜色值以7个字符的格式表示：以＃开头，接下来是三个两位十六进制数，它们分别代表红、绿、蓝三种原色的值

<input type="color" id="color" name="color"/>

5 用input 元素获取搜索用词

search型input元素会生成一个单行文本框，供用户输入搜索用词，只有样式的改变而没有实际作用

<input type="search" id="search" name="search"/>

6 用input 元素生成隐藏的数据项

hidden型input元素可以使一些用户看不到或不能编辑的数据项，在提交表单时也能将其发送给服务器。

<input type="hidden" name="recordID" value="1234"/>

7 用input 元素生成图像按钮和分区响应图

image型input元素生成的按钮显示为一幅图像，点击它可以提交表单
image型input元素可用的额外属性

属性说明是否HTML5新增 alt 提供元素的说明文字。对需要借助残障辅助技术的用户很有用否 formaction 等价于button元素的同名属性，参见第12章是 formenctype 等价于button元素的同名属性，参见第12章是 formmethod 等价于button元素的同名属性，参见第12章是 formtarget 等价于button元素的同名属性，参见第12章是 formnovaidate 等价于button元素的同名属性，参见第12章是 height 以像素为单位设置图像的高度（不设置这个属性的话图像将以其本身的高度显示）否 src 指定要显示的图像的URL 否 width 以像素为单位设置图像的宽度（不设置这个属性的话图像将以其本身的宽度显示）否

例子：

<input type="image" src="accept.png" name="submit"/>

点击图像按钮会导致浏览器提交表单。在发送的数据中包括来自那个image型input元素的两个数据项，它们分别代表用户点击位置相对于图像左上角的x坐标和y坐标。

8 用input 元素上传文件

file型，它可以在提交表单时将文件上传到服务器
file型input元素可用的额外属性

属性说明是否HTML5新增 accept 指定接受的MIME类型否 multiple 设置这个属性的input元素可一次上传多个文件是 required 表明用户必须为其提供一个值，否则无法通过输入验证。详见第14章是

例子：

    <!--为multi part/form-data 的时候才能上传文件-->    <form enctype="multipart/form-data">        <input type="file" name="filedata" />    </form>

阅读全文

0 0