HTML5权威指南笔记：13-定制input元素_在html5中,什么表示密码-CSDN博客

本文链接：https://blog.csdn.net/u011069189/article/details/78339774

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元素可用的额外属性

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

例子：

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