《HTML 5+CSS 3入门经典》——3.1 新增的元素与属性

简介: 本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第3章,第3.1节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.1 新增的元素与属性

在创建Web应用程序的时候,免不了会用到大量的表单元素。HTML 5标准中吸纳了WebForms 2.0的标准,大幅强化了针对表单元素的功能,使得关于表单的开发更快、更方便。
3.1.1 新增的属性
我们先来看HTML 5新增的属性、函数和元素。如同新增的输入型控件一样,不管目标浏览器是否支持新增属性,我们都可以放心地使用这些新增的属性。这主要是因为现在大多数浏览器在不支持这些属性时,会直接忽略它们,而不是报错。
1 . placeholder
当用户还没有输入值的时候,输入型控件可以通过placeholder属性向用户显示描述性说明或者提示信息。使用placeholder属性,只需要将说明性文字作为该属性的值即可。除了普通的文本输入框外,email、number、url等其他类型的输入框也都支持placeholder属性。placeholder属性的使用方法如下所示。

<label>text:<input type="text" placeholder="write me"></label>
AI 代码解读

在Firefox 4等支持placeholder属性的浏览器中,属性值会以浅灰色的样式显示在输入框中。当页面焦点切换到输入框中,或者输入框中有了值以后,该提示信息就会消失,如图3.1所示。

image


在不支持placeholder的浏览器中运行时,此属性会被忽略,以输入型控件的默认方式显示,如图3.2所示。类似地,在输入值的时候,placeholder文本也不会出现,如图3.3所示。 image
2 . autocomplete
浏览器通过autocomplete属性能够知晓是否应该保存输入值以备将来使用。不保存的代码
如下所示。
<input type="text" name="mr" autocomplete="off" />
AI 代码解读

autocomplete属性应该用来保护敏感用户数据,避免本地浏览器对它们进行不安全的存储。对于autocomplete属性,可以指定“on”、“off”与“”(不指定)这三种值。不指定时,使用浏览器的默认值(取决于各浏览器的决定)。把该属性设为on时,可以显示指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方法如下所示。

<input type="text" name="mr" autocomplete="on" list="mrs"/>
AI 代码解读

3 . autofocus
给文本框、选择框或按钮控件加上该属性,当画面打开时,该控件自动获得光标焦点。目前为止要做到这一点,需要使用JavaScript。autofocus属性的使用方法如下所示。

<input type="text" autofocus>
AI 代码解读

一个页面上只能有一个控件具有该属性。从实际角度来说,请不要滥用该属性。
注意
只有当一个页面是以使用某个控件为主要目的时,才对该控件使用autofocus属性,如搜索页面中的搜索文本框。
4 . list
在HTML 5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素也是HTML 5中新增的元素。该元素类似于选择框(select),但是当用户想要设置的值不在选择列表之内时,允许其自行输入。该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误,可以用CSS等将它设定为不显示。list属性的使用方法如下所示。

<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
text:<input type="text" name="mr" list="mr">
<!--使用style="display:none;"将datalist元素设定为不显示-->
<datalist id="greetings" style="display: none;">
<option value="明日科技">明日科技</option>
<option value="欢迎你">欢迎你</option>
<option value="你好">你好</option>
</datalist>
AI 代码解读

这段代码的运行结果如图3.4所示。image
注意
考虑到兼容性,在不支持HTML 5的浏览器中,可以忽略datalist元素,以便正常输入及用脚本编程的方式对input元素执行其他操作。
说明 到目前为止,只有较新版本的Opera浏览器支持list属性。
5 . min和max
通过设置min和max属性,可以将range输入框的数值输入范围限定在最小值和最大值之间。这两个属性既可以只设置一个,也可以两个都设置,当然还可以都不设置,输入型控件会根据设置的参数对值范围做出相应调整。例如,创建一个表示型大小的range控件,值范围为0%~100%,代码如下所示。

<input id="confi dence" name="mr" type="range" min="0" max="100" value="0">
AI 代码解读

