关于前端: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;
}