＜form＞表单标签

最新推荐文章于 2024-07-12 17:43:38 发布
最新推荐文章于 2024-07-12 17:43:38 发布
阅读量933 收藏 4
点赞数
分类专栏： HTML从0开始
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34771938/article/details/119460102
版权
本文详细介绍了HTML中的表单元素，包括label、input、select、option和textarea的基本用法，以及常用属性如name、id、value等。示例中展示了注册表单的创建，包括文本输入、密码输入、单选按钮、复选框、下拉列表等元素，还通过表格布局实现了对齐效果。此外，还讨论了input的多种type类型及其应用场景。
摘要由CSDN通过智能技术生成

  •  标签基本结构：    

<form>
    <label>111</label>
</form>

  • 表格中常用的几种标签：

        label、input、select、option、textarea

label：为input标签定义标记信息。

input：最重要的表单元素，可以根据不同的type属性，变化为多种形态。

select：定义下拉列表。

option：定义列表中待选择的选项。

textarea：定义多行输入框（文本域）。

  • 常用的几种属性设置：

        name、id、value、checked、selected、src、onclick、disabled、multiple、action、method、placeholder

name：指定控件的名称，可重复。

id：指定标签的唯一标识。

value：收集控件需要传递的值。

checked：复选框中默认被选中的项目。

selected：列表框组默认被选中的项目。

src：图片框的图片来源。

onclick：鼠标点击事件。

disabled：表示用户不能与元素交互，即“锁死”。

multiple：允许多选（适合普通列表框）。

action：表示表单要提交到的后台程序的网址。

method：表示表单提交的方式，有get或post。

placeholder：表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值。

  • input中的几种type设置：

        text、password、checkbox、radio、button、submit、reset

text：单行文本域。

password：密码域。

checkbox：复选框。

radio：单选按钮，互斥的单选按钮应该设置它们的name为相同值。

button：创建可以点击的按钮。

submit：创建提交按钮。

reset：重置按钮。

  • 示例：

        注册表单代码示例。

<!DOCTYPE html>
<html>
<head>
	<title>表单测试</title>
</head>
<body>
	<!-- action属性代表进入后台的位置
		 method属性代表传入到后台的提交方式（post、get）
		 暂时不用
	-->
	<form action="" method="">
		<label>姓名:</label>
			<input type="text" value="yasuo" name="" id=""><br>

		<label>密码:</label>
			<input type="password" value="123" name="" id=""><br>

		<label>重复密码:</label>
			<input type="password" value="123" name="" id=""><br>

		<label>性别:</label>
			<!-- radio类型的单选框按钮，需要设置相同的name，否则可以同时选中所有按钮 -->
			<input type="radio" checked="checked" name="xb">
				<label>男</label>
			<input type="radio" name="xb">
				<label>女</label><br>

		<label>兴趣爱好:</label>
			<input type="checkbox" checked="checked" name="">
				<label>LOL</label>
			<input type="checkbox" name="">
				<label>云顶之弈</label>
			<input type="checkbox" name="">
				<label>王者荣耀</label><br>

		<label>生日:</label>
			<select>
				<option>1996</option>
				<option selected="selected">1997</option>
				<option>1998</option>
				<option>1999</option>
				<option>2000</option>
			</select>
			<label>年</label>
			<select>
				<option>1</option>
				<option selected="selected">2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
			<label>月</label>
			<select>
				<option>1</option>
				<option selected="selected">2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
			<label>日</label><br>

		<label>头像:</label>
			<img src="image/yasuo.jpg" width="50" height="50"><br>

		<input type="button" name="" value="普通按钮">
		<input type="submit" name="" value="提交按钮">
	</form>
</body>
</html>

        利用表格实现：对齐效果示例。

<!DOCTYPE html>
<html>
<head>
	<title>用户注册</title>
</head>
<body>
	<form>
		<table width="400">
			<tr>
				<td align="right">姓名：</td>
				<td><input type="text" name="" id="" value="yasuo"></td>
			</tr>
			<tr>
				<td align="right">密码：</td>
				<td><input type="password" name="" id="" value="123"></td>
			</tr>
			<tr>
				<td align="right">重复密码：</td>
				<td><input type="password" name="" id="" value="123"></td>
			</tr>
			<tr>
				<td align="right">性别：</td>
				<td>
					<input type="radio" name="xb" id=""  checked="checked">男
					<input type="radio" name="xb" id="">女
				</td>
			</tr>
			<tr>
				<td align="right">兴趣爱好：</td>
				<td>
					<input type="checkbox" name="" id="" checked="checked">LOL
					<input type="checkbox" name="" id="">云顶之弈
					<input type="checkbox" name="" id="">王者荣耀
				</td>
			</tr>
			<tr>
				<td align="right">生日：</td>
				<td>
					<select>
						<option selected="selected">1996</option>
						<option>1997</option>
					</select>年
					<select>
						<option selected="selected">1</option>
						<option>2</option>
					</select>月
					<select>
						<option>1</option>
						<option selected="selected">2</option>
					</select>日
				</td>
			</tr>
			<tr>
				<td align="right">头像：</td>
				<td><img src="image/yasuo.jpg" width="40" height="40"></td>
			</tr>
			<tr>
				<td align="center" colspan="2"><input type="submit" name="" value="注册"></td>
			</tr>
		</table>
	</form>
