《Web前端开发》 课件 机械 第9、10章 HTML5表单相关元素和属性、CSS3新增选择器

第9章

HTML5表单相关元素和属性学习任务任务1

熟练掌握HTML5原有的表单元素及表单控件任务2

熟练掌握HTML5表单新增功能类型任务3

熟练掌握HTML5表单控件新增的属性学习路线/

25/

25HTML5原有的表单元素及表单属性HTML5在保留原有HTML表单控件、属性的基础上，又极大地增强了表单、表单控件的功能，还新增了很多校验API，这样可以避免编写大量的JS代码。表单元素<form><form>元素用于生成输入表单。在HTML5之前的规范中，所有表单控件都必须放在<form>元素之内。<input>控件<input>元素在表单控件中功能最丰富、种类最多，它的type属性决定了它的控件类型。type属性值如下表所示。<input>的type属性值控件类型<input>的type属性值控件类型text单行文本框image图像域password密码输入框file文件域hidden隐藏域submit提交按钮radio单选钮reset重置按钮checkbox复选框button按钮/

25<label>控件<label>元素用来对其他表单控件进行文字说明，当单击<label>标签时，可以将焦点转移到与该标签关联的控件上。将标签与表单控件关联的方法有以下两种：将<label>的for属性等于某控件的id。例如

<label

for="abc">姓名</label><input

type="text"

id="abc"

/>将说明文字与控件一起放在<label>元素之内。例如

<label>姓名<input

type="text"

id="abc"

/></label><select>、<option>、<optgroup>控件<select>元素创建下拉菜单或者列表框（加size属性），但必须配合<option>（列表项）和<optgroup>（列表项组）元素使用。<button>控件<button>元素定义一个按钮。与<input

type="button"/>相比，<button>的type属性值也有button、rest和submit等3种。由于是双标记，<button>可以提供更丰富的显示内容。当<button>元素放在表单里面时如果不指定type属性或type="submit"时会被当作提交按钮，而放在表单外面时只有设置type="submit"及form="表单名"时才被当作提交按钮。<textarea>控件<textarea>元素产生多行文本框，有cols（宽度）、rows（高度）、readonly（只读）等属性。9．2

HTML5表单的新增元素和新增功能9.2.1

<input>元素新增功能类型1.color类型<input

type="color">用于产生颜色选择器，或者输入兼容CSS语法的颜色代码区域。当用户在颜色选择器中指定颜色后，该<input>元素的值为选定颜色的值。例如：<script>function

getcolor(

)

{var

input=document.getElementById("color");var

div=document.getElementById("abc");

div.innerHTML="你选择的颜色值是："+input.value;}</script><div

id="abc"></div><form

action=""

method="get"><input

type="color"

name="color"

id="color"

onchange="getcolor()"

/></form>/

252.time类型<input

type="time">用于产生一个时间选择器，它的结果值包括小时和分，但不包括秒数。其value属性可以设置一个初始值。例如：<form

action=""

method="get">type="time"

name="time"

id=""

value="23:56" /><br

/>type="submit"

id=""

name=""

/><input<input</form>/

253.datetime类型和datetime-local类型<input

type="datetime">用于产生一个UTC（世界协调时间）的日期时间选择器，由于这种类型浏览器支持不太好，因此不太常用。<input

type="datetime-local">用于产生一个本地化的日期时间选择器，它的结果值包括年份、月份和日期、小时和分。这两种类型的标签都可以通过min和max属性限制用户的可选日期范围。例如：<form

action=""

method="get">type="datetime-local"

name="datetime-local"

id=""

value="" /><br

/>type="submit"

id=""

name=""

/><input<input</form>/

254.date类型<input

type="date">用于产生一个日期输入/选择器，它的结果值包括年份、月份和日期。这种类型的标签可以通过

min和max属性限制用户的可选日期范围。例如：<form

action=""

method="get">type="date"

