图文并茂将HTML5中的新增表单元素彻底搞明白

举报
lwq1228 发表于 2021/07/27 14:47:30 2021/07/27
【摘要】 在HTML4.01中,表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上,对表单进行了以下两个方向的扩展:新增input元素类型和新增其他表单元素。这两个方向的扩展,使得代码量大大减少,可以极大地提高开发效率。

在HTML4.01中,表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上,对表单进行了以下两个方向的扩展。

  • 新增input元素类型。
  • 新增其他表单元素。

这两个方向的扩展,使得代码量大大减少,可以极大地提高开发效率。

1、新增input元素类型

在HTML5中,大量地增加了input元素的种类。换句话说就是,input元素的type属性新增了大量属性值,如下表所示:

1.1、验证型:

属性值 说明
email 邮件类型
tel 电话号码
url URL类型

1.1.1、email

当type属性取值为“email”时,表示这是输入电子邮件的文本框(语义化)。

语法:

<input type="email"/>

举例:

<form method="post">
    <label>电子邮件:<input type="email"/></label>
    <input type="submit" value="提交">
</form>

结果:

说明:

当我们输入非电子邮件格式的字符,然后点击【提交】按钮时,会发现无法提交并且弹出提示内容,效果如图所示。这里有一点要说明,即必须是submit按钮才会弹出提示内容,使用其他按钮(如button按钮)则不会。这是因为email类型的文本框采用了浏览器内置的验证机制,而浏览器内置的验证机制必须使用submit按钮才会触发。

1.1.2、tel

当type属性取值为“tel”时,表示这是输入电话号码的文本框(语义化)。

语法:

<input type="tel"/>

举例:

<form method="post">
    <label>电话号码:<input type="tel"/></label>
    <input type="submit" value="提交">
</form>

结果:

说明:

当我们输入非电话号码格式的字符,然后点击【提交】按钮时,却发现居然可以提交!这是怎么回事呢?其实tel类型文本框并不具备完备的验证功能,如果想要达到验证效果,则需要结合3.2节介绍的pattern属性来实现。

1.1.3、url

当type属性取值为“url”时,表示这是输入URL的文本框(语义化)。

语法:

<input type="url"/>

举例:

<form method="post">
    <label>输入网址:<input type="url"/></label>
    <input type="submit" value="提交">
</form>

结果:

说明:

当我们输入非URL格式的字符,然后点击【提交】按钮时,会发现无法提交并且弹出提示内容,效果如图所示。所谓的URL格式字符,指的是以“http://”或者“https://”开头的网络地址。

1.2、取值型:

属性值 说明
range 取数字(滑块方式)
number 取数字(微调方式)
color 取颜色
date 取日期(如2021-06-30)
time 取时间(如08:06)
month 取月份
week 取周数

1.2.1、range

当type属性取值为“range”时,我们可以通过拖动滑动条获取某一个范围内的数字。

语法:

<input type="range" min="最小值" max="最大值" step="步长" value="初始值"/>

min属性用于设置最小值,max属性用于设置最大值,step属性用于设置间隔数。这3个属性的取值可以是整数,也可以是小数。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 获取range的初始值
            output.value = input.value
            //拖动滑动条,改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="range" min="-10" max="10" step="5" value="-10"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果:

说明:

<input type="range" min="-10" max="10" step="5" value="-10"/>

上面这句代码表示:滑动条最小值为-10,最大值为10,每次拖动只能改变5(增加5或减少5)。value="-10"用于设置滑动条的初始值,设置不同的value值,滑块也会出现在对应数值的位置。在实际开发中,range类型元素都是需要结合JavaScript来操作的,上面这个例子就是最简单也是最经典的。此外,output元素用于定义表单元素的输出结果。

1.2.2、number

当type属性取值为“number”时,我们可以通过使用微调按钮来获取某一个范围的数字。

语法:

<input type="number" min="最小值" max="最大值" step="步长" value="初始值"/>

min属性用于设置最小值,max属性用于设置最大值,step属性用于设置间隔数。它们的属性取值可以是整数,也可以是小数。number类型跟range类型功能非常相似,都是获取某一个范围内的数字。不过两者的外观不一样,其中number类型使用的是“微调按钮”,而range类型使用的是“滑块”。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 获取number的初始值
            output.value = input.value
            // 拖动滑动条,改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="number" min="-10" max="10" step="5" value="-10"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果:

说明:

在这个例子中,我们可以直接在文本框中输入数字,也可以通过右边的微调按钮来改变数字。

1.2.3、color

