从输入一个网址到浏览器显示页面经历的全过程

ndroid高阶开发专栏

Java高级开发进阶专栏

TCP连接的三次握手和四次挥手

一文搞懂DNS域名解析的详细流程

高并发与负载均衡：Nginx的反向代理和负载均衡

一文搞懂TCP/IP协议及Web基础知识

一文搞懂HTTP协议的核心知识点

一文掌握 HTTP协议报文包含的信息类型

一文搞懂HTTP协议返回结果的HTTP状态码

一文搞懂 HTTP协议的报文首部

作为网络专栏的开篇导文，本文概况介绍下经典案例：从输入一个网址到浏览器显示页面的全过程。

步骤概要介绍如下：

1、输入网址
2、DNS解析获取域名对应的IP地址
3、建立TCP连接
4、web浏览器向web服务器发送HTTP请求
5、服务器的永久重定向响应
6、浏览器跟踪重定向地址
7、web服务器做出应答
8、浏览器显示 HTML
9、浏览器发送请求获取其他嵌入在 HTML 中的资源
10、web服务器关闭TCP连接

1、输入网址

当在浏览器中输入网址时，浏览器其实就已在智能匹配 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。

对于 google的chrome 的浏览器，他甚至会直接从缓存中把网页展示出来，就是说，你还没有按下 enter，页面就出来了。

2、DNS解析获取域名对应的IP地址

请求一旦发起，浏览器首先要做的事情就是解析这个域名。

1、一般来说，浏览器会首先查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。
2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。
3、查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
4、根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。
5、本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
6、最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

3、建立TCP连接

在HTTP工作开始之前，web浏览器首先要通过网络与web服务器建立连接，该连接是通过TCP来完成的。

PS1：为什么要先建立TCP呢？

因为HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能进行更高层次协议的连接，因此要先建立TCP连接，一般TCP连接的端口号是80

PS2：扩展知识点：

TCP连接的三次握手和断开的四次挥手参照站内文章：TCP 三次握手和四次挥手

4、web浏览器向web服务器发送HTTP请求

建立了TCP连接之后，web浏览器就会向web服务器发起一个http请求。

一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的浏览器只能发起 GET 或者 POST 请求。

客户端向服务器发起http请求的时候，会有一些请求信息，请求信息包含三个部分：

请求方法URI协议/版本
请求头(Request Header)
请求正文：

下面是一个完整的HTTP请求例子：

GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

username=jinqiao&password=1234

4.1、请求行

请求的第一行是“方法URL议/版本”：GET/sample.jsp HTTP/1.1

4.2、请求头(Request Header)

请求头包含许多有关的客户端环境和请求正文的有用信息。例如，请求头可以声明浏览器所用的语言，请求正文的长度等。

Accept:image/gif.image/jpeg.*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding:gzip,deflate.

4.3、请求正文

请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息：

username=jinqiao&password=1234

5、服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。

为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢？其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://www.yy.com/和http://yy.com/，搜索引擎会认为它们是两个网站，结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差，当一个页面有好几个名字时，它可能会在缓存里出现好几次。

重定向原因：

1、网站调整（如改变网页目录结构）；
2、网页被移到一个新地址；
3、网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

6、浏览器跟踪重定向地址

现在浏览器知道了 "http://www.google.com/"才是要访问的正确地址，所以它会发送另一个http请求。这里没有啥好说的

7、web服务器做出应答

经过前面的步骤，服务器收到了我们的请求，也处理我们的请求，到这一步，它会把它的处理结果返回，也就是返回一个HTPP响应。

HTTP响应与HTTP请求相似，HTTP响应也由3个部分构成，分别是：

状态行
响应头(Response Header)
响应正文

HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

＜html＞
＜head＞
＜title＞http＜/title＞
＜/head＞
＜body＞
＜!-- body goes here --＞
＜/body＞
＜/html＞

7.1、状态行：

状态行由协议版本、数字形式的状态代码、及相应的状态描述，各元素之间以空格分隔。

