html5表格表单

Silent Land

已于 2022-05-17 19:37:51 修改

阅读量390

点赞数

分类专栏： HTML 文章标签： html5 html 前端

于 2019-07-21 22:11:00 首次发布

本文链接：https://blog.csdn.net/weixin_44757417/article/details/96760502

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML

表格

表格标签：

table标签:

		常用的属性:

			bgcolor : 背景色

			width : 	宽度

			height : 高度

			align : 对齐方式

	tr 标签

	td 标签

合并单元格：

colspan : 跨列操作

rowspan : 跨行操作

注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

表格的嵌套
在td中可以嵌套一个表格
###表单标签

<!--
  			表单标签
  				action : 直接提交的地址
  				
  				method : 
  						get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
  						post 方式  会将参数封装在请求体中, 没有这样的限制
  						
  			
  			input :
  				type: 指定输入项的类型
  					text : 文本
  					password :  密码框
  					radio :		单选按钮
  					checkbox :  复选框
  					file 	 : 上传文件
  					submit   : 提交按钮
  					button 	 : 普通按钮
  					reset	 : 重置按钮
  					hidden  : 隐藏域
  					
  					date    : 日期类型
  					tel     : 手机号
  					number   : 只允许输入数字
  					
  				placeholder : 指定默认的提示信息
  				name : 在表单提交的时候,当作参数的名称
  				id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
  			
  			textarea : 文本域, 可以输入一段文本
  						cols : 指定宽度
  						rows : 指定的是高度
  			
  			select  : 下拉列表
  				option : 选择项
  		-->

框架标签

frameset



注意: 使用了frameset必须将body删掉,否则页面会有问题

frame
 	常用属性:

	src: 引入的html文件路径
	name: 指定框架的名称

注册页：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<frame action="a.html" >
	<table  width="50%" align="center">
		<tr>
			<td colspan="2" width="100%" align="center"><font color="aqua" size="5" />注册</td>
			
		</tr>
		<tr>
			<td>用户名</td>
			<td ><input type="text" placeholder="请输入用户名"/></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" placeholder="请输入密码"/></td>
		</tr>
		<tr>
			<td>确认密码</td>
			<td><input type="password" placeholder="请再次确认你的密码"/></td>
		</tr>
		<tr>
			<td>Emall</td>
			<td><input type="text" placeholder="Emall"	/></td>
		</tr>
		<tr>
			<td>姓名</td>
			<td><input type="text" placeholder="请输入姓名" /></td>
		</tr>
		<tr>
			<td>性别</td>
			<td>
				<input type="radio" name="sex"/>男
				<input type="radio" name="sex"/>女
			</td>
			
	
		</tr>
		<tr>
			<td>出生日期</td>
			<td>
				<input type="datetime-local"/>
			</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" />篮球
				<input type="checkbox"  />足球
				<input type="checkbox" />乒乓球
				<br />
			</td>
		</tr>
		<tr>
			<td>备注</td>
			<td>
				<textarea cols="40" rows="5"></textarea>
			</td>
		</tr>
		<tr>
			<td>验证码</td>
			<td>
				<input type="text" placeholder="请输入验证码" />
			</td>
		</tr>
		
		<tr>
			<td></td>
			<td>
				<input type="submit" value="注册" />
				<input type="reset" value="重置" />
				<br />
			</td>
		</tr>
	</table>
	<frame />
</html>