html表单pl（html表单普通按钮）

今天给各位分享html表单pl的知识，其中也会对html表单普通按钮进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、HTML 表单之label标签介绍
• 2、HTML 表单提交 的简单代码
• 3、html 表单外附加参数
• 4、如何创建HTML表格

HTML 表单之label标签介绍

转自： HTML 表单之label标签介绍

label标签介绍

label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。

label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。

主要使用场景

label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。

label标签和特定表单元素关联方式

label标签的关联方式主要有两种，显示关联和隐式关联：

显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。如：

效果图：

隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。如下：

label点击我可以使文本框获得焦点

input type='text' name='theinput' id='theinput'

/label

效果图如下，点击文字便能是文本框获得焦点：

显示关联和隐式关联的优缺点：

显式关联优点：

可以减少标签嵌套层数

label标签和表单可以在不同的位置

显示关联缺点：

控件需要定义id属性

label标签和表单控件不利于作为一个整体来控制

隐式关联优点：

控件无需定义id

标签和控件方便作为一个整体控制

隐式关联缺点：

增加了标签嵌套层数

不能将标签和关联控件放到不同的位置

以上是个人对两种方式的看法，使用时可按需要选择显示或隐式。

label标签的浏览器支持及可关联的表单元素

所有主流浏览器都支持label标签。Safari 2 或更早的版本不支持label标签。

能使用显示关联的表单元素有：

input type="text" 文本框，点击标签时关联的文本框获得焦点。

input type="checkbox" 复选框，点击标签时选中或取消选中复选框。

input type="radio" 单选框，点击标签时选中单选框。

input type="file" 文件上传，点击标签时打开文件选择对话框。

input type="password" 密码框，点击标签时密码框获得焦点。

textarea 文本域，点击标签时文本域获得焦点。

select 下拉框，点击标签时，下拉框获得焦点，不过并不展开下拉框选项。

label标签的form属性

form 属性指定label标签元素所属的表单。如下，虽然label标签在myform表单外，但仍属于myform表单。如下：

form action="" id="myform"

input type="radio" name="sex" id="male" value="male"

label for="female"女/label

input type="submit" value="提交"

/form

label for="male" form="myform"男/label

效果图如下，点击”男”同样可以选中第一个单选框

注：

该form属性已于2016年4月28日从HTML规范中删除。但是，脚本仍然可以访问只读HTMLLabelElement.form属性; 它返回标签的关联控件是成员的形式，或者null如果标签未与控件相关联或控件不是表单的一部分。

HTML 表单提交 的简单代码

1、打开Dreamweaver 编辑器，准备好一个空白的html文件，写入基本的html结构：

2、创建表单，演示中表单中设置年龄和姓名两个属性，然后创建提交按钮：

3、上方设置script标签，在里面创建js函数，函数内容为获取表单提交

3、接着打开浏览器预览效果，在表单内填入内容点击提交：

4、点击提交后，js就会把数据提交到指定位置了。以上就是HTML提交表单的操作：

html 表单外附加参数

用post传数据

form action="a.pl?a=ab=b" method="post"

...

/form

不过两种数据的接收方式不一样

a=a b=b是按照你原先get传参的一样

post的话 perl用 read(STDIN,$POST,$ENV{'CONTENT_LENGTH'})方式获得数据

这就是get post混发

如何创建HTML表格

本篇解答一下在浏览一些网站时经常会用到的一种网页元素--表单。如下图，想必大家已经再熟悉不过了，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来为大家介绍HTML表单相关的一些知识点，希望对大家有所帮助。

1)表单:帮助服务器收集客户端信息的一种机制

form action="提交到的页面" method="提交的方法"

表单控件

form

action:数据最后所提交的页面 绝对路径/相对路径

method:数据提交服务器时的提交方法 post get

2)表单控件:表单用于用户填写信息的控件

1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件

(注册时，用户名填写)

格式:

input type="text" name=""  id=""  value="" size="" placeholder=""/

type:设置控件样式 text

name:用于表单收集信息的一种标示符，也就是控件的名称

2、密码框:只是用户输入的内容看不到

input type="password" name="" id=""  size=""/

3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组

input type='radio' name="" value="" checked标示符

name:为了保证传递服务器数据只有一个，所以name值必须相同

value：是用提交服务器时，该标签被提交的数据,value不能相同;

checked:默认按钮组中的那个按钮被选中

性别:input type='radio' name="" value="" checked男

input type='radio' name="" value="" checked女

input type='radio' name="" value="" checked保密

所有表单控件name值不能相同!!!

4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个[]

格式:

input type='checkbox' name="" id="" value="" checked标示

选课:

input type='checkbox' name='classes[]' checked value='1'语文

input type='checkbox' name='classes[]'  value='2'数学

input type='checkbox' name='classes[]'  value='3'历史

input type='checkbox' name='classes[]'  value='4'政治

input type='checkbox' name='classes[]'  value='5'物理

input type='checkbox' name='classes[]'  value='6'化学

input type='checkbox' name='classes[]' checked value='7'美术

注意：一定要在name属性后面添加[]

5)下拉列表框:

格式:

select name="" 

option value="" selected下拉列表项option

option value="" 下拉列表项option

option value="" 下拉列表项option

option value="" 下拉列表项option

option value="" 下拉列表项option

select

multiple:允许用户选中多个下拉列表项

optgroup: 设置下拉分类标示

6) 文本域：可以输入多行数据的表单控件

textarea name="" id="" cols="" rows=""

内容

textarea

rows:设置文本域可以输入的行数

cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)

个人介绍:

textarea name='descs' cols="50" rows="10"

我是个学生

textarea

7)隐藏域：

input type="hidden" name = “”value =””

8)上传控件：

input type="file" name=””

9)按钮标签:

普通按钮:为js提供的控件

input type='button' name=”” value=""/

value：按钮中显示的数据和提交到服务器后该控件提交的值

input type='button' name='clicks' value="点我"/

提交按钮:点击后可以提交表单

input type='submit' name="add" value='注册'/

重置按钮:点击后可以将用户输入的数据清空

input type='reset' name='cancel' value='重置'

图片提交按钮:使用图片作为提交按钮

input type='image' src='图片地址' name=””

本文的分享就到这，感兴趣的同学可以自己试试看噢!

html表单pl的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html表单普通按钮、html表单pl的信息别忘了在本站进行查找喔。