当type属性取值为“color”时,我们可以直接使用浏览器自带的取色工具来获取颜色值。

语法:

<input type="color" value="颜色初始值"/>

value属性用于设置颜色初始值,格式必须是十六进制颜色值如#F1F1F1,不能是关键字(如black)和rgba颜色(如rgba(255, 255, 255, 0.5))。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 页面载入时获取color的初始值
            output.value = input.value
            // 拖动滑动条,改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="color" value="#00FFFF"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果:

说明:

当我们点击color类型元素时,浏览器会弹出自带的取色工具,以方便直接选取颜色值,如下图所示。

1.2.4、date

当type属性取值为“date”时,我们可以直接使用浏览器自带的日历工具来获取日期(年、月、日)。

语法:

<input type="date" value="日期初始值"/>

value属性用于设置日期初始值,格式必须如“2018-05-20”。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="date" value="2021-07-01"/>
    </form>
</div>
</body>
</html>

结果:

说明:

当我们点击date类型元素时,浏览器会弹出自带的日历工具,以方便直接选取日期,如下图所示。此外,value属性用于设置日期初始值,格式必须如“2021-07-27”,像“2018–7-27”这种是无效的。

1.2.5、time

当type属性取值为“time”时,我们可以直接使用浏览器自带的工具来获取时间(时、分)。

语法:

<input type="time" value="时间初始值"/>

value属性用于设置时间初始值,格式必须如“08:04”。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="time" value="10:30"/>
    </form>
</div>
</body>
</html>

结果:

说明:

当我们点击time类型元素时,文本框右边会出现微调按钮,以方便调整时间,如下图所示。此外,value属性用于设置时间初始值,格式必须如“08:04”,像“8:4”这种是无效的。

1.2.6、month

当type属性取值为“month”时,我们可以使用浏览器自带的工具来获取“月数”。

语法:

<input type="month" value="初始值"/>

value属性用于设置初始值,格式必须如“2021-07”。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="month" value="2021-07"/>
    </form>
</div>
</body>
</html>

结果:

说明:

当我们点击month类型元素时,浏览器会弹出选择框,以方便选择哪个月份,如下图所示。

1.2.7、week

当type属性取值为“week”时,我们可以使用浏览器自带的工具来获取“周数”。

语法:

<input type="week" value="2021-W30"/>

value属性用于设置初始值,格式必须如“2021-W04”。其中,“W”是“week”的缩写。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="week" value="2021-W30"/>
    </form>
</div>
</body>
</html>

结果:

说明:

当我们点击week类型元素时,浏览器会弹出选择框,以方便选择第几周,如下图所示。

2、新增其他表单元素

前面介绍的都是input元素新增的类型,实际上HTML5还新增了3个表单元素:output、datalist、keygen。

2.2、output

在HTML5中,我们可以使用output元素来定义表单元素的输出结果或计算结果。

语法:

<output></output>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 获取range的初始值
            output.value = input.value
            //拖动滑动条,改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="range" min="-10" max="10" step="5" value="-10"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果:

说明:

output元素一般放在form元素内部,并且配合其他表单元素(如文本框等)来使用。

2.2、datalist

在HTML5中,我们可以使用datalist元素来为文本框提供一个可选的列表。

语法:

<input type="text" list=""/>
<datalist id="">
    <option label="" value=""></option>
    <option label="" value=""></option>
    <option label="" value=""></option>
</datalist>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        输入网址:<input type="text" list="urlList"/>
        <datalist id="urlList">
            <option label="百度一下" value="https://www.baidu.com/"></option>
            <option label="百度翻译" value="https://fanyi.baidu.com/"></option>
            <option label="百度文库" value="https://wenku.baidu.com/"></option>
        </datalist>
    </form>
</div>
</body>
</html>

结果:

说明:

如果想要把datalist绑定到某个文本框,需要设置该文本框的list属性值等于datalist的id值。

3、其他新增元素

Html5除了新增结构元素和表单元素之外,HTML5还增加了大量语义化元素,其中最重要的有以下6个,下面分别做介绍。

3.1、address

在HTML5中,我们可以使用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息(电子邮件或真实地址)。当address元素应用于整个页面时,它一般放于整个页面的底部(footer元素内部),表示该网站所有者的地址信息。一个页面可以有多个article元素,比如有些页面就有好几篇文章。当address元素应用于article元素时,它一般放在article元素内部的footer元素内,表示该篇文章所有者的地址信息。当然,address元素也可以放于section元素内。