格式: HTTP-Version Status-Code Reason-Phrase CRLF

例如: HTTP/1.1 200 OK \r\n

-- 协议版本：是用http1.0还是其他版本

-- 状态描述：状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok

-- 状态代码：状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。

状态代码具体协议定义如下：

1xx：信息性状态码，表示服务器已接收了客户端请求，客户端可继续发送请求。
100 Continue
101 Switching Protocols

2xx：成功状态码，表示服务器已成功接收到请求并进行处理。
200 OK 表示客户端请求成功
204 No Content 成功，但不返回任何实体的主体部分
206 Partial Content 成功执行了一个范围（Range）请求

3xx：重定向状态码，表示服务器要求客户端重定向。
301 Moved Permanently 永久性重定向，响应报文的Location首部应该有该资源的新URL
302 Found 临时性重定向，响应报文的Location首部给出的URL用来临时定位资源
303 See Other 请求的资源存在着另一个URI，客户端应使用GET方法定向获取请求的资源
304 Not Modified 服务器内容没有更新，可以直接读取浏览器缓存
307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET，但实际使用时并不一定，307则更多浏览器可能会遵循这一标准，但也依赖于浏览器具体实现

4xx：客户端错误状态码，表示客户端的请求有非法内容。
400 Bad Request 表示客户端请求有语法错误，不能被服务器所理解
401 Unauthonzed 表示请求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起使用
403 Forbidden 表示服务器收到请求，但是拒绝提供服务，通常会在响应正文中给出不提供服务的原因
404 Not Found 请求的资源不存在，例如，输入了错误的URL

5xx：服务器错误状态码，表示服务器未能正常处理客户端的请求而出现意外错误。
500 Internel Server Error 表示服务器发生不可预期的错误，导致无法完成客户端的请求
503 Service Unavailable 表示服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常

7.2、响应头：

响应头部：由关键字/值对组成，每行一对，关键字和值用英文冒号":"分隔。

Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

典型的响应头字段：

7.3、响应正文

包含着我们需要的一些具体信息，比如cookie，html,image，后端返回的请求数据等等。这里需要注意，响应正文和响应头之间有一行空格，表示响应头的信息到空格为止。

8、浏览器显示 HTML

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了，浏览器是如何把页面呈现在屏幕上的呢？

不同浏览器可能解析的过程不太一样，这里我们只介绍webkit的渲染过程。下图对应的就是WebKit渲染的过程，这个过程包括：

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树：

9、浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

其实这个步骤可以并列在步骤8中，在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片，CSS，JS文件等，类似于下面的链接：

图片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif

CSS式样表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css

JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等...

不像动态页面，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取，或者可以放到CDN中

10、web服务器关闭TCP连接

一般情况下，一旦web服务器向浏览器发送了请求数据后，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入这行代码：

connection:keep-alive

这样TCP连接将依然保持打开状态，浏览器可以继续通过相同的连接发送请求，保持连接，节省了为每个请求建立新连接所需要的的事件，同时节省了宽带

实际上，在HTTP 1.1 版本的新特性中有一点是：默认持久连接节省通信量，只要客户端、服务端任意一端没有明确断开TCP连接，可以发送多次HTTP请求。

版权说明：摘录到部分网络资源，如存在版权问题，请私信联系处理，谢谢！

关注头条号“编程家园”，后续陆续会有更多技术领域（包括并不限于Android进阶、Java进阶、Kotlin、网络、Flutter、Python等），以及架构、职业规划、职业思考等方面资料的免费分享，期待您的关注！

ailBee.NET Objects是一款为创建、发送、接收以及处理电子邮件而设计的健壮、功能丰富的.NET控件。几行代码便可为应用程序添加E-Mail支持，简单高效。具备“必需”以及独特的功能，这些控件帮助开发人员简单快速地将复杂的电子邮件功能添加到他们的应用程序中。

