HTML入门：08HTML5表单进阶

最新推荐文章于 2024-06-17 23:49:16 发布

Corone

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量1k

点赞数 27

分类专栏： # HTML 文章标签： html5 前端

本文链接：https://blog.csdn.net/ZYB1300704781/article/details/136427534

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML入门：08HTML5表单进阶

1 时间类型
2 email类型和url类型
3 number、range类型
4 search类型
5 color类型
6 实例

HTML5拥有多个新的表单input输入类型，它们提供了更好的输入控制和验证，下面详细介绍这些新的输入类型的用法。

input类型	描述
date	从一个日期选择器选择一个日期
month	选择一个月份
week	选择周和年
time	选择一个时间
datetime	选择一个日期（UTC时间）
datetime-local	选择一个日期和时间（无时区）
email	包含e-mail地址的输入域
url	URL地址的输入域
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
color	主要用于选取颜色

1 时间类型

首先，我们来看前六个，他们都是关于日期、时间选取的输入类型。其中：

date用于选取日、月和年；
month用于选取月和年；
week用来选取周和年；
time用来选取时间，也就是小时和分钟；
datetime和datetime-local都是用来选取时间、日、月和年，不同的是，前者的时间是utc国际标准时间，而后者的时间则是本地时间。

示例：首先，我们通过form标签新建一个表单，然后新建一个input并设置为date类型，效果如下。

<form>
    选取时间：<input type="date" name="datetime1"> <br>
</form>

请添加图片描述

接下来再新建五个input类型，分别设置为month、week、time、datetime、datetime-local类型，效果如下。

<form>
    选取时间：<input type="date" name="datetime1"> <br>
    选取月份：<input type="month" name="datetime2"> <br>
    选取周数：<input type="week" name="datetime3"> <br>
    选取时间：<input type="time" name="datetime4"> <br>
    统一时间：<input type="datetime" name="datetime5"> <br>
    本地时间：<input type="datetime-local" name="datetime6">
</form>

请添加图片描述

2 email类型和url类型

email类型用于应该包含e-mail地址的输入域，在用户输入数据后会自动验证email域的值。

url类型用于应该包含URL地址的输入域，在用户输入数据后，会自动验证url域的值。

示例：把输入框的属性改为email和url，效果如下。

<form>
    Email:<input type="email" name="email"/> <br>
    网址：<input type="url" name="url">
</form>

请添加图片描述

3 number、range类型

number、range类型用于应该包含一定范围内数字值的输入域。

number类型显示为输入框；
range类型显示为滑动条。

我们可以通过设定参数对所接受的数字进行限定，如下表所示。

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔
value	number	规定默认值

示例：把输入框的属性改为number和range类型，页面会增加一个输入选择框和一个滑动条。

<form>
    数字文本：<input type="number" name="number" max="7" 
                min="0" step="1" value="2"> <br>
    数字滑动：<input type="range" name="range">
</form>

请添加图片描述

number输入框可以手动输入数字，也可以通过后面的箭头选择数字，当出现错误输入时，输入框会变成红色提示。

range滑动条则可以通过左、右方向键按照事先设定好的步长进行数值的选择。

4 search类型

search类型用于搜索域，比如站点搜索或调用百度搜索的参数输入框等。

search域显示为常规的文本域，在用户体验上和text区别不大，但是它给机器识别提供了方便，也使得程序的可读性增强，由于在前端页面展示上的效果不明显，search类型就不演示了。

5 color类型

color类型用于提供用户选取颜色的输入域，显示为当前选取的颜色。

示例：把输入框的属性改为color类型后，页面中会出现一个色块，通过鼠标点击色块会弹出颜色选择面板，用户指定好新的颜色后色块会变成相应颜色。

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

请添加图片描述

HTML5新增了三个表单元素，分别为datalist、keygen和output。

表单元素	描述
datalist	元素规定输入域的选项列表。使用<input>元素的list属性与<datalist>元素的id绑定
keygen	提供一种验证用户的可靠方法。签规定用于表单的密钥对生成器字段。
output	用于不同类型的输出。比如计算或脚

HTML5还新增了一些表单属性，如下表所示。

属性名称	说明
placeholder	简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，，在用户输入后消失。
required	是一个boolean属性。如要求填写的输入域不能为空
pattern	描述了一个正则表达式用于验证<input>元素的值。
min、max	设置元素最小值与最大值
step	为输入域规定合法的数字间隔。
height、width	用于image类型的<input>标签的图像高度和宽度。1
autofocus	是一个boolean属性。规定在页面加载时，域自动地获得焦点。
multiple	是一个boolean属性。规定<input>元素中可选择多个

6 实例

如下是一个表单的综合实例。可以看出，本文中提到的一些表单、类型、属性等信息都出现在这里，其中：

请添加图片描述

通过placeholder属性实现地址、邮箱等字段在输入之前提示信息的出现；

地址：<input type="text" name="address" 
          placeholder="请填写详细地址"/> <br>

电话：<input type="phone" name="phone"/> <br>

邮箱：<input type="email" name="email" 
          placeholder="请按邮箱格式填写"/> <br> 

主页：<input type="url" name="url" 
          placeholder="请按URL格式填写"/> <br>

生日:<input type="date" name="sr"/> <br>

身高：<input type="number" name="sg" min="90" max="200" step="1" 
          placeholder="请输入90-200的数字"/> <br/>

通过autofocus属性实现在页面刚打开时光标默认出现在用户字段输入框。

用户名：<input type="text" list="nameinfo" 
           name="username" autofocus/> <br/>

再有，登录信息中的用户名和密码字段分成两部分显示，其目的是想说明：在HTML5之前的版本中，所有的表单元素必须放在form标签内，而HTML5允许form标签之外存在其他的表单元素，如这里的密码字段。

<fieldset>
    <legend>登陆信息</legend>
    密码：<input type="password" list="nameinfo" name="pwd"/>
</fieldset>

完整代码如下：

<!doctype html>
<html>
    <head>
        <meta charset='UTF-8'  />
        <title>页面标题</title>
    </head>
    <body>
        <h3>HTML5-表单综合实例</h3>
        <form action="#" method="get" style="width:300px;">
            <!--行内CSS样式-->
            <fieldset style="border:2px solid red;">
                <legend>登陆信息</legend>
                用户名：<input type="text" list="nameinfo" 
                           name="username" autofocus/> <br/>
                <datalist id="nameinfo">
                    <option value="zhangsan"/>

                    <option value="lisi"/>

                    <option value="wangermazi"/>

                    <option value="wangmazi"/>

                    <option value="goudan"/>
                </datalist>
            </fieldset>
            <fieldset>
                <legend>详细信息</legend>
                地址：<input type="text" name="address" 
                          placeholder="请填写详细地址"/> <br>

                电话：<input type="phone" name="phone"/> <br>

                邮箱：<input type="email" name="email" 
                          placeholder="请按邮箱格式填写"/> <br> 

                主页：<input type="url" name="url" 
                          placeholder="请按URL格式填写"/> <br>

                生日:<input type="date" name="sr"/> <br/>

                身高：<input type="number" name="sg" min="90" max="200" step="1" 
                          placeholder="请输入90-200的数字"/> <br/>

                体重：<input type="range" name="tz" min="10" max="300" step="1"/> <br/>

                颜色：<input type="color" name="color"/> <br/>
                </fleldset>

            <input type="submit" value="提交"/>
            <input type="reset" value="重置"/>
        </form>

        <fieldset>
            <legend>登陆信息</legend>
            密码：<input type="password" list="nameinfo" name="pwd"/>
        </fieldset>
    </body>
</html>