《Head First HTML5 javascript》第7章表单

表单

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

<!-- Form which will send a GET request to the current URL -->
<form><label>Name:<input name="submitted-name" autocomplete="name"></label><button>Save</button>
</form><!-- Form which will send a POST request to the current URL -->
<form method="post"><label>Name:<input name="submitted-name" autocomplete="name"></label><button>Save</button>
</form><!-- Form with fieldset, legend, and label -->
<form method="post"><fieldset><legend>Title</legend><label><input type="radio" name="radio"> Select me</label></fieldset>
</form>

[name]表单的名称。HTML 4 中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。
[action]处理表单提交的 URL。这个值可被 [<button>]、[<input type="submit">] 或 [<input type="image">]元素上的 [formaction]属性覆盖。
[method]浏览器使用这种 HTTP 方式来提交表单。可能的值有：

• post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。 • get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用时使用这个方法。 • dialog：如果表单在 [<dialog>]元素中，提交时关闭对话框。此值可以被 [<button>]、[<input type="submit">]或 [<input type="image">]元素中的 [formmethod]属性覆盖。

事件

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

const btn = document.querySelector('button');function random(number) {return Math.floor(Math.random()*(number+1));
}btn.onclick = function() {const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
}

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

onfocus 文档获得焦点时调用的函数。
onblur 文档失去焦点时调用的函数，适合触发数据验证。
onchange 检测 <select>菜单中选择的值何时更改，不可用于验证空域。
按键
1. onkeypress 通俗意义上的按下按钮 (按下并松开)。
2. onkeyup 按键动作的一部分，松开。
3. onkeydown 按键动作的一部分，按下。

innerHTML

innerHTML 设置或获取 HTML 语法表示的元素的后代，可以用来检查当前页面自最初加载到当前的 HTML 源码的变化。

const content = element.innerHTML;
element.innerHTML = htmlString;

设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。举个例子来说，你可以通过文档 [body]属性删除 body 的全部内容。

document.body.innerHTML = "";

下面这个例子，首先获取文档当前的 HTML 标记并替换 "<"字符为 HTML 实体 "<" ，从本质上来看，它是将 HTML 转换成原始文本，将其包裹在 [<pre>]元素中。然后 innerHTML的值被替换成新的字符串。最后，文档的内容被替换为页面显示源码。

document.documentElement.innerHTML = "<pre>" +document.documentElement.innerHTML.replace(/</g,"&lt;") +"</pre>";

当给 innerHTML 设置一个值的时候到底发生了什么？用户代理按照以下步骤：

给定的值被解析为 HTML 或者 XML（取决于文档类型），结果就是 [DocumentFragment]对象代表元素新设置的 DOM 节点。
如果元素内容被替换成 [<template>]元素，<template> 元素的 [content]属性会被替换为步骤 1 中创建的新的 DocumentFragment。
对于其他所有元素，元素的内容都被替换为新的 DocumentFragment 节点。

用 innerHTML插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介，从而产生潜在的安全风险问题。基于这个原因，当插入纯文本时，建议不要使用 innerHTML。取而代之的是使用 [Node.textContent] ，它不会把给定的内容解析为 HTML，它仅仅是将原始文本插入给定的位置。

正则表达式

正则表达式用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。使用一个正则表达式字面量，其由包含在斜杠之间的模式组成，如下所示：

var re = /ab+c/;

脚本加载后，正则表达式字面量就会被编译。当正则表达式保持不变时，使用此方法可获得更好的性能。

或者调用[RegExp]对象的构造函数，如下所示：

var re = new RegExp("ab+c");

在脚本运行过程中，用构造函数创建的正则表达式会被编译。如果正则表达式将会改变，或者它将会从用户输入等来源中动态地产生，就需要使用构造函数来创建正则表达式。

编写一个正则表达式的模式

使用简单模式

简单模式是由你想直接找到的字符构成。比如，/abc/ 这个模式就能且仅能匹配 "abc" 字符按照顺序同时出现的情况。例如在 "Hi, do you know your abc's?" 和 "The latest airplane designs evolved from slabcraft." 中会匹配成功。在上述两个例子中，匹配的子字符串是 "abc"。但是在 "Grab crab" 中会匹配失败，因为它虽然包含子字符串 "ab c"，但并不是准确的 "abc"。

使用特殊字符

当你需要匹配一个不确定的字符串时，比如寻找一个或多个 "b"，或者寻找空格，可以在模式中使用特殊字符。比如，你可以使用 /ab*c/ 去匹配一个单独的 "a" 后面跟了零个或者多个 "b"，同时后面跟着 "c" 的字符串：*的意思是前一项出现零次或者多次。在字符串 "cbbabbbbcdebc" 中，这个模式匹配了子字符串 "abbbbc"。

用到的符号

特殊字符用反斜杠"\”进行转义
1. 在非特殊字符之前的反斜杠表示下一个字符是特殊字符，不能按照字面理解。例如，前面没有 "\" 的 "b" 通常匹配小写字母 "b"，即字符会被作为字面理解，无论它出现在哪里。但如果前面加了 "\"，它将不再匹配任何字符，而是表示一个字符边界。
2. 在特殊字符之前的反斜杠表示下一个字符不是特殊字符，应该按照字面理解。
^匹配输入的开始。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。

