（HTML5）第四章 web表單

什麼是表單？

用戶填寫內容然後點擊按鈕，瀏覽器收集用戶輸入的信息並將其發送給web服務器。

通過佔位符文本添加提示

<input id="name" placeholder="Jane Smith">

避免用佔位符做兩件事：

一是不要用它代替字段描述或說明。比如，對於一個收集信用卡安全碼的文本框，“您的卡背面的三位數字”並不適合以佔位符形式出現。可以考慮用

<input id="promoCode" placeholder="QRB001" title="your promotion code is three letters followed bt three numbers">

二是不要爲了表示佔位符不是真正的內容，就選擇特殊字符作爲佔位符。

<autofocus> 可添加在<input><textarea>上，讓瀏覽器自己控制焦點，在用戶操作之前，先把焦點給予正確的控件。

HTML5提供表單驗證功能

<input id="name" placeholder="Jane Smith" required>

提交按鈕式驗證消息；如果想要即使驗證消息，則還是需要用js實現。

·禁止驗證功能：

方案一：<form id="" action="" novalidate>

方案二：新增一個提交按鈕<input type="submit" formnovalidate>

·驗證樣式掛鉤

1、組合僞類

textarea:required:invalid, input:required:invalid {
  background-color: lightyellow;
}

必填且當前填入了無效值的字段

2、使用正則表達式（經常用於搜索和驗證）

學習正則表達式鏈接： http://www.w3school.com.cn/js/js_obj_regexp.asp

現成的正則表達式 鏈接：http://regexlib.com/

<input id="promoCode" placeholder="QRB001" title="your promotion code is three letters followed by three numbers" pattern="[A-Z]{3}-[0-9]{3}">                          

PS:對於郵箱的驗證，HTML5有內置的定義，<input id="email" type="email">
3、JS的自定義驗證

setCustomValidity()函數

function validateComments(input) {
   if (input.value.length < 20) {
     input.setCustomValidity("You need to comment in more detail.");
   }
   else {
     // There's no error. Clear any error message.
     input.setCustomValidity("");
   }
 }

<textarea id="comments" οninput="validateComments(this)" required></textarea>

· 檢驗瀏覽器對驗證機制的支持

function validateForm() {

  if (!Modernizr.input.required) {
    // The required attribute is not supported, so you need to check the
    // required fields yourself.

    // First, get an array that holds all the elements.
    var inputElements = document.getElementById("zooKeeperForm").elements;

    // Next, move through that array, checking eaching element.
    for(var i = 0; i < inputElements.length; i++) {

      // Check if this element is required.
      if (inputElements[i].hasAttribute("required")) {
        // If this elemnent is required, check if it has a value.
        // If not, the form fails validation, and this function returns false.
        if (inputElements[i].value == "") {
          alert("Custom required-field validation failed. The form will not be submitted.");
          return false;
        }
      }
    }

    // If you reach this point, everything worked out and the browser
    // can submit the form.
    return true;
  }
}

html代碼

<form id="zooKeeperForm" action="#" οnsubmit="return validateForm()">

H5新的輸入控件：email\url\tel\search\number\range\date,month\week,time\color

<range   滑動條<input type="range" max="1000" min="50" value="160">
<number  只表示數值 <input type="number" max="1000" min="50" step="0.1" value="160" > 其中step影響微調按鈕
<date time 可以產生下拉式日曆
<color  產生下拉式色板

H5新元素:下拉建議項、進度條、工具欄

·下拉建議項

 <datalist id="animalChoices">
    <span class="Label">Pick an option:</span>
      <select id="favoriteAnimalPreset">
        <option label="Alpaca" value="alpaca">
        <option label="Zebra" value="zebra">
        <option label="Cat" value="cat">
        <option label="Caribou" value="caribou">
        <option label="Caterpillar" value="caterpillar">
        <option label="Anaconda" value="anaconda">
        <option label="Human" value="human">
        <option label="Elephant" value="elephant">
        <option label="Wildebeest" value="wildebeest">
        <option label="Pigeon" value="pigeon">
        <option label="Crab" value="crab">
      </select>
    <br>
    <span class="Label">Or type it in:</span>
    </datalist>

·<progress><meter>進度條和計量條
案例http://www.prosetech.com/html5-ed1/Chapter%2004/ProgressAndMeter.html


核心代碼

<h1>Progress Bars</h1>
Current progress: <progress max=100 value=50>50%</progress><br>
Current progress: <progress>Task in progress...</progress>


<h1>Meters</h1>
Your suitcase weighs: <meter min="5" max="70" value="28">28 pounds</meter><br>
Your suitcase weighs: <meter min="5" max="100" high="70" value="79">79 pounds</meter>*
<p><small>* A surcharge applies to suitcases heavier than 70 pounds.</small></p>
<div class="separatedSection">
<p>Our goal is to raise $50,000 for SLF (Save the Lemmings Foundation).</p>
<p>So far we've raised $14,000. <meter max="50000" value="14000"></meter></p>
</div>

網頁中的HTML編輯器

contenteditable//對應塊內容可編輯
designMode//整個網頁可編輯 案例：http://www.prosetech.com/html5-ed1/Chapter%2004/PageEditing.html

  editor.contentWindow.document.designMode = "on";

總結：<html5祕籍>這本書在進行瀏覽器升級工作的時候，很適合