HTML中表单的制作

1.HTML交互式表单(form)

表单的制作:

2.列表框:

3.多行文本输入控件:

<html>
	<head><title>表单的例子</title></head>
	<body>
		<form method="get" action="reg.jsp">
			<table>
				<tr>
					<td>用户名:</td>
					<!--单行文本输入控件-->
					<td><input type="text" name="user" value="游客" size=""30></td>  
				</tr>
				<tr>
					<td>密码:</td>
					<!--口令输入控件-->
					<td><input type="password" name ="pwd"></td>  
				</tr>
				<tr>
					<td>性别:</td>
					<!--运用单选框-->
					<td>
						<input type="radio" name="sex" value="1" checked>男
						<input type="radio" name="sex" value="0" >女	
					</td>  
				</tr>
			
				<tr>
					<td>兴趣:</td>
					 <!--运用复选框-->
					 <td>
						<input type="checkbox" name="interest" value="football">足球
						<input type="checkbox" name="interest" value="basketball">篮球
						<input type="checkbox" name="interest" value="tennis">网球
						<input type="checkbox" name="interest" value="baseball">棒球<br>
					</td>
				</tr>
				<tr>
				<!--下拉框-->
					<td>最高学历:</td>
					<td>
						<select size="1" name="education">
							<option value="" selected>...</option>
							<option value="小学" >小学</option> 
							<option value="初中" >初中</option>
							<option value="高中" >高中</option>
							<option value="大学" >大学</option>
							<option value="研究生" >研究生</option>
						</select><br>
					</td>
				</tr>
				
				<tr>
					<!--多行文本输入,以下显示3行每行30个字-->
					<td>个人简介:</td><br>
					<td><textarea name="personal" rows="3" cols="30" >个人简介</textarea><br></td>	
				</tr>
				<tr>
					<!--隐藏控件-->
					<td><input type="hidden" name="id" value="001"></td>
				<tr>
					<!--重置按钮-->
					<td><input type="reset" value="重写 "></td>.<!--充值按钮,使用value属性更改控件内容-->
					<!--提交按钮-->
					<td><input type="submit" value="注册"></td><!--提交按钮,使用value属性更改控件内容-->
				</tr>
			</table>
		</form>
	</body>
</html>

显示结果:

发布了137 篇原创文章 · 获赞 28 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_43267344/article/details/104331288