name="date"

id=""

value=""

max="2019-02-01"

min="2019-01-01"

/><br

/>type="submit"

id=""

name=""

/><input<input</form>/

255.month类型<input

type="month">用于产生一个月份输入/选择器，它的结果值包括年份、月份。这种类型的标签可以通过min和max属性限制用户的可选月份范围。例如：<form

action=""

method="get">type="month"

name="month"

id=""

value=""

min="2022-01"

max="2022-12"

/><br

/>type="submit"

id=""

name=""

/><input<input</form>/

256.week类型<input

type="week">用于产生一个选择第几周的选择器，它的结果通常显示为yyyy-Www的格式，如2018-W01，表示

2018年第一周。这种类型的标签可以通过min和max属性限制用户的可选周的范围。例如：<form

action=""

method="get">type="week"

name="week"

id=""

value=""

max="2022-W04"

min="2022-W01"

/><br

/>type="submit"

id=""

name=""

/><input<input</form>/

257.email类型<input

type="email">用于产生一个电子邮件输入框，如果指定了multiple属性，还可以输入多个E-mail地址，各邮箱之间用英文逗号隔开。这个输入框在表单提交前，会自动验证输入值是否是一个或多个合法的邮箱格式。例如：<form

action=""

method="get">type="email"

name="email"

id=""

value=""

multiple="multiple"

/><br

/>type="submit"

id=""

name=""

/><input<input</form>/

258.number类型<input

type="number">用于产生一个只能输入数字的输入框，这种类型的标签可以通过min和max属性指定输入数值的最小和最大值。使用step属性可以更改数值步长值（默认为1）。例如：<form

action=""

method="get">type="number"

name="number"

id=""

value=""

max="100"

min="0"

step="10"

/><br

/>type="submit"

id=""

name=""

/><input<input</form>/

259.range类型<input

type="range">用于产生一个拖动条（也可移动光标键），通过拖动条，用户只能输入指定范围、指定步长的值。可以通过min和max属性指定该字段的最小和最大值。使用step属性可以更改数值步长值（默认为1）。例如：<form

action=""

method="get"><input

type="range"

name="range"

id=""

value=""max="100"

min="0"

step="10"

/><br

/><input

type="submit"

id=""

name=""

/></form>为这个控件加上list属性，指向一个<datalist>标签的id，可以为range类型的控件添加刻度显示。例如：<input

type="range"

name="range"

id=""

value=""

max="100"<datalist

id="marks"><option

value="0"><option

value="10"><option

value="20"><option

value="30"><option

value="40"><option

value="50"><option

value="60"><option

value="70"><option

value="80"><option

value="90"><option

value="100"></datalist>min="0"

step="10"

list="marks"

/>/

25如果对这个range控件添加以下样式，可以实现竖立滑动条，如右图所示。-webkit-appearance:slider-vertical;writing-mode:bt-lr;

//针对IE浏览器10.search类型<input

type="search">用于产生一个输入搜索关键字的文本框。目前，桌面浏览器对该控件的处理与单行文本框相同，但在移动浏览器上，某些浏览器厂商会选择搜索键盘。例如：<form

action=""

method="get">type="search"

/><br

/>type="submit"

id=""

name=""

/><input<input</form>/

2511.tel类型<input

type="tel">用于产生一个只能输入电话号码的文本框。目前，桌面浏览器对该控件的处理与单行文本框相同，但在移动浏览器上，某些浏览器厂商会选择为输入电话号码而优化的自定义数字键盘。例如：<form

action=""

method="get"><input

type="tel"

/><br

/><input

type="submit"

id=""

name=""

/></form>/

2512.url类型<input

type="url">用于产生一个输入URL的文本框。浏览器在提交表单前会自动检查用户输入的内容，如果不符合URL格式，则会阻止提交并提示用户。例如：<form

action=""

method="get"><input

type="url"

/><br

/><input

