HTML之表格，表单的使用

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

属性

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之表格，表单的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML5教程