本文主要介绍了在桌面应用程序中显示HTML/纯文本邮件的代码示例。目前MailBee.NET Objects在线订购享75折优惠正在进行中，欢迎您下载试用版进行运用！

如果你需要在桌面应用程序中以纯文本控件（如Memo）显示HTML消息，则应将HTML文本转换为纯文本。

C＃
msg.Parser.HtmlToPlainMode = HtmlToPlainAutoConvert.IfNoPlain;
VB.NET
msg.Parser.HtmlToPlainMode = HtmlToPlainAutoConvert.IfNoPlain

上面的代码将邮件转换为纯文本。然后你可以显示如下的纯文本正文（假设textBox1是表单上的文本控件）：

TML 中使用 <input> 元素表示单行输入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中对应的是 HTMLInputElement 类型。HTMLInputElement 继承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 类型有一些独有的属性和方法：

name：表示 <input> 元素的名称。
disabled：表示 <input> 元素是否禁止使用。在表单提交时不会包含被禁止的 <input> 元素。
autofocus：表示页面加载时，该元素是否会自动获得焦点。
required：表示表单提交时，该 <input>元素是否为必填。
value：表示该 <input> 元素的值。
validity：返回一个 ValidityState 对象，表示 <input> 元素的校验状态。是只读属性。
validationMessage：表示 <input> 元素校验失败时，用户看到的报错信息。如果该元素不需要校验，或者通过校验，该属性为空字符串。是只读属性。
willValidate：表示表单提交时，<input> 元素是否会被校验。是只读属性。
select()：选中 <input> 元素内部的所有文本。
click()：模拟鼠标点击当前的 <input> 元素。

而在上述介绍 HTMLInputElement 类型中的属性时，type 属性要特别关注一下，因为根据 type 属性的改变，可以改变<input>的属性。

类型	描述
text	文本输入
password	密码输入
submit	表单数据提交
button	按钮
radio	单选框
checkbox	复选框
file	文件
hidden	隐藏的字段
image	定义图像作为提交按钮
reset	重置按钮

省略 type 属性与 type="text"效果一样， <input> 元素显示为文本框。

当 type 的值为text/password/number/时，会有以下属性对 <input> 元素有效。

属性	类型	描述
autocomplete	string	字符串on或off，表示<input>元素的输入内容可以被浏览器自动补全。
maxLength	long	指定<input>元素允许的最多字符数。
size	unsigned long	表示<input>元素的宽度，这个宽度是以字符数来计量的。
pattern	string	表示<input>元素的值应该满足的正则表达式
placeholder	string	表示<input>元素的占位符，作为对元素的提示。
readOnly	boolean	表示用户是否可以修改<input>的值。
min	string	表示<input>元素的最小数值或日期。
max	string	表示<input>元素的最大数值或日期。
selectionStart	unsigned long	表示选中文本的起始位置。如果没有选中文本，返回光标在<input>元素内部的位置。
selectionEnd	unsigned long	表示选中文本的结束位置。如果没有选中文本，返回光标在<input>元素内部的位置。
selectionDirection	string	表示选中文本的方向。可能的值包括forward、backward、none。

下面创建一个 type="text" ，一次显示 25 个字符，但最多允许显示 50 个字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中对应的是 HTMLTextAreaElement 类型。HTMLTextAreaElement类型继承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 类型有一些独有的属性和方法：

