from标签，label标签

最新推荐文章于 2024-07-17 22:23:53 发布

淡若栀子花

最新推荐文章于 2024-07-17 22:23:53 发布

阅读量1.3w

点赞数 1

分类专栏： HTML 文章标签： html javascript js html5 python

本文链接：https://blog.csdn.net/m0_49019274/article/details/119656139

版权

HTML 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML中的form标签和label标签。form标签用于创建表单，它定义了数据的提交方式（GET或POST）。label标签则用于关联表单元素，提供更好的用户体验，如点击文字即可选中对应的单选按钮或复选框。了解这两个标签有助于创建更友好的网页交互形式。

摘要由CSDN通过智能技术生成

一、from标签

1.简介

常常我们使用在一个网页中数据提交标签，比如我们留言板、评论等可以填写数据，提交处理地方都需要表单标签，而form表单标签内放输入框input、单选、多选、select下拉列表、提交按钮等标签内容。

2.语法


<form action="" method="get"> </form>
或
<form action="" method="post"> </form>

Method的值为get时，是通过URL传递参数,这个时候我们通过网址URL能看见自己填写的内容。

Method的值为post时，是通过类似缓存传递参数，URL是不能看到form表单填写的内容。

对于html 表单form标签，有了form表单及提交方式（get post），才能将数据进行传输给程序处理，否则程序不能接收到将要处理的数据。

3.案例

<!DOCTYPE html>
<html>
<head>
<title>html form表单实例</title>
</head>
<body>
<form action="" method="get"> 
<input name="" type="text" size="30" /> 
<input name="" type="submit" value="提交" /> 
</form> 
</body>
</html>

二、label标签

1.简介

在表单布局中会遇到label标签的使用，label没有任何样式效果，有触发对应表单控件功能。

比如我们点击单选按钮或多选框前文字对应选项就能被选中，这个就是对文字加了label标签实现。

2.语法

<label for="man">男</label>

Label标签内文字更加需要填写

Label标签内for属性的值为自定义，一般与想实现点击会触发控件对象的ID对应相同。

3.案例


<!DOCTYPE html>
<html>
<head>
<title>html label实例</title>
</head>
<body>
<form action="" method="get">
性别：<br/>
<input name="sex" id="man" type="radio" value=""/>
<label for="man">男</label>
<input name="sex" id="woman" type="radio" value=""/>
<label for="woman">女</label> 
</form> 
</body>
</html>

注意查看，input标签内id的值与label标签内for的值对应。