举例1-应用于整个页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer>
    <address>
        如果你想与我们合作,可以通过<a href="mailto:123456789@qq.com">电子邮件</a>联系我们。<br/>
        当然你也可以通过下面地址联系我们:<br/>吉林省长春市高新区XXXX公司。
    </address>
</footer>
</body>
</html>

效果图1:

举例2-应用于article元素:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header></header>
<nav></nav>
<article>
    <header>作者:XXX111</header>
    <p>这是第一篇文章的内容......</p>
    <footer>
        <address>
            你可以通过<a href="mailto:123456789@qq.com">123456789@qq.com</a>联系作者:XXX111
        </address>
    </footer>
</article>
<br/><br/>
<article>
    <header>作者:XXX222</header>
    <p>这是第二篇文章的内容......</p>
    <footer>
        <address>
            你可以通过<a href="mailto:987654321@qq.com">987654321@qq.com</a>联系作者:XXX222
        </address>
    </footer>
</article>
<aside></aside>
<footer></footer>
</body>
</html>

效果图2:

3.2、time

在HTML5中,我们可以使用更具有语义化的time元素来显示页面中的日期时间信息。

语法:

<time datetime="时间"></time>

datetime属性取值是一个时间,可以省略不写。datetime属性中的时间是提供给搜索引擎看的,而time标签内的时间是提供给用户看的,两者内容可以一样也可以不一样。time元素与datetime属性的关系,有点类似于img元素与alt属性的关系。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    方式1:
    <time>2017-11-11</time>
</div>
<div>
    方式2:
    <time datetime="2017-11-11">2017-11-11</time>
</div>
<div>
    方式3:
    <time datetime="2017-11-11 08:00">2017年11月11日早上8点</time>
</div>
<div>
    方式4:
    <time datetime="2017-11-11 08:00-12:00">2017年11月11日8点~12点</time>
</div>
</body>
</html>

结果:

说明:

在实际开发中,大多数情况下我们是不用datetime属性的。用一句话总结就是:对于time元素的使用,我们不必过于拘泥,想要显示一段有意义的日期时间,用<time></time>括起来就可以了。

3.3、progress

在HTML5中,我们可以使用progress元素以进度条的形式来显示某一个任务的完成度,如上传文件、下载文件等。

语法:

<progress max="最大值" value="当前值"></progress>

max属性表示最大值,value属性表示当前值。对于progress元素来说,它只有max属性,而没有min属性。为什么呢?原因很简单:任何进度条的最小值都是0,因此progress元素默认最小值也是0。此外,max和value必须是0或正数,并且max值必须大于等于value值。

举例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<progress max="10" value="8"></progress>
<br/>
<progress max="100" value="80"></progress>
</body>
</html>

结果1:

说明1:

“进度=value/max”,因此虽然两个progress元素的max和value不一致,但是进度是相同的,都是80%。

举例2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oProgress = document.getElementsByTagName("progress")[0];
            var oSpan = document.getElementsByTagName("span")[0];
            var oBtn = document.getElementsByTagName("input")[0];
            oBtn.onclick = function () {
                var i = 0;
                setInterval(function () {
                    if (i < 100) {
                        i++;
                        oProgress.value = i;
                        oSpan.innerText = i;
                    }
                }, 100)
            }
        }
    </script>
</head>
<body>
<p>
    <progress max="100" value="0"></progress>
    <span>O</span>%
</p>
<input type="button" value="显示进度"/>
</body>
</html>

结果2:

说明2:

在这个例子中,我们使用定时器setInterval()来实现进度条的不断增加。当我们点击【显示进度】按钮后,进度条会不断增加,效果如上图所示。在实际开发中,progress元素一般结合上传文件或下载文件操作来显示进度,或者展示一个loading图标,以便增强用户体验。

3.4、meter

在HTML5中,我们可以使用进度条的形式来显示数据所占的比例。

语法:

<meter min="最小值" max="最大值" value="当前值"></meter>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter min="0" max="10" value="8"></meter>
<br/>
<meter min="0" max="100" value="80"></meter>
</body>
</html>

结果:

说明:

meter元素跟progress元素非常相似,都是以进度条形式来显示数据比例。不过,两者在语义上有很大的区别:

  • meter元素一般用于显示静态数据比例。所谓的静态数据,指的是很少改变的数据,例如男生人数占全班人数的比例。
  • progress元素一般用于显示动态数据比例。所谓“动态数据”,指的是会不断改变的数据,例如下载文件的进度。

3.5、figure和figcaption

如下图所示“图片+图注”效果,在实际开发中经常可以见到。对于初学者来说,我们很可能使用如下代码来实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img src="html5.jpeg" alt="Html5">
    <br/>
    <span>Html5</span>
