《响应式Web设计：HTML5和CSS3实战(第2版)》09章

2017-11-07  本文已影响0人  Revontulet

响应式Web设计:HTML5和CSS3实战(第2版)

第九章 表单

9.1-2 理解HTML5表单中的元素

<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
  input:placeholder-shown { 
      color: #333; 
  }
9.2.2 required
9.2.3 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>

<form id="redemption" method="post" autocomplete="off">

9.2.5 list及对应的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
  <div>
    <label for="email">Your Email address</label>
    <input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required>
  </div>
9.3.2 number
  <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
  <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 日期和时间输入类型
  <input id="date" type="date" name="date">

<input id="month" type="month" name="month">

  <input id="week" type="week" name="week"> 

  <input id="time" type="time" name="time">
9.3.9 范围值
  <input type="range" min="1" max="10" value="5"> 

    <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 如何给不支持新特性的浏览器打补丁

    <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 显示必填项
    input:required { 
    /* 样式*/ 
    }

    input:focus:required { 
    /* 样式*/ 
    }

    input:focus:required { 
    /* 样式*/ 
    }

    .item:hover ~ .item-general-sibling {} { 
    /* 样式*/ 
    }

    .item:hover + .item-adjacent-sibling {} { 
    /* 样式*/ 
    }

    <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 创造一个背景填充效果
    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;
      }
上一篇下一篇

猜你喜欢

热点阅读