HTML表单相关的标签介绍

最新推荐文章于 2024-08-13 17:07:13 发布

"_修乄一世才华_"

最新推荐文章于 2024-08-13 17:07:13 发布

阅读量1.8k

点赞数 10

分类专栏： JavaWeb 文章标签：表单标签form 输入域标签input 文本域标签textarea div

本文链接：https://blog.csdn.net/qq_37484253/article/details/85110218

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表单相关的标签

表单标签：<form>

表单标签的主要功能：它是 把表单中的数据提交给远端的服务器。

Form标签就像一个快递盒子，用户将需要发送给服务器的数据都装在这个盒子里，点击提交按钮，然后浏览器（相当于快递员）就将数据发送给服务器。

<form> 表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内。

action属性：请求路径，确定表单提交到服务器的地址（路径）
method属性：请求方式。常用的取值：GET、POST

https://www.baidu.com/register.html?username=zhangsan&password=123&email=xxx

GET：默认值
- 提交的数据追加在请求路径上。例如：/1.html?username=jack&password=1234，数据格式k = v，追加是使用 ? 连接，之后每一对数据使用&连接
- 因为请求路径长度有限，所有GET请求提交的数据有限。
POST：
- 提交的数据不显示
- 提交的数据不再请求路径上追加（即不显示在地址栏上）

什么时候用get，什么时候用post？

从语义上来说，get的意思是获取，其侧重数据的获取，是只读操作，不会对服务器做任何更改，因此get主要用于查询数据。

而增删改操作都用post，用户的注册实际上是往数据库中插入了一条记录，因此注册需要使用post提交。

所以一般在使用表单提交数据时，都是使用post提交。

<body>
	<!--表单-->
	<form action="" method="post">
		<!--此处的内容可能被提交到服务器-->
	</form>
	<!--此处的内容在<form>标签外部，此处数据不能提交到表单-->
</body>
Ps: action：没有地址可以写一个#，代表当前页，或者不写

输入域标签：<input>

<input> 标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。
- type属性
  - text：文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符, 默认值
  - password：密码框，密码字段。该字段中的字符以黑圆显示。
  - radio：单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
  - submit：提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。因为不同项目注册需要的字段不同，需要完成的案例中没有覆盖所有的表单元素，以下属性值的使用也需要大家掌握。
  - checkbox：复选框
  - button：普通按钮，常用于与JavaScript结合使用。
  - image：图形提交按钮，通过src给按钮设置图片。
  - reset：重置按钮。将表单恢复到默认值。
  - hidden：隐藏字段. 数据会发送给服务器，但浏览器不进行显示。
  - file：文件上传组件,提供"浏览"按下可以选择需要上传文件.
name：元素（数据）名称，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
value属性：设置input标签的默认值。注意：submit和reset为按钮显示数据
size： input的宽度大小
checked属性：单选框或复选框被选中。
readonly：是否只读数据会被提交
disabled：是否可用数据不会被提交
maxlength：允许输入的最大长度

语法结构：

哪些标签需要指定value的值：

单选按钮（radio）、复选框（checkbox）、注册按钮、重置按钮、普通按钮、图片按钮需要指定死value的值。其他的输入域用户自己填写value的值！其中因为单选按钮、复选框只是被用户进行选择的，不能输入，所以value需要我们程序员自己指定。

哪些需要指定name属性：

只要数据需要提交给后台，name就必须提供name属性的值。（除了提交按钮，重置按钮）其它都需要指定name属性。

怎么让单选按钮。复选框默认选中：

给单选，或者复选框添加`checked`属性： checked=“checked”

提示：checked属性的值可以指定任意的字符串，但是一般我们给“checked”

下拉列表标签：<select>

<select> 下拉列表。可以进行单选或多选。需要使用子标签<option>指定列表项。

name属性：发送给服务器的名称
multiple属性：不写默认单选，取值为“multiple”表示多选。
size属性：多选时，可见选项的数目。
<option> 子标签：下拉列表中的一个选项（一个条目）。
- selected ：勾选当前列表项
- value ：发送给服务器的选项值。

语法结构：

<select name=”city”>

    <option value=” ”>-请选择-</option>

    <option value=”sh”>上海</option>

    <option value=”bj”>北京</option>

    … …

</select>

Ps: 一般option需要给value这个属性，如果不给，默认会把option的文本内容发送给服务器

服务器通过什么属性获取下拉列表的值：

通过select标签的name属性来指定要提交数据的名称，而值是option的value的值。

下拉列表怎么让某一个子项默认选中：

给下拉列表的子标签option 添加selected属性：selected=“selected”

提示：selected属性的值可以指定任意的字符串，但是一般我们给“selected”

下拉列表提交的数据是：

当前选中的子标签option如果指定了value属性，那么提交给后台的数据就是value属性对应的值，如果没有指定value属性，那么就是当前选中option显示的文本。

文本域标签：<textarea>

<textarea> 文本域。多行的文本输入控件。
- rows属性：文本域的行数
- cols属性：文本域的列数

语法结构：

其它标签

div & span

div、span标签它们仅仅是用来封装数据，而对数据不做任何的样式效果的设置。

什么是div ：

div就是html一个普通标签，进行区域划分。特性：独自占一行。独自不能实现复杂效果。必须结合CSS样式进行渲染。

div通常是块级元素

实际开发中：使用div + css用来对页面进行布局和划分

什么是span:

span 就是html一个普通的标签，特性：共处一行。用来对行内元素进行美化

实际开发中：使用span + css用来对数据进行样式的修饰

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			div : 没有实际性的意义，用来做区域的划分 
			 特点：独占一行
		-->
		我是div
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		
		<!--
			span : 没有实际意义，用来对元素进行美化 
			特点：共处一行
		-->
		我是span
		<span>我是span</span>
		<span>我是span</span>
		<span>我是span</span>
		<br />
		<!--
			p : 段落标签 
			特点：段落标签的上下会有空白
		-->
		我是p
		<p>我是p</p>
		<p>我是p</p>
		<p>我是p</p>

	</body>
</html>

效果：