第二次HTML学习记录（表单标签）-CSDN博客

本文链接：https://blog.csdn.net/qq_63496723/article/details/122788852

本文详细介绍了HTML中的表单元素，包括<form>、<input>、<textarea>、<label>、<button>和<select>。通过实例展示了各种元素的属性和用途，如<input>的type属性，<textarea>的尺寸调整，<label>的标注功能，<button>的三种类型，以及<select>的下拉选项。这些元素在网页交互和数据收集方面起着关键作用。

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

表单标签

1.form

常用属性

在这里插入图片描述

2. input

input标签用于搜集用户信息

常用属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			form标签
				常用属性
					action 表单提交的地址url
					id     唯一标识
					name   名称
					target 表单提交打开方式（当前窗口）
					method 提交方式   默认是get
							get请求
							post请求
		-->
		<form action="#" method="get"id="myform">
			
			<!--
				input 元素
					type    表单元素类型
						text       文本框
						password   密码框
						radio      单选框（需要设置一组相同的name属性）
						checkbox   复选框（同上）
						button     普通按钮
						hidden     隐藏域（用来存放需要传递给服务器，但不需要显示的数据）
						file       文件域（上传文件）
						date       日期框
						submit     提交按钮
						reset      重置按钮
						image      图片按钮（提交按钮）
					value      表单元素的值
					checked    是否选中（单选框/复选框）
					disabled   是否禁用
					maxlength  允许输入的最大字符
				
			-->
			编号：<input type="hidden" name="useID" value="1"/><br />
			姓名：<input type="text" name="username" value="lihhh"/><br />
			密码：<input type="password" name="userpwd"maxlength="6"/><br />
			性别：男<input type="radio" name="usersex"value="man"checked="checked"/>
				 女<input type="radio" name="usersex"value="woman"/><br />
			爱好：唱歌<input type="checkbox" name="userhobby"value="sing"/>
			      跳舞<input type="checkbox" name="userhobby" value="dance"/>
				  说唱<input type="checkbox" name="userhobby" value="rap"disabled=" disabled"/><br />
			生日：<input type="date" name="userdata"/><br />
			头像：<input type="file" name="userhead"/><br />
			
			<input type="button" value="普通按钮" />
			<input type="reset"value="重置按钮" />
			<input type="submit" value="提交按钮" />
			<input type="image"src="./img/2.jpg" />
		</form>
	</body>
</html>

结果图（HBuilderX的内置浏览器运行结果）
在这里插入图片描述

3.textarea

定义多行文本输入控件，文本区域内可容纳无限数量的文本，可通过clos和rows属性来规定textarea的尺寸

<!--
       textarea 文本域
		   cols长度和rows宽度
-->
简介：<textarea name="remark" rows="5" rows="50">11111</textarea>

结果：
在这里插入图片描述

4.label

label标签为input元素定义标注（标记）
label元素不会呈现任何的特殊效果
label 标签的for属性与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

<label for="username">姓名：</label><input type="text" name="username" id="username" value="lihhh"/><br />

图片：
在这里插入图片描述

5.button标签

<!--
buttom按钮
					type
						button普通按钮
						submit提交按钮
						reset重置按钮
-->
<button type="button">普通按钮</button>
			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>

图片：
在这里插入图片描述

6.select

	select用于定义下拉列表

<!--select下拉选项
					<select name="">
						<option value="值">文本</option>
					</select>
					
					注：当option设置了value属性值时，提交的是value对应的值
					如果未设置value，则提交的数据是文本值
					
					常用属性
					value 设置值
					selected 设置选中状态
-->
城市：
				<select name="city"></option><!--option 后加disabled表示禁用整个下拉框（或者禁用某一个选项），multiple意为多选，加size可以控制下拉框单次可见长度 -->
					<option>请选择城市
					<option value="beijing">北京</option><br />
					<option value="shanghai">上海</option><br />
					<option value="guangzhou">广州</option><br />
					<option value="shenzhen">深圳</option><br />
				</select>