web HTML 列表表单

最新推荐文章于 2024-05-22 14:25:31 发布

#眼镜&

最新推荐文章于 2024-05-22 14:25:31 发布

阅读量219

点赞数

分类专栏： Web前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_45858803/article/details/122674265

版权

Web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

图示概念

在这里插入图片描述

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>列表</title>
</head>
<body>
	<!-- 有序列表 -->
	<ol type="I">
		<li>第一套试卷
			<ol type="A">
				<li>第一大题
					<ol type="1">
						<li>第一小题</li>
						<li>第二小题</li>
					</ol>
				</li>
				<li>第二大题</li>
			</ol>
		</li>
		<li>第二套试卷</li>
		<li>第三套试卷</li>
	</ol>
</body>
</html>

图是结果

在这里插入图片描述

无序列表

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>列表</title>
</head>

<body>
	<!-- 无序列表 -->
	<ul type='disc'>
		<li>亚洲
			<ul type='square'>
				<li>中国
					<ul type='circle'>
						<li>
							上海
						</li>
						<li>深圳</li>
						<li>成都</li>
					</ul>
				</li>
				<li>日本</li>
				<li>韩国</li>
			</ul>
		</li>
		<li>欧洲</li>
		<li>北美</li>
	</ul>
</body>

</html>

图示结果

在这里插入图片描述

图示概念

在这里插入图片描述

标签表单 form 属性 action 标签 input 属性 type name value

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表单</title>
</head>
<body>
	<form action="http://www.baidu.com">
		<input type="text"><br>
		<input type="submit"><br>
		<input type="submit" value="登入"><br>
		<input type="button"><br>
		<input type="button" value="注册"><br>
		<input type="radio"><br>
	</form>
	<form action="http://www.baidu.com">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr align="center">
				<td colspan="2"><input type="submit" value="登入">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="清空"></td>
			</tr>
		</table>
	</form>
</body>
</html>

图是结果

在这里插入图片描述

用户注册表单的实现

在这里插入图片描述

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户注册的实现</title>
</head>

<body>
	<!-- 用户注册
		用户名
		姓名
		密码
		确认密码
		性别
		兴趣爱好
		学历
		简介 -->
	<form action="http://www.baidu.com" method="post">
		用户名：
		<input type="text" name="username"><br>
		密码：
		<input type="password" name="userpassword"><br>
		确认密码：
		<input type="password"><br>
		性别：
		<input type="radio" name="gender" value="women" checked>女
		<input type="radio" name="gender" value="man">男<br>
		兴趣爱好：
		<input type="checkbox" name="interest" value="smoke" checked>抽烟
		<input type="checkbox" name="interest" value="drink">喝酒
		<input type="checkbox" name="interest" value="firehair" checked>烫头<br>
		学历：
		<select name="xueli">
			<option value="gaozhong">高中</option>
			<option value="benke" selected>本科</option>
			<option value="shushi">硕士</option>
			<option value="boshi">博士</option>
		</select><br>
		简介：
		<textarea name="introduce" cols="60" rows="20"></textarea><br>
		<input type="submit" value="注册">
		<input type="reset" value="重置">
	</form>
</body>

</html>

实现结果图示

在这里插入图片描述

#眼镜&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web HTML 列表表单

图示概念有序列表 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表
复制链接

扫一扫