</body>
</html>

小豪boy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单标签
CjpYummy的博客
03-22 488
表单的组成：表单域 表单控件 提示信息 表单域是一个包含表单元素的区域。在HTML标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递，将它范围内的表单元素信息提交给服务器。 常用属性有：action 、method、name <form action=" 地址" methon="提交方式" name="表单域名称"></form> 表单控件（表单元素） 1、<input>标签用于收集用户信息 <input type="属性值
form表单标签
xun_fong的博客
05-28 6556
一、form表单标签 form标签是一个块级元素，以<form>开头，</form>结尾，它能够包含input、textarea、select等元素。 1.表单标签的属性 form表单常用属性 属性 值 说明 action URL 指定表单发送的地址; method get post 指定数据传送到服务器的方式，get会将发送的数据显示在地址栏，post就不会，单论安全而言，post安全性更高; name
前端编程之路一一form表单标签（详解）
最新发布
2401_84418883的博客
07-12 385
select是显示一个下拉列表(drop down list)出来，option是下拉列表中的项目(item)，而option的文本内容(text content)是下拉列表项目中显示到页面上的值，value是真正需要提交到服务端的值。两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在。2、name：为文本框命名，以备后台程序ASP 、PHP使用。当type="text"时，输入框为文本输入框;
表单项标签
qq_44336097的博客
11-17 231
* 表单项标签： * input：可以通过type属性值，改变元素展示的样式。 * type属性： * text:文本输入框，默认值 * placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 * password:密码输入框 * radio:单选框 * 注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选.
form表单中的label标签
aojiu2682的博客
10-11 235
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>form中的lable标签</title> </head> <bod...
HTML的form表单标签用法学习教程
12-13
表单实际上是包含表单元素的区域，在这个区域中的各种元素的输入信息最终都将通过表单提交到程序脚本中。...本节主要讲述表单和表单的元素，关于如何提交...多数情况下被用到的表单标签是输入标签（<input>）。输
怎么去掉form的高度(form不会撑出td)
12-13
加上 复制代码代码如下: <style> form{margin: 0} <...标签出现在了<table>的前面,如下: 复制代码代码如下: <form name=”test” method=”post”> <table> <tr> <td> </td> </tr> </table> </for
HTML的表单form以及form内部标签的使用
09-28
在HTML中，`<form>`标签是用来创建表单的基本元素。`<form>`标签具有两个关键属性：`action`和`method`。`action`属性指定表单数据的提交目的地，即服务器上的处理脚本或页面的URL。`method`属性定义了数据提交的...
SpringMVC表单标签使用详解
08-31
除了`form`标签，SpringMVC还提供了其他一些有用的表单标签，如`form:errors`用于显示验证错误，`form:label`用于创建标签，`form:textarea`用于创建文本区域，`form:checkbox`和`form:radio`用于创建复选框和单选...
form标签
远方水木
03-19 5823
HTML &lt;form&gt; 标签 form表单是用户可以填写信息并提交数据到服务器的控件 表单的基本语法 &lt;form action="表单提交地址" method="提交方法"&gt; ……文本框、按钮等表单元素…… &lt;/form&gt; 常用属性 name：指定表单的名字 action：指定表单提交后由服务器上哪个处理程序进行处理（提交地址为空或者为”...
form 表单标签
LSummer_的博客
11-09 617
表单 作用：表单目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。 表单控件： 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息： 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。...
表单的标签及其使用
szydqq的博客
03-09 4178
表单以及标签
＜form＞: 表单标签
qq_43256819的博客
08-27 174
表单是什么 表单用来收集信息，比如注册、登录、发送评论反馈、购买 商品等等 所有HTML表单都以一个<form>元素开始 <form action="save.php" method="post"> </form> 基本控件 单行文本框 使用type属性值被设置为text的元素可以创建单行文本框，它是一个单标签 <input type ="text"> value属性表示已经填写好的值 placeholder属性表示提示文本，将以浅色文字写在文本框中，
【HTML】form表单标签
qq_40611605的博客
01-26 163
&lt;form&gt;&lt;/form&gt;表单标签 作用：收集并提交用户数据给指定服务器 属性：         action：收集的数据提交地址也就是URL         method：收集的数据的提交方式                 get：适合小量数据，表单数据以“？”隔开拼接在URL后面，不同的键值对使用“&amp;”符号隔开，不安全。              ...
<form>表单标签元素，method设置get和post有什么区别？
03-16
<form>表单标签元素中，method属性用于指定提交表单时使用的HTTP方法。get和post是两种常见的HTTP方法。 get方法会将表单数据附加在URL的后面，以查询字符串的形式传递给服务器。这种方式适合于获取数据，但不适合提交敏感信息，因为URL可以被缓存和记录在浏览器历史记录中。 post方法会将表单数据作为HTTP请求的正文部分发送给服务器。这种方式适合于提交敏感信息，但不适合获取数据，因为浏览器不会缓存POST请求的响应。 因此，选择使用get还是post方法取决于表单所要提交的数据类型和安全性要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值