（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秘籍>这本书在进行浏览器升级工作的时候，很适合