例如，/^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。
$匹配输入的结束。如果多行标志被设置为 true，那么也匹配换行符前的位置。

例如，/t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。
*匹配前一个表达式 0 次或多次。等价于 {0,}。例如，/bo*/ 会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b'，但是在 "A goat grunted" 中不会匹配任何内容。
+匹配前面一个表达式 1 次或者多次。等价于 {1,}。例如，/a+/ 会匹配 "candy" 中的 'a' 和 "caaaaaaandy" 中所有的 'a'，但是在 "cndy" 中不会匹配任何内容。
.（小数点）默认匹配除换行符之外的任何单个字符。例如，/.n/ 将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on'，但是不会匹配 'nay'。如果 s ("dotAll") 标志位被设为 true，它也会匹配换行符。
(x)像下面的例子展示的那样，它会匹配 'x' 并且记住匹配项。其中括号被称为捕获括号。

模式 /(foo) (bar) \\1 \\2/ 中的 '(foo)' 和 '(bar)' 匹配并记住字符串 "foo bar foo bar" 中前两个单词。模式中的 \\1 和 \\2 表示第一个和第二个被捕获括号匹配的子字符串，即 foo 和 bar，匹配了原字符串中的后两个单词。注意 \\1、\\2、...、\\n 是用在正则表达式的匹配环节。而在正则表达式的替换环节，则要使用像 $1、$2、...、$n 这样的语法，例如，'bar foo'.replace(/(...) (...)/, '$2 $1')。$& 表示整个用于匹配的原字符串。
大括号
1. {n}n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。比如， /a{2}/ 不会匹配“candy”中的'a',但是会匹配“caandy”中所有的 a，以及“caaandy”中的前两个'a'。
2. {n,}n 是一个正整数，匹配前一个字符至少出现了 n 次。例如，/a{2,}/ 匹配 "aa", "aaaa" 和 "aaaaa" 但是不匹配 "a"。
3. {n,m}n 和 m 都是整数。匹配前面的字符至少 n 次，最多 m 次。如果 n 或者 m 的值是 0，这个值被忽略。例如，/a{1, 3}/ 并不匹配“cndy”中的任意字符，匹配“candy”中的 a，匹配“caandy”中的前两个 a，也匹配“caaaaaaandy”中的前三个 a。注意，当匹配”caaaaaaandy“时，匹配的值是“aaa”，即使原始的字符串中有更多的 a。
x|y中介字符匹配‘x’或者‘y’。例如，/green|red/匹配“green apple”中的‘green’和“red apple”中的‘red’
[xyz]以方括号围起的字符串，一个字符集合。匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。例如，[abcd] 和 [a-d] 是一样的。他们都匹配"brisket"中的‘b’,也都匹配“city”中的‘c’。/[a-z.]+/ 和/[\w.]+/与字符串“test.i.ng”匹配。

其他知识点：

this：与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。
```
// 在浏览器中，window 对象同时也是全局对象：
console.log(this === window); // truea = 37;
console.log(window.a); // 37this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"
```
<span>短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang 。应该在没有其他合适的语义元素时才使用它。<span> 与 [<div>] 元素很相似，但 [<div>]是一个块元素而 <span>则是行内元素 (en-US).
```
<p><span>一些文字</span></p>
```
字符串长度length：该属性返回字符串中字符编码单元的数量。JavaScript 使用 UTF-16 编码，该编码使用一个 16 比特的编码单元来表示大部分常见的字符，使用两个代码单元表示不常用的字符。因此 length 返回值可能与字符串中实际的字符数量不相同。
1. 空字符串的 length 为 0。
2. 静态属性 String.length 返回 1。
```
var x = "Mozilla";
var empty = "";console.log("Mozilla is " + x.length + " code units long");
/* "Mozilla is 7 code units long" */console.log("The empty string is has a length of " + empty.length);
/* "The empty string is has a length of 0" */
```
<script>：用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<script>元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言。
1. **[src]这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。
2. **[type]该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型; 支持的 MIME 类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作 JavaScript。如果 MIME 类型不是 JavaScript 类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。
3. **[text]和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性在节点插入到 DOM 之后，此属性被解析为可执行代码。
<link>：定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
```
<link href="main.css" rel="stylesheet">
```
在这个简单的例子中，使用了 href属性设置外部资源的路径，并设置 rel属性的值为“stylesheet”(样式表)。rel表示“关系 (relationship) ”，它可能是<link>元素其中一个关键的特性——属性值表示<link>项的链接方式与包含它的文档之间的关系。你将在我们的链接类型中看到很多不同类型的关系。

[type]这个属性被用于定义链接的内容的类型。这个属性的值应该是像 text/html，text/css 等 MIME 类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了 CSS 的 text/css

