html5组织表单结构（field和legend标签的使用）

最新推荐文章于 2023-11-15 09:33:41 发布

coding sheep

最新推荐文章于 2023-11-15 09:33:41 发布

阅读量550

点赞数

分类专栏： HTML5/CSS3/JavaScript

本文链接：https://blog.csdn.net/wanyun_qian/article/details/103603246

版权

HTML5/CSS3/JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组织表单结构</title>
</head>
<body>
	<h1>网站小调查</h1>
	<form action="#" class="form1">
		<fieldset class="fld1">
			<legend>个人信息</legend>
			<p>姓名</label><input id="name"></p>
			<p>地址</label><input id="address"></p>
			<p>性别</label>
				<select id="sex">
					<!-- select标签产生选项 -->
					<option value="female">女</option>
					<option value="male">男</option>
				</select>
			</p>
		</fieldset>
		<hr>
		<!-- 产生一条水平线 -->
		<fieldset class="fld2">
			<legend>其他信息</legend>

			<fieldset>
				<legend>你喜欢什么运动？</legend>
				<p><input id="football" type="checkbox" name="yundong">足球</p>
				<p><input id="basketball" type="checkbox" name="yundong">篮球</p>
				<p><input id="tabletennis" type="checkbox" name="yundong">乒乓球</p>
			</fieldset>

			<fieldset>
				<legend>请写下你的建议？</legend>
				<textarea id="comments" rows="7" cols="25"></textarea>
			</fieldset>
		</fieldset>

		<input type="submit" value="提交个人信息">
	</form>
</fieldset>
</body>
</html>

coding sheep

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5组织表单结构（field和legend标签的使用）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组织表单结构</title></head><body> <h1>网站小调查</h1> <form action="#" c...
复制链接

扫一扫