HTML--4标签及简单使用（form收集用户信息--input type select-option textarea）---外加注释标签＜!-- xxx --＞

¡Venceremo

已于 2022-08-09 10:37:32 修改

阅读量364

点赞数

分类专栏： HTML 文章标签：前端

于 2022-07-13 22:33:39 首次发布

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125773517

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

表单标签：form--------是一个区域，采集用户信息 action:收集的信息给什么页面处理

表单元素：用户名文本框 text/密码文本框password(里面的内容用*显示)、密码框，按钮，复选，下拉列表、文本域

表单元素没有换行操作 name当前表单的名字是什么

表单元素：文本框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div align="center" >
		<form action="#">
			账号：<input type="text" name="1" id="1" ><br>
			密码：<input type="password" name="2" id="2">
		</form>
	</div>
</body>
</html>

表单元素：按钮（提交按钮submit、重置按钮reset）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div align="center" >
		<form action="#">
			姓名：<input type="text" name="1" id="1" >&nbsp;&nbsp;&nbsp;<input type="submit" name="3" value="提交">&nbsp;&nbsp;&nbsp;<input type="reset" name="3" value="重置">
		</form>
	</div>
</body>
</html>

表单元素：单选框（只能选择一项）radio、复选框 checkbox

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	
		<form action="#">
			性别:男<input type="radio" value="zhi" name="1" checked="checked"><!--checked="checked代表默认选中name必须相同 -->&nbsp;&nbsp;&nbsp;女<input type="radio" value="给后端" name="1" >
			<br>
			爱好：体育<input type="checkbox" value="ee" name="3" checked="checked">
			音乐<input type="checkbox" value="e" name="4">
			读书<input type="checkbox" value="e3e" name="5">
		</form>

</body>
</html>

表单元素：下拉列表使用select-option(节省空间)---也有一个默认选中的栏目

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	
		<form action="#">
			爱好：
			<select>
				<option >看手机</option>
				<option >看书</option>
				<option selected="selected">堪舆</option>
				<option >看人</option>
			</select>
		</form>

</body>
</html>

表单元素：文本域 textarea--规定当前表单有多少行的输入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	
		<form action="#">
			个人简介：<br>
			<textarea  cols="20" rows="10">
				在这里输入内容
			</textarea>
			<br>
			<input type="submit" value="确定">
			<input type="reset" value="重置">
		</form>

</body>
</html>

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML--4标签及简单使用（form收集用户信息--input type select-option textarea）---外加注释标签＜!-- xxx --＞

表单标签：form--------是一个区域，采集用户信息 action:收集的信息给什么页面处理表单元素：用户名文本框 text/密码文本框password(里面的内容用*显示)、密码框，按钮，复选，下拉列表、文本域
复制链接

扫一扫