表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。
标签用来定义一个表单,所有表单内容放到这个容器元素之中。
<form>
form>
上面代码就是表单的基本形式。
下面是一个比较常见的例子。
<form action="https://example.com/api" method="post">//通过什么方式提交数据,但是大部分都是使用POST提交的
<label for="POST-name">用户名:label>
<input id="POST-name" type="text" name="user">
<input type="submit" value="提交">
form>
上面代码就是一个表单,一共包含三个控件:一个标签,一个文本输入框,一个提交按钮。其中,文本输入框的
name
属性是user
,表示将向服务器发送一个键名为user
的键值对,键值就是这个控件的value
属性,等于用户输入的值。
用户在文本输入框里面,输入用户名,比如foobar
,然后点击提交按钮,浏览器就会向服务器https://example.com/api
发送一个 POST 请求,发送user=foobar
这样一段数据。
有以下属性:
accept-charset
:服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。action
:服务器接收数据的 URL。autocomplete
:如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为off
(不自动填写)和on
(自动填写)。method
:提交数据的 HTTP 方法,可能的值有post
(表单数据作为 HTTP 数据体发送),get
(表单数据作为 URL 的查询字符串发送),dialog
(表单位于
内部使用)。enctype
:当method
属性等于post
时,该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded
(默认值),multipart/form-data
(文件上传的情况),text/plain
。name
:表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置name
属性,那么这个控件的值就不会作为键值对,向服务器发送。novalidate
:布尔属性,表单提交时是否取消验证。target
:在哪个窗口展示服务器返回的数据,可能的值有_self
(当前窗口),_blank
(新建窗口),_parent
(父窗口),_top
(顶层窗口),
标签的name
属性(即表单返回结果展示在
窗口)。
标签是一个行内元素,用来接收用户的输入。
它是一个单独使用的标签,没有结束标志。通常可以和form表单配合使用
它有多种类型,取决于type
属性的值,默认值是text
,表示一个输入框。
<input>
<input type="text">
上面代码会生成一个单行的输入框,用户可以在里面输入文本。
的属性非常多,有些属性是某个类型专用的,放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。
autofocus
:布尔属性,是否在页面加载时自动获得焦点。disabled
:布尔属性,是否禁用该控件。一旦设置,该控件将变灰,用户可以看到,但是无法操作。form
:关联表单的id
属性。设置了该属性后,控件可以放置在页面的任何位置,否则只能放在
内部。list
:关联的
的id
属性,设置该控件相关的数据列表,详见后文。name
:控件的名称,主要用于向服务器提交数据时,控件键值对的键名。注意,只有设置了name
属性的控件,才会向服务器提交,不设置就不会提交。readonly
:布尔属性,是否为只读。required
:布尔属性,是否为必填。type
:控件类型,详见下文。value
:控件的值。type
属性决定了的形式。
Type类型包括:
(1)text
**type="text"
是普通的文本输入框,用来输入单行文本。**如果用户输入换行符,换行符会自动从输入中删除。
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
text
输入框有以下配套属性。
maxlength
:可以输入的最大字符数,值为一个非负整数。minlength
:可以输入的最小字符数,值为一个非负整数,且必须小于maxlength
。pattern
:用户输入必须匹配的正则表达式,比如要求用户输入4个~8个英文字符,可以写成pattern="[a-z]{4,8}"
。如果用户输入不符合要求,浏览器会弹出提示,不会提交表单。placeholder
:输入字段为空时,用于提示的示例值。只要用户没有任何字符,该提示就会出现,否则会消失。readonly
:布尔属性,表示该输入框是只读的,用户只能看,不能输入。size
:表示输入框的显示长度有多少个字符宽,它的值是一个正整数,默认等于20。超过这个数字的字符,必须移动光标才能看到。spellcheck
:是否对用户输入启用拼写检查,可能的值为true
或false
。(2)search
**type="search"
是一个用于搜索的文本输入框,基本等同于type="text"
。**某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入。
下面是一个例子。
<form>
<input type="search" id="mySearch" name="q"
placeholder="输入搜索词……" required>
<input type="submit" value="搜索">
form>
(3)button
type="button"
是没有默认行为的按钮,通常脚本指定click
事件的监听函数来使用。
<input type="button" value="点击">
建议尽量不使用这个类型,而使用标签代替,一则语义更清晰,二则
标签内部可以插入图片或其他 HTML 代码。
(4)submit
**type="submit"
是表单的提交按钮。**用户点击这个按钮,就会把表单提交给服务器。
<input type="submit" value="提交">
如果不指定value
属性,浏览器会在提交按钮上显示默认的文字,通常是Submit
。
该类型有以下配套属性,用来覆盖标签的相应设置。
formaction
:提交表单数据的服务器 URL。formenctype
:表单数据的编码类型。formmethod
:提交表单使用的 HTTP 方法(get
或post
)。formnovalidate
:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。formtarget
:收到服务器返回的数据后,在哪一个窗口显示。(5)image
type="image"
表示将一个图像文件作为提交按钮,行为和用法与type="submit"
完全一致。
<input type="image" alt="登陆" src="login-button.png">
上面代码中,图像文件是一个可以点击的按钮,点击后会提交数据到服务器。
该类型有以下配套属性。
alt
:图像无法加载时显示的替代字符串。src
:加载的图像 URL。height
:图像的显示高度,单位为像素。width
:图像的显示宽度,单位为像素。formaction
:提交表单数据的服务器 URL。formenctype
:表单数据的编码类型。formmethod
:提交表单使用的 HTTP 方法(get
或post
)。formnovalidate
:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。formtarget
:收到服务器返回的数据后,在哪一个窗口显示。用户点击图像按钮提交时,会额外提交两个参数x
和y
到服务器,表示鼠标的点击位置,比如x=52&y=55
。x
是横坐标,y
是纵坐标,都以图像左上角作为原点(0, 0)
。如果图像按钮设置了name
属性,比如name="position"
,那么将以该值作为坐标的前缀,比如position.x=52&position.y=55
。这个功能通常用来地图类型的操作,让服务器知道用户点击了地图的哪个部分。
(6)reset
type="reset"
是一个重置按钮,用户点击以后,所有表格控件重置为初始值。
<input type="reset" value="重置">
如果不设置value
属性,浏览器会在按钮上面加上默认文字,通常是Reset
。
这个控件用处不大,用户点错了还会使得所有已经输入的值都被重置,建议不要使用。
(7)checkbox
**type="checkbox"
是复选框**,允许选择或取消选择该选项。
<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意label>
上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中,checked
属性表示默认选中。
value
属性的默认值是on
。也就是说,如果没有设置value
属性,以上例来说,选中复选框时,会提交agreement=on
。如果没有选中,提交时不会有该项。
多个相关的复选框,可以放在里面。
<fieldset>
<legend>你的兴趣legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">编码label>
div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐label>
div>
fieldset>
上面代码中,如果用户同时选中两个复选框,提交的时候就会有两个name
属性,比如interest=coding&interest=music
。
(8)radio
**type="radio"
是单选框,表示一组选择之中,只能选中一项。**单选框通常为一个小圆圈,选中时会被填充或突出显示。
<fieldset>
<legend>性别legend>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男label>
div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女label>
div>
fieldset>
上面代码中,性别只能在两个选项之中,选择一项。
注意,多个单选框的name
属性的值,应该都是一致的。提交到服务器的就是选中的那个值。
该类型的配套属性如下。
checked
:布尔属性,表示是否默认选中当前项。value
:用户选中该项时,提交到服务器的值,默认为on
。(9)email
**type="email"
是一个只能输入电子邮箱的文本输入框。**表单提交之前,浏览器会自动验证是否符合电子邮箱的格式,如果不符合就会显示提示,无法提交到服务器。
<input type="email" pattern=".+@foobar.com" size="30" required>
上面代码会生成一个必填的文本框,只能输入后缀为foobar.com
的邮箱地址。
该类型有一个multiple
的布尔属性,一旦设置,就表示该输入框可以输入多个逗号分隔的电子邮箱。
<input id="emailAddress" type="email" multiple required>
注意,如果同时设置了multiple
属性和required
属性,零个电子邮箱是允许的,也就是该输入框允许为空。
该类型的配套属性如下。
maxlength
:可以输入的最大字符数。minlength
:可以输入的最少字符数。multiple
:布尔属性,是否允许输入多个以逗号分隔的电子邮箱。pattern
:输入必须匹配的正则表达式。placeholder
:输入为空时的显示文本。readonly
:布尔属性,该输入框是否只读。size
:一个非负整数,表示输入框的显示长度为多少个字符。spellcheck
:是否对输入内容启用拼写检查,可能的值为true
或false
。该类型还可以搭配标签,提供输入的备选项。
<input type="email" size="40" list="defaultEmails">
<datalist id="defaultEmails">
<option value="jbond007@mi6.defence.gov.uk">
<option value="jbourne@unknown.net">
<option value="nfury@shield.org">
<option value="tony@starkindustries.com">
<option value="hulk@grrrrrrrr.arg">
datalist>
上面代码中,输入焦点进入输入框以后,会显示一个下拉列表,里面有五个参考项,供用户参考。
(10)password
**type="password"
是一个密码输入框。**用户的输入会被遮挡,字符通常显示星号(*
)或点(·
)。
<input type="password" id="pass" name="password"
minlength="8" required>
浏览器对该类型输入框的显示,会有所差异。一种常见的处理方法是,用户每输入一个字符,先在输入框里面显示一秒钟,然后再遮挡该字符。
如果用户输入内容包含换行符(U+000A
)和回车符(U+000D
),浏览器会自动将这两个字符过滤掉。
该类型的配套属性如下。
maxlength
:可以输入的最大字符数。minlength
:可以输入的最少字符数。pattern
:输入必须匹配的正则表达式。placeholder
:输入为空时的显示文本。readonly
:布尔属性,该输入框是否只读。size
:一个非负整数,表示输入框的显示长度为多少个字符。autocomplete
:是否允许自动填充,可能的值有on
(允许自动填充)、off
(不允许自动填充)、current-password
(填入当前网站保存的密码)、new-password
(自动生成一个随机密码)。inputmode
:允许用户输入的数据类型,可能的值有none
(不使用系统输入法)、text
(标准文本输入)、decimal
(数字,包含小数)、numeric
(数字0-9)等。(11)file
type="file"
是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能。
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
该类型有以下属性。
accept
:允许选择的文件类型,使用逗号分隔,可以使用 MIME 类型(比如image/jpeg
),也可以使用后缀名(比如.doc
),还可以使用audio/*
(任何音频文件)、video/*
(任何视频文件)、image/*
(任何图像文件)等表示法。capture
:用于捕获图像或视频数据的源,可能的值有user
(面向用户的摄像头或麦克风),environment
(外接的摄像头或麦克风)。multiple
:布尔属性,是否允许用户选择多个文件。(12)hidden
**type="hidden"
是一个不显示在页面的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息。**比如,CSRF 攻击会伪造表单数据,那么使用这个控件,可以为每个表单生成一个独一无二的隐藏编号,防止伪造表单提交。
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
上面这个控件,页面上是看不见的。用户提交表单的时候,浏览器会将prodId=xm234jq
发给服务器。
(13)number
type="number"
是一个数字输入框,只能输入数字。浏览器通常会在输入框的最右侧,显示一个可以点击的上下箭头,点击向上箭头,数字会递增,点击向下箭头,数字会递减。
<input type="number" id="tentacles" name="tentacles"
min="10" max="100">
上面代码指定数字输入框,最小可以输入10,最大可以输入100。
该类型可以接受任何数值,包括小数和整数。可以通过step
属性,限定只接受整数。
该类型有以下配套属性。
max
:允许输入的最大数值。min
:允许输入的最小数值。placeholder
:用户输入为空时,显示的示例值。readonly
:布尔属性,表示该控件是否为只读。step
:点击向上和向下箭头时,数值每次递减的步长值。如果用户输入的值,不符合步长值的设定,浏览器会自动四舍五入到最近似的值。默认的步长值是1
,如果初始的value
属性设为1.5
,那么点击向上箭头得到2.5
,点击向下箭头得到0.5
。(14)range
type="range"
是一个滑块,用户拖动滑块,选择给定范围之中的一个数值。因为拖动产生的值是不精确的,如果需要精确数值,不建议使用这个控件。常见的例子是调节音量。
<input type="range" id="start" name="volume"
min="0" max="11">
上面代码会产生一个最小值为0
、最大值为11
的滑块区域。用户拖动滑块,选择想要的音量。
该类型的配套属性如下,用法与type="number"
一致。
max
:允许的最大值,默认为100。min
:允许的最小值,默认为0。step
:步长值,默认为1。value
属性的初始值就是滑块的默认位置。如果没有设置value
属性,滑块默认就会停在最大值和最小值中间。如果max
属性、min
属性、value
属性都没有设置,那么value
属性为50。
该类型与标签配合使用,可以在滑动区域产生刻度。
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0" label="0%">
<option value="10">
<option value="20">
<option value="30">
<option value="40">
<option value="50" label="50%">
<option value="60">
<option value="70">
<option value="80">
<option value="90">
<option value="100" label="100%">
datalist>
上面代码会在0~100之间产生11个刻度。其中,0%
、50%
和100%
三个位置会有文字提示,不过浏览器很可能不支持。
注意,浏览器生成的都是水平滑块。如果想要生成垂直滑块,可以使用 CSS 改变滑块区域的方向。
(15)url
type="url"
是一个只能输入网址的文本框。提交表单之前,浏览器会自动检查网址格式是否正确,如果不正确,就会无法提交。
<input type="url" name="url" id="url"
placeholder="https://example.com"
pattern="https://.*" size="30"
required>
上面代码的pattern
属性指定输入的网址只能使用 HTTPS 协议。
注意,该类型规定,不带有协议的网址是无效的,比如foo.com
是无效的,http://foo.com
是有效的。
该类型的配套属性如下。
maxlength
:允许的最大字符数。minlength
:允许的最少字符串。pattern
:输入内容必须匹配的正则表达式。placeholder
:输入为空时显示的示例文本。readonly
:布尔属性,表示该控件的内容是否只读。size
:一个非负整数,表示该输入框显示宽度为多少个字符。spellcheck
:是否启动拼写检查,可能的值为true
(启用)和false
(不启用)。该类型与标签搭配使用,可以形成下拉列表供用户选择。随着用户不断键入,会缩小显示范围,只显示匹配的备选项。
<input id="myURL" name="myURL" type="url"
list="defaultURLs">
<datalist id="defaultURLs">
<option value="https://developer.mozilla.org/" label="MDN Web Docs">
<option value="http://www.google.com/" label="Google">
<option value="http://www.microsoft.com/" label="Microsoft">
<option value="https://www.mozilla.org/" label="Mozilla">
<option value="http://w3.org/" label="W3C">
datalist>
上面代码中,的
label
属性表示文本标签,显示在备选下拉框的右侧,网址显示在左侧。
(16)tel
**type="tel"
是一个只能输入电话号码的输入框。**由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890small>
上面代码定义了一个只能输入10位电话号码的输入框。
该类型的配套属性如下。
maxlength
:允许的最大字符数。minlength
:允许的最少字符串。pattern
:输入内容必须匹配的正则表达式。placeholder
:输入为空时显示的示例文本。readonly
:布尔属性,表示该控件的内容是否只读。size
:一个非负整数,表示该输入框显示宽度为多少个字符。(17)color
type="color"
是一个选择颜色的控件,它的值一律都是#rrggbb
格式。
<input type="color" id="background" name="background"
value="#e66465">
上面代码在 Chrome 浏览器中,会显示一个#e66465
的色块。点击色块,就会出现一个拾色器,供用户选择颜色。
如果没有指定value
属性的初始值,默认值为#000000
(黑色)。
(18)date
type="date"
是一个只能输入日期的输入框,用户可以输入年月日,但是不能输入时分秒。输入格式是YYYY-MM-DD
。
<input type="date" id="start" name="start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31">
上面代码会显示一个输入框,默认日期是2018年7月22日。用户点击以后,会日期选择器,供用户选择新的日期。
该类型有以下配套属性。
max
:可以允许的最晚日期,格式为yyyy-MM-dd
。min
:可以允许的最早日期,格式为yyyy-MM-dd
。step
:步长值,一个数字,以天为单位。(19)time
type="time"
是一个只能输入时间的输入框,可以输入时分秒,不能输入年月日。日期格式是24小时制的hh:mm
,如果包括秒数,格式则是hh:mm:ss
。日期选择器的形式则随浏览器不同而不同。
<input type="time" id="appt" name="appt"
min="9:00" max="18:00" required>
<small>营业时间上午9点到下午6点small>
该类型有以下配套属性。
max
:允许的最晚时间。min
:允许的最早时间。readonly
:布尔属性,表示用户是否不可以编辑时间。step
:步长值,单位为秒。<input id="appt" type="time" name="appt" step="2">
上面代码中,调节控件的话,时间每次改变的幅度是2秒钟。
(20)month
type="month"
是一个只能输入年份和月份的输入框,格式为YYYY-MM
。
<input type="month" id="start" name="start"
min="2018-03" value="2018-05">
该类型有以下配套属性。
max
:允许的最晚时间,格式为yyyy-MM
。min
:允许的最早时间,格式为yyyy-MM
。readonly
:布尔属性,表示用户是否不可以编辑时间。step
:步长值,单位为月。(21)week
type="week"
是一个输入一年中第几周的输入框。格式为yyyy-Www
,比如2018-W18
表示2018年第18周。
<input type="week" name="week" id="camp-week"
min="2018-W18" max="2018-W26" required>
该类型有以下配套属性。
max
:允许的最晚时间,格式为yyyy-Www
。min
:允许的最早时间,格式为yyyy-Www
。readonly
:布尔属性,表示用户是否不可以编辑时间。step
:步长值,单位为周。(22)datetime-local
type="datetime-local"
是一个时间输入框,让用户输入年月日和时分,格式为yyyy-MM-ddThh:mm
。注意,该控件不支持秒。
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
该类型有以下配套属性。
max
:允许的最晚时间,格式为yyyy-MM-ddThh:mm
。min
:允许的最早时间,格式为yyyy-MM-ddThh:mm
。step
:步长值,单位为秒,默认值是60。
标签会生成一个可以点击的按钮,没有默认行为,通常需要用
type
属性或脚本指定按钮的功能。
<button>点击button>
上面代码会产生一个按钮,上面的文字就是“点击”。
内部不仅放置文字,还可以放置图像,这可以形成图像按钮。
<button name="search" type="submit">
<img src="search.gif">搜索
button>
具有以下属性。
autofocus
:布尔属性,表示网页加载时,焦点就在这个按钮。网页里面只能有一个元素,具有这个属性。disabled
:布尔属性,表示按钮不可用,会导致按钮变灰,不可点击。name
:按钮的名称(与value
属性配合使用),将以name=value
的形式,随表单一起提交到服务器。value
:按钮的值(与name
属性配合使用),将以name=value
的形式,随表单一起提交到服务器。type
:按钮的类型,可能的值有三种:submit
(点击后将数据提交给服务器),reset
(将所有控件的值重置为初始值),button
(没有默认行为,由脚本指定按钮的行为)。form
:指定按钮关联的
表单,值为
的id
属性。如果省略该属性,默认关联按钮所在父表单。formaction
:数据提交到服务器的目标 URL,会覆盖
元素的action
属性。formenctype
:数据提交到服务器的编码方式,会覆盖
元素的enctype
属性。可能的值有三种:application/x-www-form-urlencoded
(默认值),multipart/form-data
(只用于文件上传),text/plain
。formmethod
:数据提交到服务器使用的 HTTP 方法,会覆盖
元素的method
属性,可能的值为post
或get
。formnovalidate
:布尔属性,数据提交到服务器时关闭本地验证,会覆盖
元素的novalidate
属性。formtarget
:数据提交到服务器后,展示服务器返回数据的窗口,会覆盖
元素的target
属性。可能的值有_self
(当前窗口),_blank
(新的空窗口)、_parent
(父窗口)、_top
(顶层窗口)。
标签是一个行内元素,用于显示用户操作的结果。
<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="result">20output>
该标签有如下属性。
for
:关联控件的id
属性,表示为该控件的操作结果。form
:关联表单的id
属性。name
:控件的名称。标签用于在网页里面嵌入其他网页。
**标签生成一个指定区域,在该区域中嵌入其他网页。**它是一个容器元素,如果浏览器不支持
,就会显示内部的子元素。
<iframe src="https://www.example.com"
width="100%" height="500" frameborder="0"
allowfullscreen sandbox> //这里的sandbox可以保证安全
<p><a href="https://www.example.com">点击打开嵌入页面a>p>
iframe>
上面的代码在当前网页嵌入https://www.example.com
,显示区域的宽度是100%
,高度是500
像素。如果当前浏览器不支持,则会显示一个链接,让用户点击。
浏览器普遍支持,所以内部的子元素可以不写。
的属性如下。
allowfullscreen
:允许嵌入的网页全屏显示,需要全屏 API 的支持,请参考相关的 JavaScript 教程。frameborder
:是否绘制边框,0
为不绘制,1
为绘制(默认值)。建议尽量少用这个属性,而是在 CSS 里面设置样式。src
:嵌入的网页的 URL。width
:显示区域的宽度。height
:显示区域的高度。sandbox
:设置嵌入的网页的权限,详见下文。importance
:浏览器下载嵌入的网页的优先级,可以设置三个值。high
表示高优先级,low
表示低优先级,auto
表示由浏览器自行决定。name
:内嵌窗口的名称,可以用于
、
、
的target
属性。referrerpolicy
:请求嵌入网页时,HTTP 请求的Referer
字段的设置。参见
标签的介绍。嵌入的网页默认具有正常权限,比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面,你不了解对方会执行什么操作,因此就存在安全风险。
为了限制的风险,HTML 提供了
sandbox
属性,允许设置嵌入的网页的权限,等同于提供了一个隔离层,即“沙箱”。
sandbox
可以当作布尔属性使用,表示打开所有限制。
<iframe src="https://www.example.com" sandbox>
iframe>
sandbox
属性可以设置具体的值,表示逐项打开限制。未设置某一项,就表示不具有该权限。
allow-forms
:允许提交表单。allow-modals
:允许提示框,即允许执行window.alert()
等会产生弹出提示框的 JavaScript 方法。allow-popups
:允许嵌入的网页使用window.open()
方法弹出窗口。allow-popups-to-escape-sandbox
:允许弹出窗口不受沙箱的限制。allow-orientation-lock
:允许嵌入的网页用脚本锁定屏幕的方向,即横屏或竖屏。allow-pointer-lock
:允许嵌入的网页使用 Pointer Lock API,锁定鼠标的移动。allow-presentation
:允许嵌入的网页使用 Presentation API。allow-same-origin
:不打开该项限制,将使得所有加载的网页都视为跨域。allow-scripts
:允许嵌入的网页运行脚本(但不创建弹出窗口)。allow-storage-access-by-user-activation
:sandbox
属性同时设置了这个值和allow-same-origin
的情况下,允许
嵌入的第三方网页通过用户发起document.requestStorageAccess()
请求,经由 Storage Access API 访问父窗口的 Cookie。allow-top-navigation
:允许嵌入的网页对顶级窗口进行导航。allow-top-navigation-by-user-activation
:允许嵌入的网页对顶级窗口进行导航,但必须由用户激活。allow-downloads-without-user-activation
:允许在没有用户激活的情况下,嵌入的网页启动下载。注意,不要同时设置allow-scripts
和allow-same-origin
属性,这将使得嵌入的网页可以改变或删除sandbox
属性。
sandbox是Web开发中的一个重要安全机制,它允许我们在一个沙盒环境中执行不信任的代码,从而提高应用程序的安全性。
具体来说,sandbox可以通过以下方式增强Web应用程序的安全性:
指定的网页会立即加载,有时这不是希望的行为。
滚动进入视口以后再加载,这样会比较节省带宽。
loading
属性可以触发网页的懒加载。
该属性可以取以下三个值:
auto
:浏览器的默认行为,与不使用loading
属性效果相同。lazy
:
的懒加载,即将滚动进入视口时开始加载。eager
:立即加载资源,无论在页面上的位置如何。<iframe src="https://example.com" loading="lazy">iframe>
上面代码会启用的懒加载。
有一点需要注意,如果是隐藏的,则
loading
属性无效,将会立即加载。只要满足以下任一个条件,Chrome 浏览器就会认为是隐藏的。
的宽度和高度为4像素或更小。
- 样式设为
display: none
或visibility: hidden
。- 使用定位坐标为负
X
或负Y
,将