HTML_表单（新增多选框、下拉单选）

最新推荐文章于 2024-04-30 17:59:49 发布

一抹鱼肚白

最新推荐文章于 2024-04-30 17:59:49 发布

阅读量2.9k

点赞数 1

文章标签： H5

本文链接：https://blog.csdn.net/weixin_43652205/article/details/98779369

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
	</head>
	<body bgcolor="darkturquoise" >
		<!-- #代表要提交的服务器地址 -->
		<a href="http://baidu.com" title="点击前往百度"><img src="../../img/baidu.png" height="100"></a>
		<form action="#" method="get">
			<br>
			
			<table border="0px"   cellpadding="0px" cellspacing="10px" align="center">
				<caption><h3><i>新用户注册</i></h3></caption>
				<!-- 用户名、密码输入 -->
				<tr>
					<td width="70px">用户名</td>
					<td><input type="text" name="用户名"  /></td>
				</tr>
				<tr>
					<td height="31">密码</td>
					<td><input type="password" name="密码" /></td>
				<tr/>
				
				<!-- 性别单选 -->
				<tr>
					<td>男<input type="radio" name="sex" value="1" checked="checked"/></td>
					<td>女<input type="radio" name="sex" value="0" /></td>
				</tr>
				
				<!-- 爱好多选框 -->
				<tr>
					<td>
						<input type="checkbox" name="fav1" value="sing">您会唱<br>
						<input type="checkbox" name="fav2" value="dance">您会跳<br>
					</td>
					<td>
						<input type="checkbox" name="fav3" value="rap">您会rap<br>
						<input type="checkbox" name="fav4" value="basketball">您会篮球<br>
					</td>
				</tr>
				
				<!-- 籍贯下拉单选 -->
				<tr>
						<td colspan="2">
							<select name="location">
								<option value ="--选择籍贯--">籍贯</option>
								<option value ="北京">北京</option>
								<option value ="信阳">信阳</option>
								<option value ="驻马店">驻马店</option>
								<option value ="焦作">焦作</option>
								
							</select>
						</td>
				</tr>
				<tr>
					<td><input type="submit" value="立即注册" align="center"/> </td>
					<td><input type="reset" value="重置" align="center"/> </td>
				</tr>
				
			</table>			
		</form>
	</body>
</html>

效果

一抹鱼肚白

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML_表单（新增多选框、下拉单选）

代码部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单练习</title> </head> <body bgcolor="darkturquoise" > <!-- #代表要提交的服务器地址 -...
复制链接

扫一扫