响应式Web设计:HTML5和CSS3实战(第2版)
第九章 表单
9.1-2 理解HTML5表单中的元素
- 每一个输入元素都有一个对应的label元素
- 然后一并被包裹在div元素中（我们也可以把用label把input包裹起来）。
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King
Kong" required>
</div>
9.2.1 placeholder
- 为占位符文本添加样式
- 可以使用:placeholder-shown伪类选择器来为placeholder属性添加样式
- 要用前缀添加工具来兼容各种版本
input:placeholder-shown {
color: #333;
}
9.2.2 required
- 用于多种类型的输入元素来确保表单域中必须输入值
- range、color、button和hidden类型的输入元素不能使用required，
- 这几种输入类型几乎都有默认值。
9.2.3 autofocus
- 可以让表单在加载完成时即有一个表单域被默认选中
- 如果多个表单域都添加了autofocus属性，在不同的浏览器上表现是不一致的
- 在Safari上，最后一个添加autofocus的表单域会被选中，
- 在Firefox和Chrome上会选中第一个添加autofocus属性的元素。
- 带有autofocus的表单域，则会阻止空格键的默认行为
9.2.4 autocomplete
- 禁用自动补全功能的表单项
<div>
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
</div>
- 也可以给整个表单（不是fieldset）设置属性来禁用自动补全功能
<form id="redemption" method="post" autocomplete="off">
9.2.5 list及对应的datalist元素
- 可以在用户开始在输入框中输入值的时候，显示一组备选值
- list属性中的值（awards）同时也是datalist元素的id
- 这样就可以让datalist与输入框关联起来
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>
9.3 HTML5的新输入类型
9.3.1 email
- 当与required组合使用时，如果提交一个不符合格式的地址，浏览器会生成警告信息
<div>
<label for="email">Your Email address</label>
<input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required>
</div>
- 许多触摸屏设备（如安卓、iPhone等）会根据输入类型改变键盘模式
9.3.2 number
- 如果你输入的不是数字
- Chrome和Firefox会在表单提交的时候在表单域上弹出一个警告框
- 而Safari则相反，它什么都不会做，并且让其顺利提交。
- IE11则会在输入框失焦的时候快速清除其中的内容。
<div>
<label for="yearOfCrime">Year Of Crime</label>
<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required>
</div>
9.3.3 url
<div>
<label for="web">Your Web address</label>
<input id="web" name="web" type="url" placeholder="www.mysite.com">
</div>
9.3.4 tel
- IE11、Chrome和Firefox等现代浏览器上，tel类型都设计为数字类型格式
- 它的表现和普通文本输入框一样。
- 当输入无效值，它们都 没有 在输入框失焦或表单提交时提供任何合理的警告信息。
<div>
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
</div>
9.3.5 search
- 移动设备上经常会提供一个更富有针对性的键盘
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp">
</div>
9.3.6 pattern
- 让输入域只接受某种特定格式的输入
<div>
<label for="name">Your Name (first and last)</label>
<input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}" placeholder="Dwight Schultz" required>
</div>
9.3.7 color
- 让输入域接受颜色输入
<div>
<label for="color">Your favorite color</label>
<input id="color" name="color" type="color">
</div>
9.3.8 日期和时间输入类型
- date
<input id="date" type="date" name="date">
- month
<input id="month" type="month" name="month">
- week
<input id="week" type="week" name="week">
- time
<input id="time" type="time" name="time">
9.3.9 范围值
- range输入类型会生成一个滑动条
<input type="range" min="1" max="10" value="5">
- 一大问题是它从来不给用户显示当前的输入值
- 可以通过JavaScript实现。我们将上例中的代码稍作修改
- 获取滑动条当前的输入值，将其显示在id为range的元素（span标签）中
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" onchange="showValue(this.value)">
<span id="range">5</span>
<script>
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
9.4 如何给不支持新特性的浏览器打补丁
- 在一些老式浏览器或不支持的浏览器上使用这些新特性
- 可以考虑使用Webshims Lib (http://afarkas.github.io/webshim/demos )
- Webshims最便捷的地方就是按需打补丁
- 如果在原生支持HTML5新特性的浏览器上查看网页，则仅会给网页加入一丁点儿的冗余代码。
- 而对于老版本浏览器，虽然它们需要加载更多的代码
- 可以考虑使用Webshims Lib (http://afarkas.github.io/webshim/demos )
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
// 引入你需要的功能
webshim.polyfill('forms');
</script>
9.5使用CSS美化HTML5表单
9.5.1 显示必填项
- 仅通过CSS就告诉用户此输入域为必填项
input:required {
/* 样式*/
}
- 来标记被聚焦的必填项
input:focus:required {
/* 样式*/
}
- 当鼠标悬停于item上时，如果item-general-sibling是与其拥有共同父元素并且位于它后方的兄弟元素，那么样式会被应用到item-general-sibling上
input:focus:required {
/* 样式*/
}
- 当鼠标悬停于item上时，如果item-general-sibling是与其拥有共同父元素并且位于它后方的兄弟元素，那么样式会被应用到item-general-sibling上
.item:hover ~ .item-general-sibling {} {
/* 样式*/
}
- 当鼠标悬停在元素上时，如果item-adjacent-sibling是紧跟item的兄弟元素，那么样式会被应用到item-adjacent-sibling上。
.item:hover + .item-adjacent-sibling {} {
/* 样式*/
}
- 为相关的label元素添加样式（重要）
<div class="form-Input_Wrapper">
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King Kong" required/>
</div>
input: required + label: after {
content: "*";
font - size: 2.1em;
position: relative;
top: 6 px;
display: inline - flex;
margin-left: .2 ch;
transition: color, 1s;
}
input: required: invalid + label: after {
color: red;
}
input: required: valid + label: after {
color: green;
}
9.5.2 创造一个背景填充效果
- 我们不能在两个背景图片间添加过渡效果（因为浏览器要将声明光栅化为图片）
- 然而，我们可以在相关属性的值中间添加过渡效果
- 如background-position和background-size
- 使用上面的办法来创造一个填充效果，告知用户input或者textarea被聚焦。
input: not([type = "range"]), textarea {
min-height: 30 px;
padding: 2 px;
font-size: 17 px;
border: 1 px solid# ebebeb;
outline: none;
transition: transform .4s, box-shadow .4s, background-position .2s;
background: radial-gradient(400 px circle, #fff 99 % , transparent 99 % ), #f1f1f1;
background-position: -400 px 90 px, 0 0;
background-repeat: no-repeat, no-repeat;
border-radius: 0;
position: relative;
}
input: not([type = "range"]): focus, textarea: focus {
background-position: 0 0, 0 0;
}
- 解析
- 在第一个规则里，我们生成了一个白色径向渐变，但是它被放置在视线外。
- 定义在其后侧的背景颜色（紧跟在radial-gradient后的HEX值）并没有被偏移，所以它能提供一个默认的颜色。
- 当输入域被聚焦时，radial-gradient上的背景位置会设定为默认。
- 因为我们给背景图片设置了过渡，所以可以在两者之间看到漂亮的过渡效果。
- 最终我们实现了在用户输入时，输入域被填充为不同的颜色。