isNaN用来确定一个值是否为[NaN]。注：isNaN函数内包含一些非常有趣的规则；你也可以使用 ECMAScript 2015 中定义的 [Number.isNaN()]来判断。

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // trueisNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false// strings
isNaN("37");      // false: 可以被转换成数值 37
isNaN("37.37");   // false: 可以被转换成数值 37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC") 的结果是 123，但是 Number("123ABC") 结果是 NaN
isNaN("");        // false: 空字符串被转换成 0
isNaN(" ");       // false: 包含空格的字符串被转换成 0// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // trueisNaN("blabla")   // true: "blabla"不能转换成数值// 转换成数值失败，返回 NaN

submit类型的 [<input>]元素会渲染为按钮。当 [click]事件发生时（用户点击按钮是一个典型的点击事件），用户代理尝试提交表单到服务器。
```
<input type="submit" value="Send Request" />
```
**form.submit**用来提交表单 [<form>]。
```
document.forms["myform"].submit();
```
这个方法和触发提交表单按钮很类似，但有所不同：
- 没有引发 [submit]事件处理程序不会运行。
- 不会触发约束验证。

案例：一个可以验证数值正确性的表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form check</title><link rel="stylesheet" type="text/css" href="bannerocity.css"><script>function validateNonEmpty(inputField, helpText){if (inputField.value.length == 0){if (helpText != null)helpText.innerHTML = "please enter a value";return false;}else {if (helpText != null)helpText.innerHTML ="";return true;}}function validateLength(minLength, maxLength, inputField, helpText){if (inputField.value.length < minLength || inputField.value.length > maxLength){if (helpText != null)helpText.innerHTML = "please enter a value" + minLength + " to " + maxLength + " characters in length.";return false;}else {if (helpText != null)helpText.innerHTML ="";return true;}}function validateZIPCode(inputField,helpText){if (inputField.value.length!=5){if (helpText != null)helpText.innerHTML ="please enter exactly five digits.";return false;}else if (isNaN(inputField.value)){if (helpText != null)helpText.innerHTML ="please enter a number.";return false;}else {if (helpText != null)helpText.innerHTML ="";return true;}}function placeOrder(form){if(validateLength(1, 32, form["message"], form["message_help"]) &&validateZIPCode(form["zipcode"],form["zipcode_help"]) &&validateNonEmpty(form["date"],form["date_help"]) &&validateNonEmpty(form["name"],form["name_help"]) &&validateNonEmpty(form["phone"],form["phone_help"]) &&validateNonEmpty(form["email"],form["email_help"]) ){form.submit();}else {alert("sorry but there is something wrong with the information");}}function validateRegEX(regex, inputStr, helpText, helpMessage){if (!regex.test(inputStr)){if (helpText != null)helpText.innerHTML = helpMessage;return false;}else {if (helpText != null)helpText.innerHTML ="";return true;}}function validateDate(inputField,helpText){if (!validateNonEmpty(inputField,helpText))return false;return validateRegEX(/^(\\d{2|\\d{4}})\\/\\d{2}\\/\\d{2}$/, inputField.value, helpText, "Please enter a date(for example,2022/01/14).");}function validatePhone(inputField, helpText){if (!validateNonEmpty(inputField,helpText))return false;return validateRegEX(/^\\d{3}-\\d{3}-\\d{4}$/, inputField.value, helpText, "Please enter a date(for example,123-456-7890).");}function validateEmail(inputField, helpText){if (!validateNonEmpty(inputField,helpText))return false;return validateRegEX(/^[\\w\\.-_\\+]+@[\\w-]+(\\.\\w{2,4})+$/, inputField.value, helpText, "Please enter a date(for example,johndoe@acme.com).");}</script></head><body><div class="heading"><img id="logo" src="logo.png" alt="Bannerocity" /></div><form name="orderform" action="bannerocity.php" method="POST"><div class="field">"Enter the banner message: "<input id="message" name="message" type="text" size="40" onblur="validateLength(1, 5, this, document.getElementById('message_help'));" /><span id="message_help" class="help"></span></div><div class="field">"Enter ZIP code of the location: "<input id="zipcode" name="zipcode" type="text" size="5" onblur="validateZIPCode(this, document.getElementById('zipcode_help'));"/><span id="zipcode_help" class="help"></span></div><div class="field">"Enter the date for the message to be shown: "<input id="date" name="date" type="text" size="32" onblur="validateDate(this, document.getElementById('date_help'));"/><span id="date_help" class="help"></span></div><div class="field">Enter your name:<input id="name" name="name" type="text" size="32" onblur="validateNonEmpty(this, document.getElementById('name_help'));"/><span id="name_help" class="help"></span></div><div class="field">Enter your phone number:<input id="phone" name="phone" type="text" size="12" onblur="validatePhone(this, document.getElementById('phone_help'));"/><span id="phone_help" class="help"></span></div><div class="field">"Enter your email address:"<input id="email" name="email" type="text" size="32" onblur="validateEmail(this, document.getElementById('email_help'));"/><span id="email_help" class="help"></span></div><input type="button" value="Order Banner"  onclick="placeOrder(this.form)"/></form></body></body>
</html>