搜索
首页web前端html教程html中表格form相关的知识讲解(代码示例)

本篇文章给大家带来的内容是关于html中表格form相关的知识讲解(代码示例) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在新建浏览器窗口中打开链接

3499910bf9dac5ae3c52d5ede7383485标签在默认的情况下,链接的网页是在当前浏览器窗口中打开,有时候我们需要在新的浏览器窗口中打开

<a href="目标网址" target="_blank">新的浏览器窗口打开</a>

mailto

3499910bf9dac5ae3c52d5ede7383485标签还有一个作用是可以连接Email地址,使用mailto能让访问者便捷向网站管理者发电子邮件

mailto    邮箱地址,浏览器会自动调用默认的客户端电子邮件程序(如OutLock),并在收件人框中自动填上收件人的地址。

cc=        抄送地址,在收件人地址后用cc=地址,可以填写抄送地址。

bcc=     密件抄送地址,在收件人地址后用bcc=地址,可以填上密件抄送地址

          多个收件人、抄送、密件抄送人,用分号隔开多个收件人的地址,可以实现发送给多个收件人功能

subject= 邮件主题,用subject=添加邮件主题

body     邮件内容,用body=添加邮件的内容

如果mailto后面同时有多个参数的话,第一个参数必须以"?"开头,后面的参数每一个都以"&"分隔。

<a href="mailto:123456@qq.com">发送</a>
<a href="mailto:123456@qq.com?cc=123456@qq.com">发送</a>
<a href="mainto:123456@qq.com?bcc=654321@qq.com">发送</a>
<a href="mailto:123456@qq.com;654321@qq.com">发送</a>
<a href="mailto:123456@qq.com?subject=发送电子邮件">发送</a>
<a href="mailto:123456@qq.com?body=欢迎来到HTML代码世界">发送</a>

form

使用HTML表单(form)与用户进行交互。表单是可以把浏览器输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

ff9c23ada1bcecdd1a0fb5d5a0f18437:ff9c23ada1bcecdd1a0fb5d5a0f18437标签是成对出现的,ff9c23ada1bcecdd1a0fb5d5a0f18437开始,f5a47148e367a6035fd7a2faa965022e结束

action:浏览器输入的数据被传送到的地方

method:数据传送的方式(get/post)

注意:所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e标签之间(否则用户输入的信息可提交不到服务器上)

<form method="传送方式" action="服务器文件">
<form method="post" action="save.php">
    <label for = "username">用户名:</label>
    <input type = "text" name="username" />
    <input for = "pass">密码:</label>
    <input type = "password" name="pass">

form表单中的label标签

label标签的作用是为鼠标用户改进了可用性。如果在label标签内点击文本,就会触发此控件。就是说当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关联的表单控件上)。

注意:标签的for属性中的值应当与控件的id属性值一定要相同。

<label for="控件id名称">

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。

type:当type="text"时,输入框为文本输入框;当type="password"时候,输入框为密码输入框。

name:为文本框命名,以备后台程序ASP、PHP使用

value:为文本输入框设置默认值。(一般起到提示作用)

<form>
    姓名:
    <input type = "text" name="myName">
    <br/>
    密码:
    <input type = "password" name="pass">
</form>

文本域

当用户需要在表单中输入大段文字时,需要用到文本输入域。

4750256ae76b6b9d804861d8f69e79d3标签是成对出现的,4750256ae76b6b9d804861d8f69e79d3开始,40587128eee8df8f03d0b607fe983014结束;

cols:多行输入域的列数;

rows:多行输入域的行数;

在4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014标签之间可以输入默认值。注意cols和rows这两个属性可用CSS样式的width和height来代替:col用width、row用height来代替。

<form method = "post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10">在这里输入内容。。。</textarea>
</form>

单选框、复选框

在HTML中有两种选择框,单选框复选框,两者的区别是单选框中的选项用户只能选择一项;复选框中用户可以任意选择多项甚至全选。

type:当type="radio"时为单选框,type="checkbox"时为复选框

value:提交数据到服务器的值

name:为控件命名

checked:当设置checked="checked"时,该选项被默认选中

注意:同一组单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的用作。

下拉列表框

<option value=&#39;提交值&#39;>选项</option>

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。

value='提交值'——>向服务器提交的值;选项——>显示的值

selected="selected"属性,则该选项就被默认选中。

下拉列表可以进行多选操作,在53ef528b06ec79ef05684370cfbe8ed2标签中设置multiple="multiple"属性,就可以实现多选功能,在window操作系统下,进行多选时按下Ctrl时同时进行单击(在Mac下使用Command+单击),可以选择多个选项。

提交按钮和重置按钮

表单中有两种按钮可以使用,分别是提交按钮,重置按钮。

提交按钮

type:只有当type值设置为submit时,按钮才有提交作用

value:按钮上显示的文字

重置按钮

type:只有当type值设置为reset时,按钮才有重置作用

value:按钮上显示的文字

<input type="submit" value="提交">
<input type="reset" value="重置">

相关推荐:

HTML ------ 关于表单 Form - Tina_xy

带你掌握HTML中table和form表单

以上是html中表格form相关的知识讲解(代码示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具