響應式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上的背景位置會設定為默認。
- 因為我們給背景圖片設置了過渡，所以可以在兩者之間看到漂亮的過渡效果。
- 最終我們實現了在用戶輸入時，輸入域被填充為不同的顏色。