上述代码会创建一个最小值为0、最大值为100的range控件。
说明 默认的min为0,max为100。
6 . step
对于输入型控件,设置其step属性能够制定输入值递增或递减的梯度。例如,按如下方式将表示型大小的range控件的step属性设置为5。

<input id="confi dence" name="mr" type="range" min="0" max="100" step="5" value="0">
AI 代码解读

设置完成后,控件可接受的输入值只能是初始值与5的倍数之和,也就是说,只能输入0,5,10,…,100。至于是输入框还是滑动条输入,则由浏览器决定。
step属性的默认值取决于控件的类型。对于range控件,step默认值为1。为了配合step属性,HTML 5引入了stepUp和stepDown两个函数对其进行控制。这两个函数的作用分别是根据step属性的值来增加或减少控件的值。如此一来,用户不必输入就能够调整输入型控件的值了,这就给开发人员节省了时间。
7 . required
一旦为某输入型控件设置了required属性,那么此项必填,否则无法提交表单。以文本输入框为例,要将其设置为必填项,按照如下方式添加required属性即可。

<input type="text" id="fi rstname" name="mr" required>
AI 代码解读

说明 required属性是最简单的一种表单验证方式。
3.1.2 增加与改良的input元素的种类
HTML 5中大幅度地增加与改良了input元素的种类,可以简单地使用这些元素来实现HTML 5之前需要使用JavaScript才能实现的许多功能。
到目前为止,对于这些input元素的种类来说,支持得最多、最全面的是Opera 10浏览器。
对于不支持新增input元素的浏览器来说,统一将这些input元素视为text类型。另外,HTML 5中也没有规定这些元素在各浏览器中的外观形式,所以同样的input元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些增加与改良的input元素。
1 . email输入类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时,如果该文本框中内容不是email地址格式的文字,则不允许提交,但是它不检查email地址是否存在。和所有的输入类型一样,用户可能提交带有空字段的表单,除非该字段是必填的,即加上required属性。
email类型的文本框具有一个multiple属性,它允许在该文本框中是用逗号隔开的有效email地址的一个列表。当然,这不是要求用户手动输入一个逗号隔开的列表,浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。email类型的input元素的使用方法如下所示。

<input type="email" name="email" value="mingrisoft@yahoo.com.cn"/>
AI 代码解读

email类型的input元素在Opera 10浏览器中的外观如图3.5所示。
image
2 . url输入类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时,如果该文本框中内容不是url地址格式的文字,则不允许提交。例如,Opera显示来自用户的浏览器历史的、最近访问过的url的一个列表,并且自动地在url的“www”开始处之前添加“http://”。url类型的input元素的使用方法如下所示。

<input name="url1" type="url" value="http://www.mingribook.com" />
AI 代码解读

url类型的input元素在Opera 10浏览器中的外观如图3.6所示。

image


3 . date输入类型
date输入类型是比较受开发者欢迎的一种元素。我们经常看到网页中要求我们输入的各种各样的日期,如生日、购买日期、订票日期等。date类型的input元素以日历的形式方便用户输入。在Opera浏览器中,当该文本框获得焦点时,显示日历,可以在日历中选择日期进行输入。date类型的input元素的使用方法如下所示。
<input name="data1" type="date" value="2011-10-14"/>
AI 代码解读

date类型的input元素在Opera 10浏览器中的外观如图3.7所示。image

4 . time输入类型
time类型的input元素是一种专门用来输入时间的文本框,并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器,可能是简单的文本框,只在提交时检查是否在其中输入了有效的时间,也可以以时钟形式出现,还可以携带时区。time类型的input元素的使用方法如下所示。

<input name="time1" type="time" value="10:00" />
AI 代码解读

time类型的input元素在Opera 10浏览器中的外观如图3.8所示。image
5 . datetime输入类型
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效性检查。datetime类型的input元素的使用方法如下所示。

<input name="datetime1" type="datetime" />
AI 代码解读

datetime类型的input元素在Opera 10浏览器中的外观如图3.9所示。image

相关文章
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
45 34
|
5天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
57 33
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
17 2
|
26天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
103 24
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
96 7
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
53 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等