《響應式Web設計:HTML5和CSS3實戰(第2版)》09章 - 學習筆記

響應式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新特性的瀏覽器上查看網頁,則僅會給網頁加入一丁點兒的冗余代碼。
      • 而對于老版本瀏覽器,雖然它們需要加載更多的代碼
    <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上的背景位置會設定為默認。
      • 因為我們給背景圖片設置了過渡,所以可以在兩者之間看到漂亮的過渡效果。
    • 最終我們實現了在用戶輸入時,輸入域被填充為不同的顏色。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,786評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,656評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,697評論 0 379
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,098評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,855評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,254評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,322評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,473評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,014評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,833評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,016評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,568評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,273評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,730評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,006評論 2 374

推薦閱讀更多精彩內容