html表单

最新推荐文章于 2022-05-29 10:42:15 发布

为祖国健康工作60年

最新推荐文章于 2022-05-29 10:42:15 发布

阅读量263

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Clown_pan/article/details/94221244

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、html中的表格使用的是<table></table>
表格中的行用<tr></tr>
表格中的列用<td></td>
对于表格中想合并的单元格，在标签中可以使用属性colspan合并列rowspan合并行
实现的基本表格如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>homework_629_2</title>
	</head>
	<body>
		<form style="width: 319.2px;">
			<div style="font-size: 20px;" align="center">学生基本信息表</div>
		<table border="1" >
			<tr>
				<th rowspan="2" >学号</th>
				<th colspan="3" align="center">个人信息</th>
				<th colspan="4" align="center">入学信息</th>
				
			</tr>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td colspan="2"align="center">班级</td>
				<td colspan="2"align="center">入学年月</td>
				
			</tr>
			<tr>
				<td align="center">001</td>
				<td>张永</td>
				<td align="center">男</td>
				<td>18</td>
				<td colspan="2">20020101</td>
				<td colspan="2">2000年9月</td>
				
			</tr>
			<tr>
				<td align="center">002</td>
				<td>王芳</td>
				<td align="center">女</td>
				<td>17</td>
				<td colspan="2">20020101</td>
				<td colspan="2">2000年9月</td>
			</tr>
		</table>	
		</form>
		
	</body>
</html>

效果如下：
在这里插入图片描述
2、对于多功能的表单有如下几项：
（1）对于文本输入框使用的是：<input />其属性有type,type为text输入的为文本，为password是密码，输入的时候不可见，是圆点。
（2）下拉列表框使用select标签，如：

城市：
			<select>
				<option>北京</option>
				<option>上海</option>
				<option>广州</option>
				<option>深圳</option>
				<option>杭州</option>
				<option>哈尔滨</option>
			</select>

（3）对于单选框，使用的是仍然是input标签，只不过标签选用的是radio

性别：<input type="radio" name="sex" >男 <input type="radio" name="sex"/> 女

(4)多选框使用的是input标签中的type为checkbox

爱好：
			<input type="checkbox" name="a" value="lq"/>篮球
			<input type="checkbox" name="a" value="zq"/>唱
			<input type="checkbox" name="a" value="pq"/>跳
			<input type="checkbox" name="a" value="qt"/>rap

这其中使用了相同的name值是为了传给服务器的时候方便接受，value不同是为了分类。
（5）提交表单

<input type="submit"/>

（6）重置表单

<input type="reset" />

综合项目如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>homework_629_3</title>
	</head>
	<body>
		<p align="center" style="color: red;">用户留言簿</p>
		<hr color="red" width="450px">
		<table border="1" align="center">
			<tr>
				<td>用户名:</td>
				<td><input type="text"/></td>
				<td>密码:</td>
				<td><input type="password"/></td>
			</tr>
			<tr>
				<td>电子信箱：</td>
				<td><input type="text"/></td>
				<td>民族：</td>
				<td>
					<select>
						<option>汉</option>
						<option>满</option>
						<option>维族</option>
						<option>少数名族</option>
						<option>带明星</option>
						<option>狗粉丝</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>性别：</td>
				<td><input type="radio" name="sex" >男 <input type="radio" name="sex"/> 女</td>
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="a" value="lq"/>篮球
					<input type="checkbox" name="a" value="zq"/>唱
					<input type="checkbox" name="a" value="pq"/>跳
					<input type="checkbox" name="a" value="qt"/>rap
				</td>
			</tr>
			<tr height="50px">
				<td>
					留言：
				</td>
				<td colspan="3">
					<textarea   style="width: 55px;height: 100px;">
						大家好，我是练习时长两年偶像练习生cxk，我的爱好是唱、跳、Rap、篮球，请大家多多支持！运球，转身，转球，球飞，提胯.......
						今年下半年中美合拍的新专辑即将上线，我一定努力做到文体两开花，请大家多多关注！不关注就谢罪！
						
					</textarea>
				</td>
			</tr>
			<tr>
				<td align="center" colspan="4">
					<input type="submit"/>
					<input type="reset" />
				</td>
			</tr>
		</table>
	</body>
</html>

效果如下：
在这里插入图片描述