使用HTML5创建简单的表格和表单

最新推荐文章于 2021-11-20 17:26:49 发布

没什么了不起

最新推荐文章于 2021-11-20 17:26:49 发布

阅读量721

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_45003321/article/details/115187112

版权

HTML5

创建表单示例

radio 单选框圆心
checkbox 复选框方形
submit 提交按钮
reset 重选按钮
textarea 文本输入

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>
			表单
		</title>
	</head>
	<body>
		<h6>建立你的学习方式</h6>
		<form action="#" method="">
			<input type="radio" name="method" id="method" value="method" /> 全日制在读
			<input type="radio" name="method1" id="method1" value="method1" />走读
			<input type="radio" name="method2" id="method2" value="method2" />
			<h6>请选择您所要学习的课程</h6>
			<input type="checkbox" value = "" /> 局域网工程
			<br>
			<input type="checkbox" name="" id="" value="" /> 操作系统
			<br>
			<input type = "checkbox" /> 数据结构
			<br>
			<p class="head">请输入你的选择 </p>
			<textarea rows="3" cols="30">
				
			</textarea>
			<br>
			<input type="submit" name="" id="" value="提交" />
			<input type="reset" name="" id="" value="重选" />
			
			
		</form>
	</body>
</html>

运行结果
在这里插入图片描述

创建表格

<table></table> 表格格式
<tr> </tr> 行
<th> </th> 第一列
<td> </td> 列
 rowspan 合并列
 colspan  合并行

	<html>
	<head>
		<meta charset="utf-8"/>
		<title> 表格 </title>
	</head>
	<body>
		<b style="text-align: center;"><h5>专业设置及在校生人数表</h5></b>
		<table border="1" cellspacing="" cellpadding="" align="center" bordercolor="blue">
			<tr bgcolor="aqua">
				<th>学院名</th>
				<th colspan="4">专业及人数</th>
				
			</tr>
			<tr>
				<td rowspan="6" bgcolor="aquamarine">计算机学院</td>
				<td colspan="4" bgcolor="azure">计算机科学与技术专业</td>
				
			</tr>	
			
			<tr bgcolor="aquamarine">
				<td>2006级</td>
				<td>2007级</td>
				<td>2008级</td>
				<td>2009级</td>
				
			</tr>
			<tr bgcolor="aquamarine">
				<td>300人</td>
				<td>200人</td>
				<td>150人</td>
				<td>120人</td>
			</tr>
			<tr>
				<td colspan  = "6" align="center" bgcolor="azure">软件工程专业</td>
			</tr>
			
			<tr bgcolor="aquamarine">
				<td>2006级</td>
				<td>2007级</td>
				<td>2008级</td>
				<td>2009级</td>
				
			</tr>
			<tr bgcolor="aquamarine">
				<td>100人</td>
				<td>80人</td>
				<td>50人</td>
				<td>40人</td>
			</tr>
			<tr>
				<td rowspan="3" align="center" bgcolor="aquamarine"> 外语学院</td>
				<td colspan="4" align="center" bgcolor="azure">英语专业</td>
				
			</tr>
			<tr bgcolor="aquamarine">
				<td >2006级</td>
				<td>2007级</td>
				<td>2008级</td>
				<td>2009级</td>
				
			</tr>
			<tr bgcolor="aquamarine">
				<td>100人</td>
				<td>80人</td>
				<td>50人</td>
				<td>40人</td>
			</tr>
		</table>
		
	</body>
	
	
	</html>

运行结果
在这里插入图片描述

没什么了不起

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用HTML5创建简单的表格和表单

HTML5创建表单示例radio 单选框圆心checkbox 复选框方形submit 提交按钮reset 重选按钮textarea 文本输入<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