HTML基础标签详解:form表单、input标签、output标签、button标签、iframe标签

HTML基础标签详解:form表单、input标签、output标签、button标签、iframe标签

表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。

表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。

标签用来定义一个表单,所有表单内容放到这个容器元素之中。

上面代码就是表单的基本形式。

下面是一个比较常见的例子。

//通过什么方式提交数据,但是大部分都是使用POST提交的

上面代码就是一个表单,一共包含三个控件:一个

用户在文本输入框里面,输入用户名,比如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(顶层窗口),

上面的代码在当前网页嵌入https://www.example.com,显示区域的宽度是100%,高度是500像素。如果当前浏览器不支持

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的情况下,允许

上面代码会启用