form：只读属性，返回对父表单元素的引用。如果此元素未包含在表单元素中，则它可以是同一文档中 id 属性同 form 值的 <form> 元素，如果没有，该值为 null。
type：只读属性，返回字符串textarea。
value：string类型，返回/设置控件中包含的原始值。
textLength：只读属性，long类型，返回<textarea>元素的value值的长度。与 value.length 相同。
defaultValue：string类型，返回/设置textarea元素的默认值。
placeholder：string类型，返回/设置 textarea 元素的占位符，作为对输入内容的提示。
rows：unsigned long类型，返回/设置textarea元素的可见文本行数。
cols：unsigned long类型，返回/设置 textarea 元素的可见宽度。
autofocus：boolean类型，返回/设置textarea元素在页面加载时自动获取焦点。
name：返回/设置 textarea 元素的名称。
disabled：boolean类型，返回/设置 textarea 元素是否应当被禁用。
HTMLTextAreaElement.labels：NodeList类型，返回与此select元素关联的标签元素列表。
maxLength：long类型，返回/设置元素可以输入的最大字符数。仅在值更改时才评估此约束。
minLength：long类型，返回/设置元素可以输入的最小字符数。仅在值更改时才评估此约束。
accessKey：boolean类型，返回/设置访问 textarea 的键盘快捷键。
readOnly：boolean类型，返回/设置 textarea 元素是否为只读。
required：boolean 类型，返回/设置 textarea 元素是否为必填项。
tabIndex：long类型，返回/设置 textarea 元素的 tab 键导航顺序中元素的位置。

下面创建一个高度为 25，宽度为 5 的 <textarea> 多行文本框。它与 <input> 不同的是，初始值显示在 <textarea>...</textarea> 之间：

<textarea rows="25" cols="5">initial value</textarea>

注意：处理文本框值的时候最好不要使用 DOM 方法，而应该使用 value 属性。

选择文本

<input> 与 <textarea> 都支持 select() 方法，该方法用于选中文本框中的所有内容。该方法的语法为：

select(): void

下面看一个示例：

let textbox = document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框获得焦点时，选中文本框的内容：

textbox.addEventListener("focus", (event) => {
    event.target.select();
});

select 事件

当选中文本框中的文本或使用 select() 方法时，会触发 select 事件。

let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
    console.log(`Text selected: ${textbox.value}`);
});

取得选中的文本

HTML5 对 select 事件进行了扩展，通过 selectionStart 和 selectionEnd 属性获取文本选区的起点偏移量和终点偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持这两个属性。

选中部分文本

HTML5 提供了 setSelectionRange() 方法用于选中部分文本：

setSelectionRange(start, end, direction): void;

start：被选中的第一个字符的位置索引，从 0 开始。如果这个值比元素的 value 长度还大，则会被看做 value 最后一个位置的索引。
end：被选中的最后一个字符的下一个位置索引。如果这个值比元素的 value 长度还大，则会被看做 value 最后一个位置的索引。
direction：该参数是可选的字符串类型，表示选择方向，可以传入 “forward”/“backward”/“none” 三个值。