type="submit"

id=""

name=""

/></form>/

259.2.2

HTML5新增的表单控件<output><output>元素通常可以用来显示某个输入控件的当前值，使界面显示更加人性化，改善了用户操作体验。例如：<form

action=""

method="get"

oninput="x.value=parseInt(abc.value)"

>0<input

type="range"

id="abc"

value="50"

/>100<br

/><output

name="x"

for="abc"

>50</output></form>/

25/

25HTML5表单控件新增的属性HTML5为表单控件增加了大量属性，有些属性在以前的HTML中需要JS实现，这些新增属性的引入在很大程度上减轻了Web前端设计的工作量。form属性在HTML5之前的规范中，所有的表单控件都必须放在<form>元素内部，现在HTML5为表单控件增加了form属性，用于表明该控件属于哪个表单，该属性值填写所属表单的id。这个属性可以使表单控件位于表单之外，提高了灵活性。例如：<input

form="login"type="text"/>formaction属性在以前的HTML表单中，一个form只能有一个action，对应一个提交按钮。如果遇到一个表单有两个或者以上的提交按钮，而且每个提交按钮需要提交的地址不同，则需要JS实现。在HTML5中，针对提交类型的按钮，可以设置formaction属性，将内容提交到不同的action。例如：<input

type="submit"

formaction="login.php"

/><button

type="submit"

formaction="regist.php">注册</button>/

25formmethod属性formmethod属性与formaction属性的使用场合相同，对提交按钮实现不同方式的提交。该属性的值只能是get或者post。例如：<input

type="submit"

formmethod="get"

/><input

type="submit"

formmethod="post"

/>formenctype属性formenctype属性与formaction属性的使用场合相同，对提交按钮实现不同编码方式的提交。formenctype属性的值如下表所示：属性值描述application/x-www-form-urlencoded在发送前对所有字符进行编码（默认）。multipart/form-data不对字符编码。当使用有文件上传控件的表单时使用。text/plain将空格转换为"+"符号，但不编码特殊字符。formtarget属性formtarget属性与formaction属性的使用场合相同，以实现不同的提交类型按钮用不同的target（目标窗口）提交。例如：<button

type="submit"

formtarget="_blank">提交到新窗口</button>placeholder属性placeholder属性主要用在文本框，作用是规定可描述输入字段预期值的简短的提示信息，该信息会在输入之前显示在文本

框中，直到用户输入内容时消失。有些浏览器是在文本框获得焦点后该提示便消失。在HTML5之前，该效果只能用JS实现。例如：<form

name="form1">type="text"

placeholder="请输入用户名"

autofocus="autofocus"/><br

/>type="password"

placeholder="请输入密码"

/><br

/>type="submit"

/><input<input<input</form>/

25/

25autocomplete属性文本框的autocomplete属性默认值为on，即点击文本框时浏览器会提示以前在文本框中已经输入过的信息以供选择。但有时用户想屏蔽此功能，对过去输入的内容进行保密，就可以将文本框的autocomplete属性值设为off。autofocus属性为某个控件添加此属性后，当页面打开时，该控件将自动获得焦点。如autofocus="autofocus"。list属性文本框的list属性为其指定一个可用的选项列表，当用户在文本框中输入信息时，浏览器会根据输入的字符自动显示下拉列表智能提示，供用户从中选择。list属性要与一个<datalist>元素结合使用（将list的属性值设为<datalist>标签的id）。<datalist>标签理论上可以放在页面其他位置，但为了可读性，最好与相应的文本框放在一起。例如：<input

list="w3cfuns-search"

placeholder="--选择课程--"/><datalist

id="w3cfuns-search"><option

value="W3C标准"><option

value="W3C规则"><option

value="W3C验证"><option

value="前端开发"><option

value="前端开发网"><option

value="W3CSchool"></datalist>也可用jquery实现类似智能提示效果。/

25/

