学生做网站期末作业,浙江做铁塔的公司网站,各大网站下载,e龙岩服务平台HTML 表单
HTML 表单用于收集用户的输入信息#xff0c;是一个包含表单元素的区域
HTML 表单表示文档中的一个区域#xff0c;此区域包含交互控件#xff0c;将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。 …HTML 表单
HTML 表单用于收集用户的输入信息是一个包含表单元素的区域
HTML 表单表示文档中的一个区域此区域包含交互控件将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
常用属性
form 元素用于创建表单action 属性定义了表单数据提交的目标 URLmethod 属性定义了提交数据的 HTTP 方法这里使用的是 post。
label 元素用于为表单元素添加标签提高可访问性。
input 元素是最常用的表单元素之一它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型id 属性用于关联 label 元素name 属性用于标识表单字段。
select 元素用于创建下拉列表而 option 元素用于定义下拉列表中的选项。
接下来让我们来看看具体的例子看看这些标签该如何使用
以下实例创建了一个表单包含两个输入框
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform actionFirst name: input typetext namefirstnamebrLast name: input typetext namelastname/form
/body/html
运行结果 以下实例创建了一个表单包含一个普通输入框和一个密码输入框
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform actionUsername: input typetext nameuserbrPassword: input typepassword namepassword/form
/body/html
运行结果 接下来是一个比较完整的表单
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform action/ methodpost!-- 文本输入框 --label forname用户名:/labelinput typetext idname namename requiredbr!-- 密码输入框 --label forpassword密码:/labelinput typepassword idpassword namepassword requiredbr!-- 单选按钮 --label性别:/labelinput typeradio idmale namegender valuemale checkedlabel formale男/labelinput typeradio idfemale namegender valuefemalelabel forfemale女/labelbr!-- 复选框 --input typecheckbox idsubscribe namesubscribe checkedlabel forsubscribe订阅推送信息/labelbr!-- 下拉列表 --label forcountry国家:/labelselect idcountry namecountryoption valuecnCN/optionoption valueusaUSA/optionoption valueukUK/option/selectbr!-- 提交按钮 --input typesubmit value提交/form
/body/html
运行结果 HTML 表单元素
表单元素是允许用户在表单中输入内容比如文本域textarea、下拉列表select、单选框radio-buttons、复选框checkbox 等等。
我们可以使用 form 标签来创建表单
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 input。
输入类型是由 type 属性定义。
文本域Text Fields
文本域通过 input typetext 标签来设定当用户要在表单中键入字母、数字等内容时就会用到文本域。
form
First name: input typetext namefirstnamebr
Last name: input typetext namelastname
/form
密码字段
密码字段通过标签 input typepassword 来定义
form
Password: input typepassword namepwd
/form
单选按钮Radio Buttons
input typeradio 标签定义了表单的单选框选项
form action
input typeradio namesex valuemale男br
input typeradio namesex valuefemale女
/form
复选框Checkboxes
input typecheckbox 定义了复选框。
复选框可以选取一个或多个选项
form
input typecheckbox namevehicle[] valueBike我喜欢自行车br
input typecheckbox namevehicle[] valueCar我喜欢小汽车
/form
提交按钮(Submit)
input typesubmit 定义了提交按钮。
当用户单击确认按钮时表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理
form nameinput actionhtml_form_action.php methodget
Username: input typetext nameuser
input typesubmit valueSubmit
/form
运行效果 假如您在上面的文本框内键入几个字母然后点击确认按钮那么输入数据会传送到 html_form_action.php 文件该页面将显示出输入的结果。
我这里提交之后出错了我这样是直接通过本地文件系统的路径来执行一个PHP文件。浏览器默认是不允许直接从本地文件系统加载并运行PHP文件的因为PHP是一种服务器端脚本语言它需要被服务器如Apache, Nginx等解析后才能执行。
以上实例中有一个 method 属性它用于定义表单数据的提交方式可以是以下值
post指的是 HTTP POST 方法表单数据会包含在表单体内然后发送给服务器用于提交敏感数据如用户名与密码等。
get默认值指的是 HTTP GET 方法表单数据会附加在 action 属性的 URL 中并以 ?作为分隔符一般用于不敏感信息如分页等。例如https://www.runoob.com/?page1这里的 page1 就是 get 方法提交的数据。
既然说到了get,post那就再简单举个例子说一下用法吧
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- 以下表单使用 GET 请求发送数据到当前的 URLmethod 默认位 GET。 --formlabelName:input namesubmitted-name autocompletename/labelbuttonSave/button/form!-- 以下表单使用 POST 请求发送数据到当前的 URL。 --form methodpostlabelName:input namesubmitted-name autocompletename/labelbuttonSave/button/form!-- 表单使用 fieldset, legend, 和 label 标签 --form methodpostfieldsetlegendTitle/legendlabelinput typeradio nameradio Select me/label/fieldset/form
/body/html
运行结果
感觉最后这个fieldest很有意思这个会随浏览器页面的伸缩而伸缩我觉得是可以作为一个测布局的工具哈哈哈
关于表单其实还有很多特别细节以及我们意想不到的用法比如预选下拉列表创建自定义大小的文本框从表单发送电子邮件等等
HTML 框架
通过使用框架可以在同一个浏览器窗口中显示不止一个页面。
iframe标签定义一个内联的iframe
iframe语法:
iframe srcURL/iframe URL指向不同的网页
iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如80%)
iframe srcdemo_iframe.htm width200 height200/iframe
iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 0 移除iframe的边框
iframe srcdemo_iframe.htm frameborder0/iframe
使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性
iframe srcdemo_iframe.htm nameiframe_a/iframe
pa hrefhttps://www.runoob.com targetiframe_a relnoopenerRUNOOB.COM/a/p
使用 iframe 元素来显示一个链接的页面内容并通过设置链接的 target 为 iframe 的 name 属性值使得链接点击后的内容在 iframe 中加载而不是在新的浏览器标签页或窗口中打开。
iframe 的 src 属性这个属性指定了 iframe 初始加载的页面
elnoopener 属性在 a 标签中添加 relnoopener 是一个安全实践特别是当链接指向外部网站时。这个属性可以防止新窗口虽然在这个例子中是 iframe访问 window.opener 属性从而减少潜在的安全风险如跨站脚本XSS攻击。
同源策略需要注意的是由于浏览器的同源策略Same-Origin Policyiframe 中的页面可能无法与父页面包含 iframe 的页面自由通信除非这两个页面来自同一个源即协议、域名和端口都相同。
响应式设计在使用 iframe 时还需要考虑其对响应式设计的影响。iframe 可能会破坏父页面的布局特别是当 iframe 的内容大小不固定时。您可以通过 CSS 控制 iframe 的大小或者使用 JavaScript 动态调整其大小以适应内容。
这是一个非常实用的技术可以用于嵌入外部内容如社交媒体帖子、地图、视频播放器等到您的网页中同时保持用户留在您的网站上。然而使用时应注意安全性和用户体验的考量。