下面看一个例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">选中部分文本</button>
<script>
    function selectText() {
        let input = document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到选中效果，必须让文本框获得焦点。

输入过滤

不同文本框经常需要保证输入特定类型或格式的数据，或许数据需要包含特定字符或必须匹配某个特定模式。而文本框并未提供验证功能，因此要配合 JavaScript 脚本实现输入过滤功能。

屏蔽字符

有些输入框需要出现或不出现特定字符。如果想要将输入框变成只读的，只需要使用 preventDefault()方法将按键都屏蔽：

input.addEventListener("keypress", (event) => {
    event.preventDefault();
});

而要屏蔽特定字符，就需要检查事件的 charCode 属性。如下所示，使用正则表达式实现只允许输入数字的输入框：

input.addEventListener("keypress", (event) => {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

还有一个问题需要处理：复制、粘贴及涉及Ctrl 键的其他功能。在除IE 外的所有浏览器中，前面代码会屏蔽快捷键Ctrl+C、Ctrl+V 及其他使用Ctrl 的组合键。因此，最后一项检测是确保没有按下Ctrl键，如下面的例子所示：

textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否允许在文本框中输入某些字符。

处理剪贴板

IE 是第一个实现了剪切板相关的事件以及通过JavaScript访问剪切板数据的浏览器，其它浏览器在后来也都支持了相同的事件和剪切板的访问，后来 HTML5 将其纳入了规范。以下是与剪切板相关的 6 个事件：

beforecopy：发生复制操作前触发。
copy：发生复制操作时触发。
beforecut：发生剪切操作前触发。
cut：发生剪切操作时触发。
beforepaste：发生粘贴操作前触发。
paste：发生粘贴操作时触发。

剪切板事件的行为及相关对象会因浏览器而异。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜单时触发，但 IE 不仅在这种情况下触发，也会在 copy、cut 和 paste 事件在所有浏览器中都会按预期触发。

在实际的事件发生之前，通过beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改数据。不过，取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作，必须取消 copy、cut和 paste 事件。

剪贴板的数据通过 clipboardData 对象来获取，且clipboardData 对象提供 3 个操作数据的方法：

getData(format)：从剪贴板获取指定格式的数据，接收的参数为指定获取的数据格式，如果没有指定数据格式或指定数据格式不存在，则此方法返回一个空字符串。
setData(format, data)：给剪贴板赋予指定格式的数据，第一个参数指定数据格式，第二个参数为第一个参数赋予数据。如果指定数据格式不存在，则将其添加到数据存储的末尾；如果指定数据格式存在，则将数据替换在指定数据格式的位置。
clearData(format)：删除指定格式的数据，接收的参数为指定要删除的数据格式，如果指定格式不存在，则此方法不执行任何操作；如果此参数为空字符串或未提供，则将删除所有格式的数据。

而 clipboardData 对象在 IE 中使用 window 获取，在 Firefox、Safari 和 Chrome 中使用 event 获取。为防止未经授权访问剪贴板，只能在剪贴板事件期间访问 clipboardData 对象；IE 会在任何时候都暴露 clipboardData 对象。因此，要兼容两者，最好在剪贴板事件期间使用该对象。

function getClipboardText(event){
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有数字，那剪贴时，就需要使用paste事件检查剪贴板上的文本是否无效。如果无效，可以取消默认行为：

input.addEventListener("paste", (event) => {
    let text = getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允许在onpaste事件中访问getData()方法。

自动切换

在 JavaScript 中，可以用在当前字段完成时自动切换到下一个字段的方式来增强表单字段的易用性。比如，常用手机号分为国家好加手机号。因此，我们设置 2 个文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

当文本框输入到最大允许字符数后，就把焦点移到下一个文本框，这样可以增加表单的易用性并加速数据输入。如下所示：

<script>
    function tabForward(event){
        let target = event.target;
        if (target.value.length == target.maxLength){
            let form = target.form;
            for (let i = 0, len = form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]) {
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    let inputIds = ["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox = document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

这里，tabForward() 函数通过比较用户输入文本的长度与 maxLength 属性的值来检测输入是否达到了最大长度。如果两者相等，就通过循环表中的元素集合找到当前文本框，并把焦点设置到下一个元素。

注意：上面的代码只适用于之前既定的标记，没有考虑可能存在的隐藏字段。

HTML5

HTML5 新增了一些表单提交前，浏览器会基于指定的规则进行验证，并在出错时显示适当的错误信息。而验证会基于某些条件应用到表单字段中。

必填字段

表单字段中添加 required 属性，用于标注该字段是必填项，不填则无法提交。该属性适用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填项：

let isRequired = document.forms[0].elements["account"].required;

也可以检测浏览器是否支持 required 属性：

let isRequiredSupported = "required" in document.createElement("input");

注意：不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框，而Safari 什么也不做，也不会阻止提交表单。

数值范围

而上面介绍的几个如 number/range/datetime/datetime-local/date/month/week/time 几个填写数字的类型，都可以指定 min/max/step 等几个与数值有关的属性。step 属性用于规定合法数字间隔，如 step="2"，则合法数字应该为 0、2、4、6，依次类推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能输入从 0 到 100 中 5 的倍数。

也可以使用 stepUp() 和 stepDown() 方法对 <input> 元素中的值进行加减，它俩会接收一个可选参数，用于表示加减的数值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 减1
input.stepDown(10); // 减10

输入模式

HTML5 还为文本添加了 pattern 属性，用于指定一个正则表达式。这样就可以自己设置 <input> 元素的输入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的开头和末尾分别假设有^和$。这意味着输入内容必须从头到尾都严格与模式匹配。

与新增的输入类型一样，指定 pattern 属性也不会阻止用户输入无效内容。模式会应用到值，然后浏览器会知道值是否有效。通过访问 pattern 属性可以读取模式：

let pattern = document.forms[0].elements["count"].pattern;

使用如下代码可以检测浏览器是否支持pattern 属性：

let isPatternSupported = "pattern" in document.createElement("input");

检测有效性

HTML5 新增了 checkValidity() 方法，用来检测表单中任意给定字段是否有效。而判断的条件是约束条件，因此必填字段如果没有值会被视为无效，字段值不匹配 pattern 属性也会被视为无效。如下所示：

if (document.forms[0].elements[0].checkValidity()){
    // 字段有效，继续
} else {
    // 字段无效
}

要检查整个表单是否有效，可以直接在表单上调用checkValidity()方法。这个方法会在所有字段都有效时返回true，有一个字段无效就会返回false：

if(document.forms[0].checkValidity()){
    // 表单有效，继续
} else {
    // 表单无效
}

validity 属性会返回一个ValidityState 对象，表示 <input> 元素的校验状态。返回的对象包含一些列的布尔值的属性：

customError：如果设置了 setCustomValidity() 就返回 true，否则返回false。
patternMismatch：如果字段值不匹配指定的 pattern 属性则返回true。
rangeOverflow：如果字段值大于 max 的值则返回true。
rangeUnderflow：如果字段值小于 min 的值则返回true。
stepMisMatch：如果字段值与 min、max 和 step 的值不相符则返回true。
tooLong：如果字段值的长度超过了 maxlength 属性指定的值则返回true。
typeMismatch：如果字段值不是 "email" 或"url" 要求的格式则返回true。
valid：如果其他所有属性的值都为false 则返回true。与checkValidity()的条件一致。
valueMissing：如果字段是必填的但没有值则返回true。

因此，通过 validity 属性可以检查表单字段的有效性，从而获取更具体的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("请指定值.")
    } else if (input.validity.typeMismatch){
        console.log("请指定电子邮件地址.");
    } else {
        console.log("值无效.");
    }
}

禁用验证

通过指定 novalidate 属性可以禁止对表单进行任何验证：

<form method="post" action="/signup" novalidate>
    <!-- 表单元素 -->
</form>

也可以在 JavaScript 通过 noValidate 属性设置，为 true 表示属性存在，为 false 表示属性不存在：

document.forms[0].noValidate = true; // 关闭验证

如果一个表单中有多个提交按钮，那么可以给特定的提交按钮添加formnovalidate 属性，指定通过该按钮无需验证即可提交表单：

<form method="post" action="/foo">
    <!-- 表单元素 -->
    <input type="submit" value="注册提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="没有验证的提交按钮">
</form>

也可以使用 JavaScript 设置 formNoValidate 属性：

// 关闭验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

总结

以上总结了 <input> 和 <textarea> 两个元素的一些功能，主要是 <input> 元素可以通过设置 type 属性获取不同类型的输入框，可以通过监听键盘事件并检测要插入的字符来控制文本框的内容。

还有一些与剪贴板相关的事件，并对剪贴的内容进行检测。还介绍了一些 HTML5 新增的属性和方法和新增的更多的 <input> 元素的类型，和一些与验证相关的属性和方法。

在线咨询

上一篇：一篇文章带你了解CSS 文本样式
下一篇：js 截取字符串

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

类型	描述
number	数字值的输入
date	日期输入
color	颜色输入
range	一定范围内的值的输入
month	允许用户选择月份和年份
week	允许用户选择周和年份
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）
email	电子邮件地址的输入
search	搜索（表现类似常规文本）
tel	电话号码的输入
url	URL地址的输入

整合营销服务商