259.3.10

pattern属性控件的pattern属性用于验证输入。通常情况下，HTML5的type属性，如email、tel、number、url等类型，已经自带了简单的数据格式验证功能，加上pattern属性后，验证会更加高效。pattern的属性值为正则表达式。需要注意的是，该属性在具有novalidate属性的表单内无效。例如：<form

action=""

method="get"><input

type="text"

name="abc"

id="abc"

pattern="^[1-9]{1}[0-9]{2}$"

/><br

/><input

type="submit"

id=""

name=""

/></form>9.3.11

novalidate属性表单的novalidate属性规定，提交表单时不对以下类型进行验证：text、search、url、tel、email、password、date、range、color、pattern、required等。novalidate的属性值只有novalidate。9.3.12

required属性如果使用required属性，则该控件数据是必填（或必选）项。required的属性值只能是required。需要注意的是，该属性在具有novalidate属性的表单内无效。9.3.13

<textarea>新增maxlength属性和wrap属性maxlength属性规定文本区域中输入的最多字符数。wrap属性的默认值为soft，这种情况下，在表单提交时，<textarea>中的文本不换行。如果设置wrap="hard"，则提交的文本会包含换行符（如果有的话）。/

259.4

本章小结/

25本章主要介绍了HTML5的表单、表单控件及其相关属性。使用这些新特性，能够改善用户体验并大大提高前端开发效率。第10章CSS3新增选择器学习任务任务1

了解CSS3的历史及现状任务2

熟练掌握CSS3的新增选择器学习路线/

12/

1210.1

CSS3简介CSS3是最新的CSS标准。CSS3现在还在发展中，我们现在所说的CSS3，指的是那些在CSS2.1之后发布的所有东西。目前在使用CSS3开发时，还要注意到某些浏览器对CSS3的支持不是太好，比如IE10及更低版本。可以在/查看CSS官方文档。可以在/查询某属性方法的浏览器支持性。CSS3的优势是能够使网站变得非常炫酷。CSS3能够代替许多之前需要用JavaScript、jQuery才能实现的显示效果，为用户带来更好的操作体验。CSS3完全向后兼容，没有必要修改已有的设计，浏览器将继续支持CSS2。CSS3的主要影响是可以使用新的选择器和属性。在实际开发中，一个好的前端开发是以渐进增强和优雅降级的思想进行设计与开发的，即在编写页面时首先要保证核心功能一定能实现，使任何低端浏览器都能看到主要内容。/

1210.2 兄弟选择器兄弟选择器与CSS2中的相邻兄弟选择器是不一样的。相邻兄弟选择器是指两个元素相邻，拥有同一个父元素；兄弟选择器是第一个元素之后的所有兄弟（同父）元素2都会被选中，这些兄弟元素2可以与第一个元素不相邻。

格式如下：元素1

~

元素2{属性1:值1;属性2:值2;属性3:值3;...}例如样式代码如下：h2~p{color:red;}

HTML代码如下：<h1>一级标题</h1><p>前面的兄弟不变色</p><h2>二级标题</h2><p>后面的兄弟变色</p><h3>三级标题</h3><p>后面的兄弟还是变色</p><div><p>我和h2不是兄弟，不变色</p></div>/

1210.3 新增的属性选择器CSS的属性选择器如下表所示。属性选择器描述备注元素[属性]选取所有带指定属性的元素元素[属性="指定值"]选取属性值等于指定值的元素元素[属性~=指定值]选取属性值中包含指定值，且指定值前后只能有空格的元素。元素[属性|=指定值]选取属性值以“指定值”或“指定值-”开头的元素。元素[属性^=指定值]选取属性值中以指定值开头的元素。例：a[href^="http://"]CSS3新增元素[属性$=指定值]选取属性值中以指定值结尾的元素。例：a[href$=".cn"]CSS3新增元素[属性*=指定值]选取属性值中包含指定值的元素。CSS3新增/

