HTML5教程

HTML之表格,表单的使用

本文主要是介绍HTML之表格,表单的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

标签:

table:定义一个表格
tr:定义行
td:定义列
th:定义列标题加粗显示

属性

border 设置表格边框
width,height设置表格宽度,高度
align,valign设置单元格水平或者垂直对齐
bgcolor设置表格颜色
colspan:定义在td中可以合并列
rowspan:定义在td中可以合并行

form常用属性

form标签定义表单

属性

action =“服务器地址”把表单的数据提交到该地址
method:提交方式,get不安全,速度快,不能大于2kb,post安全,大小不限,速度慢

表单元素

type=“元素”
text:单行文本框
password:密码框
radio:单选按钮,要想只能选择一个,name值要设置成相同的
checkbox:复选框
submit:提交按钮
reset:重置按钮
button:普通按钮
image:图片提交按钮
Email:邮箱
number:数值输入
date:日期框
基本应用效果图:
在这里插入图片描述

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<table   cellspacing="" cellpadding="" align="center">
			
				
		
			<tr>
				<td  colspan="2">
					&nbsp;
				</td>
				<td >
					<font size="6" face="黑体">用户注册</font>
				</td>
			</tr>
			<tr>
				<td  colspan="2" align="right">
					用户名
				</td>
				<td>
					<input type="text" name="" id="" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					密码
				</td>
				<td>
					<input type="password" name="" id="" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					确认密码
				</td>
				<td>
					<input type="password" name="" id="" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					性别
				</td>
				<td>
					<input type="radio" name="a" id="a" value="" />男
					<input type="radio" name="a" id="a" value="" />女
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					爱好
				</td>
				<td>
					<input type="checkbox" name="" id="" value="" />学习
					<input type="checkbox" name="" id="" value="" />编程
					<input type="checkbox" name="" id="" value="" />健身
					
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					出生日期
				</td>
				<td>
					<input type="date" name="" id="" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					工资
				</td>
				<td>
					<input type="number" name="" id="" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					学历
				</td>
				<td>
					<select name="">
						<option value="">小学</option>
						<option value="">大学</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right">
					基本信息
				</td>
				<td>
					<textarea name="" rows="3" cols="16"></textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="right" >
					<input type="submit" name="" id="" value="提交" />
				</td>
				<td>
					<input type="reset" name="" id="" value="重置" />
				</td>
			</tr>
		</table>
			
		</form>
		
	</body>
</html>

基本应用效果图:
请添加图片描述
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table  cellspacing="" cellpadding="">
			<tr>
				<td colspan="2">
					公司名称
					
					<br />
					&nbsp;
				</td>
				<td colspan="3" align="right">
					加入收藏
				</td>
			</tr>
			<tr>
				<td colspan="2"><img src="img/new_logo.png"/></td>
				<td colspan="3" align="right">
					<img align="right" src="img/nav_r_ico.png"/></td>
			</tr>
			<tr>
				<td colspan="5" align="center">
					<hr />
					首页  关于
				    <hr />
				</td>
			</tr>
			<tr>
				<td colspan="5" align="right">
					java列表
					
				</td>
				
			</tr>
			<tr>
				<td colspan="5">
					<h3>
						课程培训
					</h3>
					<h2>
						共种课程视频
					</h2>
				</td>
			</tr>
			<tr>
				<td colspan="5">
					<img width="100%" src="img/001.png"/>
				</td>
			</tr>
			<tr>
				<td align="center">
					<img src="img/002.png"/> 
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/003.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/004.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/005.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/006.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
			</tr>
			<tr>
				<td align="center">
					<img src="img/007.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/008.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/009.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/010.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
				<td align="center">
					<img src="img/011.png"/>
					<br />
					书名:sss   
					<br />
					价格:sss
				</td>
			</tr>
			<tr>
				<td colspan="5" >
					<img width="100%" src="img/012.png"/>
				</td>
			</tr>
		</table>
	</body>
</html>
这篇关于HTML之表格,表单的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!