HTML5秘籍--表单

HTML5秘籍书籍中表单部分进行要点归纳

表单

检测浏览器对表单验证支持情况的属性

placeholder、autofocus、required、max、min和step。

autofocus

自动对焦, 刷新页面会自动对焦到当前input

<label for="name">Name <em>*</em></label>
<input id="name" placeholder="Jane Smith" autofocus><br>

step

step 属性规定输入字段的合法数字间隔（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推）。

关闭验证

# 表单关闭
<form id="zooKeeperForm" action="processApplication.cgi" novalidate>
# 绕过验证
<input type="submit" value="Save for Later" formnovalidate>

验证挂钩

# required必填
input:required {
  background-color: lightyellow;
}
# invalid没通过验证样式
input:required:invalid {
  background-color: lightyellow;
}

# valid没通过验证样式
input:required:valid {
  background-color: red;
}

使用正则表达式

不必使用^和$字符表示要匹配字段值的开头和结尾。HTML5会自动确保这一点。实际上，这就是说正则表达式匹配的是字段中完整的值，验证的也是整个值的有效性

<label for="promoCode">Promotion Code</label>
<input id="promoCode" placeholder="QRB-001" title=
 "Your promotion code is three uppercase letters, a dash, then three numbers"
 pattern="[A-Z]{3}-[0-9]{3}">

自定义验证

<label for="comments">When did you first know you wanted to be a
 zookeeper? </label>
<textarea id="comments" oninput="validateComments(this)" ></textarea>

这里，onInput事件会触发一个名为validateComments()的函数。这个函数的代码是你自己写的，主要是检测<input>元素的值，然后调用setCustomValidity()方法。

如果当前值有问题，那么在调用setCustomValidity()方法时就需要提供一条错误消息。否则，如果当前值没有问题，调用setCustomValidity()方法时只要传入空字符串即可；这样会清除以前设置过的自定义错误消息。

function validateComments(input) {
  if (input.value.length < 20) {
    input.setCustomValidity("You need to comment in more detail.");
  }
  else {
    //没有错误。清除任何错误消息
    input.setCustomValidity("");
  }
}

提交表单检测

需要为表单的onSubmit事件定义处理函数，根据情况返回true（表示验证通过，可以提交表单）或false（表示验证未通过，浏览器应该取消提交操作）

<form id="zooKeeperForm" action="processApplication.cgi"
 onsubmit="return validateForm()">

# js 以下是一个简单的示例，演示了针对一个必填字段的自定义验证代码：
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;
    console.log(inputElements)
    // 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;
  }
}

表单节点

滑动条

HTML5的另一个数值类型的控件是range。

<input id="weight" type="range" min="50" max="1000" value="160"><br>

可以使用JavaScript响应滑动条的变化事件（即处理onChange事件）

date时间日期

http://prosetech.com/html5/Ch...
通过该网址进行查看即可

使用<datalist>显示输入建议

通过datalist的id属性对应input中的list

<legend>What's Your Favorite Animal? </legend>
<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>
<input list="animalChoices" name="list">

进度条和计量条

新图形微件是<progress>和<meter>，这两个元素外观相似，作用不同

progress

适用于百分比定位

# 可以用0.25来表示完成了进度的25%：
<progress value="0.25"></progress>

# 等价于
<progress value="50" max="200"></progress>

## 不确定的滚动条
<progress>Task in progress ...</progress>

meter

被称为计量器。一般来说，给<meter>元素设置的值都会对应现实中的某个值（比如，钱数、天数或重量）。为了控制<meter>元素显示这些数据的方式，需要设置一个最大值和一个最小值（使用max和min属性）

<meter min="5" max="70" value="28">28 pounds</meter>

为了让<meter>元素能够表示那些“过高”或“过低”的值，而且还能表示得恰如其分，就需要用到low和high属性

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>

Chrome对于过高的值会显示黄条

HTML编辑器

使用contenteditable编辑元素

<div id="editableElement" contenteditable="true">You can edit this text, if
you'd like.</div>

使用designMode编辑页面

与contenteditable属性类似，但designMode属性能够让用户编辑整个页面。
把要编辑的文档放在一个<iframe>元素中，而这个元素就充当了一个超级的编辑框

<iframe id="pageEditor" src="ApocalypsePage_Revised.html"></iframe>
<div>
  <button onclick="startEdit()">Start Editing</button>
  <button onclick="stopEdit()">Stop Editing</button>
  
# js
function startEdit() {
  //把<iframe>转换为设计模式
  var editor = document.getElementById("pageEditor");
  editor.contentWindow.document.designMode = "on";
}


function stopEdit() {
  //关闭<iframe>的设计模式
  var editor = document.getElementById("pageEditor");
  editor.contentWindow.document.designMode = "off";
  //显示编码后的HTML（仅为验证确实可以编辑）
  var htmlDisplay = document.getElementById("editedHTML");
  htmlDisplay.textContent = editor.contentWindow.document.body.innerHTML;
}