12示例代码如下。（1）样式代码td[lang]

{

color:red;

}/*带lang属性的*/td[title="a"]{color:red;}

/*

title属性等于a的*/td[title~="c"]

{

color:red;

}

/*

title属性中有c且c前后什么都没有或只有空格的

*/td[title|="hello"]

{

color:red;

}

/*

title属性以hello或hello-开头

*/td[title^="l"]

{

color:red;

}td[title$="o"]

{

color:red;

}td[title*="x"]

{

color:red;

}/*

title属性开头是l的*//*

title属性结尾是o的*//*

title属性包含x的*/（2）HTML代码<table><tr><td>黑</td></tr></table><table><tr><tdlang="">红</td></tr></table><table><tr><td

title="a">红</td><td

title="a

b">黑</td></tr></table><table><tr><td

title="c">红</td><td

title="a

c

b">红</td><td

title="c

b">红</td><td

title="ac

b">黑</td><td

title="a

cb">黑</td></tr></table><table><tr><td

title="hello">红</td><td

title="hello-">红</td><td

title="hello-etwt

yyy">红</td><td

title="hhh

eeee-hello">红</td><td

title="-hello">红</td><td

title="world

hello">红</td><td

title="-hello-">黑</td><td

title="hello">黑</td></tr></table><table><tr><td

title="l">红</td><td

title="lm">红</td><td

title="l

m">红</td><td

title="l-m">红</td><td

title="m-l">黑</td></tr></table><table><tr><td

title="o">红</td><td

title="op">黑</td><td

title="po">红</td></tr></table><table><tr><td

title="x">红</td><td

title="xo">红</td><td

title="oxo">红</td></tr></table>伪类名含义指定元素:first-child找到各级元素中处于第1个的指定元素，如果第1个不是指定元素则不显示指定元素:last-child找到各级元素中处于最后位置的指定元素，如果最后不是指定元素则不显示指定元素:nth-child(n)找到各级元素中处于第n个位置的指定元素指定元素:nth-last-child(n)找到各级元素中处于倒数第n个的指定元素指定元素:nth-child(odd)找到各级元素中处于第奇数个位置的指定元素指定元素:nth-child(even)找到各级元素中处于第偶数个位置的指定元素元素:only-child找到在父元素中作为唯一元素的那个元素元素:first-of-type找到各级中第一个同类元素元素:last-of-type找到各级中最后一个同类元素元素:nth-of-type(n)找到各级中第n个同类元素元素:nth-last-of-type(n)找到各级中倒数第n个同类元素元素:only-of-type找到各级中作为唯一元素种类的那个元素

/元素:empty找到没有子元素（包括文本内容）的元素1210.4 新增的伪类选择器CSS3新增了一批伪类选择器，用以选择不同位置或状态下的指定元素。如下表所示。/

12示例代码如下。（1）样式代码div{

float:left;

width:150px;

border:1px

solid

#ff0000;

}:root{font-size:18px;}

/*对页面中所有文本设置大小*/li:last-child{color:red;list-style-type:none;}/*最后一个li子元素为红色*/li:nth-child(3){color:green;}/*第3个li子元素为绿色*/li:nth-last-child(3){color:blue;list-style-type:square;}/*倒数第3个li子元素为蓝色*/li:first-of-type

{color:#F0F;}/*每一类li中的第1个为品红色*/li:only-child{color:#FF0;}/*唯一的li子元素为黄色*/li:last-of-type{font-size:80px;}/*每一类li中的最后1个为80像素大小*/li:nth-of-type(3){font-size:50px;}/*每一类li中的第3个为80像素大小*/li:nth-last-of-type(3){font-size:35px;}/*每一类li中的倒数第3个为80像素大小*/li:only-of-type{font-size:180px;}/*每一类li中的唯一1个为180像素大小*/:empty{border:1px

solid

#00F;width: