搜索
首页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的未来:进化和趋势HTML的未来:进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容,提升SEO和无障碍访问。2)功能化将引入新元素和属性,满足用户需求。3)模块化将支持组件化开发,提高代码复用性。

为什么HTML属性对Web开发很重要?为什么HTML属性对Web开发很重要?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior,外观和功能

Alt属性的目的是什么?为什么重要?Alt属性的目的是什么?为什么重要?May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分,用于提供图片的替代文本。1.当图片无法加载时,alt属性中的文本会显示,提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本,提高网页的SEO排名。

HTML,CSS和JavaScript:示例和实际应用HTML,CSS和JavaScript:示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是:1.HTML用于构建网页结构;2.CSS用于美化网页外观;3.JavaScript用于实现动态交互。通过标签、样式和脚本,这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性?为什么这很重要?如何在标签上设置lang属性?为什么这很重要?May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性,如。2)在多语言内容中,为不同语言部分设置lang属性,如。3)使用符合ISO639-1标准的语言代码,如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么?HTML属性的目的是什么?May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior,外观和互动,使网站互动,响应式,visalalyAppealing.AttributesLikutesLikeSlikEslikesrc,href,href,href,类,类型,类型,和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表?您如何在HTML中创建列表?May 06, 2025 am 12:01 AM

toCreateAlistinHtml,useforforunordedlistsandfororderedlists:1)forunorderedlists,wrapitemsinanduseforeachItem,RenderingeringAsabulleTedList.2)fororderedlists,useandfornumberedlists,useandfornumberedlists,casundfornumberedlists,customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动:网站结构的示例HTML行动:网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用