• 《Head First HTML5 javascript》第7章 表单

    表单

    表单HTML 

     元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

    1. <!-- Form which will send a GET request to the current URL -->
    2. <form>
    3.   <label>Name:
    4.     <input name="submitted-name" autocomplete="name">
    5.   </label>
    6.   <button>Save</button>
    7. </form>
    8.  
    9. <!-- Form which will send a POST request to the current URL -->
    10. <form method="post">
    11.   <label>Name:
    12.     <input name="submitted-name" autocomplete="name">
    13.   </label>
    14.   <button>Save</button>
    15. </form>
    16.  
    17. <!-- Form with fieldset, legend, and label -->
    18. <form method="post">
    19.   <fieldset>
    20.     <legend>Title</legend>
    21.     <label><input type="radio" name="radio"> Select me</label>
    22.   </fieldset>
    23. </form>

    1. [name]表单的名称。HTML 4 中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。

    2. [action]处理表单提交的 URL。这个值可被 [

    3. [method]浏览器使用这种 HTTP 方式来提交 表单。可能的值有：

      • post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。 • get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用 时使用这个方法。 • dialog：如果表单在 [

      ]元素中，提交时关闭对话框。此值可以被 [

    事件

    事件是在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要可以某种方式对事件做出回应。在 Web 中，事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。

    1. const btn = document.querySelector('button');
    2.  
    3. function random(number) {
    4.   return Math.floor(Math.random()*(number+1));
    5. }
    6.  
    7. btn.onclick = function() {
    8.   const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
    9.   document.body.style.backgroundColor = rndCol;
    10. }

    每个可用的事件都会有一个**事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器**。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

    1. onfocus 文档获得焦点时调用的函数。
    2. onblur 文档失去焦点时调用的函数，适合触发数据验证。
    3. onchange 检测