</div>
</body>
</html>

但是这种实现方式语义并不好。在HTML5中,引入了figure和figcaption这两个元素来增强图片的语义化。

语法:

<figure>
    <img src="" alt="">
    <figcaption>Html5</figcaption>
</figure>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<figure>
    <img src="html5.jpeg" alt="Html5">
    <figcaption>Html5</figcaption>
</figure>
</body>
</html>

结果:

说明:

figure元素用于包含图片和图注,figcaption元素用于表示图注文字。在实际开发中,对于“图片+图注”效果,我们都建议使用figure和figcaption这两个元素来实现,从而使得页面的语义更加良好。

3.6、fieldset和legend

在HTML5中,我们还可以使用fieldset元素来给表单元素进行分组。其中,legend元素用于定义某一组表单的标题。

语法:

<fieldset>
    <legend>表单组标题</legend>
    ......
</fieldset>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <fieldset>
        <legend>登录</legend>
        <p>
            <label for="name">账号:</label>
            <input type="text" id="name" name="name"/></p>
        <p>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd" name="pwd"/></p>
        <input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">记住我</label>
        <input type="submit" value="登录"/>
    </fieldset>
</form>
</body>
</html>

结果:

说明:

使用fieldset和legend有两个作用:增强表单的语义;定义fieldset元素的disabled属性来禁用整个组中的表单元素。通过上例我们可以看到,使用fieldset和legend这两个标签之后,表单形成了非常美观的“书签”效果。

4、改良后的元素

除了新增元素,HTML5还对已有的某些元素进行了改良,其中改良的元素有以下4种,下面分别做介绍。

4.1、a

HTML5为a元素新增了3个属性,如下表所示。

属性 说明
download 定义可被下载的目标(如文件、图片等)
media 定义被链接文档为何种媒介/设备优化的
type 定义被链接文档的MIME类型

media和type这两个属性用得很少,我们只需要掌握download这一个属性即可。

语法:

<a href="文件地址" download="下载的文件名"></a>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="test.jpeg" download="new-test.jpeg">下载图片</a>
</body>
</html>

结果:

说明:

download属性用于为文件取一个新的文件名。如果download属性值省略,则表示使用旧的文件名。当我们点击“下载图片”超链接后,浏览器就会下载该图片,并且图片名字换成新的文件名new-test.jpeg。如果我们改为下面这句代码,也就是省略download属性值,则图片会使用旧的文件名test.jpeg。

<a href="test.jpeg" download>下载图片</a>

4.2、ol

HTML5为ol元素新增了一个reversed属性,用于设置列表顺序为降序显示。

语法:

<ol reversed>
    <li></li>
    <li></li>
    <li></li>
</ol>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol reversed>
    <li>Html5</li>
    <li>Css3</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

结果:

说明:

在实际开发中,reversed属性用得很少,简单了解一下即可。

4.3、small

在HTML5中,我们可以使用更具有语义化的small元素来表示“小字印刷体”的文字。small元素一般用于网站底部的免责声明、版权声明等。

语法:

<small>内容</small>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<small>Copyright ©2019-2021,All Rights Reserved</small>
</body>
</html>

结果:

说明:

对于上例所示效果,我们使用div、span等元素也可以实现,不过small元素更具语义化。

4.4、script

HTML5为script元素新增了两个属性:defer和async。这两个属性的作用都是加快页面的加载速度,两者区别如下:

  • defer属性用于异步加载外部JavaScript文件,当异步加载完成后,该外部JavaScript文件不会立即执行,而是等到整个HTML文档加载完成才会执行。
  • async属性用于异步加载外部JavaScript文件,当异步加载完成后,该外部JavaScript文件会立即执行,即使整个HTML文档还没有加载完成。

defer和async都是异步加载的,两者区别在于,异步加载外部JavaScript文件完成后何时执行。从上面也可以看出,defer属性相对于async属性来说,更符合大多数开发场景对脚本加载执行的要求。

举例:

Html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="async.js" async></script>
</head>
<body>
<script>
    console.log("内部脚本");
</script>
</body>
</html>

async.js代码:

console.log("外部脚本");

结果:

说明:

在正常情况下,输出顺序应该是:“外部脚本→内部脚本”。但是由于async属性用于异步加载外部JavaScript文件,当异步加载完成后,该外部JavaScript文件会立即执行,即使整个HTML文档还没有加载完成,因此输出顺序为:“内部脚本→外部脚本”。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。