HTML之表格标签和form表单

表格标签：

table 一般用于信息展示

tr行

td文本单元格

th标题单元格（文本加粗）

table属性：

cellspacing:单元格间距，一般设置为0

cellpadding:文字到边框的距离

border:表格和单元格的边框

align:表格居中

td/th属性：

rowspan:纵向合并单元格

colspan:横向合并单元格

表格单元格也可以通过css来设置相应的风格：

width宽度

height高度

text-align:center文本居中，左右居中

vertical-align：上下居中

border-collapse:等同cellspacing,单元格间距

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>表格标签</title>

	</head>

	<body>

		<h2 align="center">总结过去，开启新未来</h2>

		<table border="1px" width="800px" height="600px" cellspacing="0" cellpadding="20" align="center">

			<tr style="text-align-last: left;">

				<td>姓名</td>

				<th></th>

				<td>性别</td>

				<th></th>

				<td>出生年月</td>

				<th></th>

			</tr>

			<tr style="text-align-last: left;">

				<td>民族</td>

				<th></th>

				<td>籍贯</td>

				<th></th>

				<td>专业</td>

				<th></th>

			</tr>

			<tr style="text-align-last: left;">

				<td>电话</td>

				<th colspan="5"></th>

			</tr>

			<tr>

				<th colspan="6">工作/学习经历</th>

			</tr>

			<tr>

				<td colspan="2">公司名称/学校名称<br />(按时间顺序)</td>

				<td>职务</td>

				<td>工作年限</td>

				<td colspan="2">转行/学习原因</td>

			</tr>

			<tr>

				<th colspan="2"></th>

				<th></th>

				<th></th>

				<th colspan="2"></th>

			</tr>

			<tr>

				<th colspan="2"></th>

				<th></th>

				<th></th>

				<th colspan="2"></th>

			</tr>

			<tr>

				<th colspan="2"></th>

				<th></th>

				<th></th>

				<th colspan="2"></th>

			</tr>

			<tr>

				<th colspan="2"></th>

				<th></th>

				<th></th>

				<th colspan="2"></th>

			</tr>

			<tr>

				<th colspan="6">兴趣爱好</th>

			</tr>

		</table>

	</body>

</html>

form表单：

作用：

收集用户输入数据提交服务器

form标签属性：

action：提交数据的服务器地址

method：提交方式get（不安全，数据量小）；post（安全，数据量大）

input标签：用于文本输入框

input属性：

name用于后台服务器识别传入的数据类型，如是用户名还是密码

placeholder给用户提示，文本框输入数据自动消失

lable标签和input标签组合使用，for属性和input的id属性相关联---->

作用是点击对应文本，会改变输入框的状态

type类型：

text文本类型
password密码类型
radio单选（前提name属性名一致）
checkbox复选（checked默认选中的选项）
file选择磁盘中文件（图片）
submit提交（value=‘提交’）
reset重置（value=‘重置’）
button普通按钮（value='获取/设置…’）

select选择框（列表框）

option：

selected默认选中的

disabled不能选中的（灰色）

		 <label>籍贯：

			<select style="width: 120px;height: 25px;" name="">

				<option value="" disabled="">北京</option>

				<option value="" selected="">湖北</option>

				<option value="">湖南</option>

			</select>

			</label>

textarea文本区域（多行文本框）

			 <lable style="text-align: left;vertical-align: top;" for="">个人描述：

				<textarea name="" rows="" cols="" style="width: 240px;height: 100px;"></textarea>

			</lable>

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>表单</title>

		<style type="text/css">

			#m{

				width: 440px;

				height: 500px;

				background-color: #F2F2F2;

				margin: auto;

			}

			#h{

				width: 400px;

				height: 70px;

				margin: auto;

				border-bottom: 1px solid darkgray;

			}

			#h h3{

				float: left;

			}

			#n{

				height: 400px;

				width: 400px;

				margin: 0 auto;

			}

		</style>

	</head>

	<body>

		<div id="m">

			<div id="h">

				<h3>注册表单</h3>

			</div>

			<div id="n">

			<form  action="">

			<lable  for="">&nbsp;姓名：

				<input width="240px" height="24px" type="text" name="" id="" value=""/>

			</lable>

			<br /><br />

			<lable  for="">密码：

				<input width="240px" height="24px" type="password" name="" id="" value=""/>

			</lable>

			<br />

			<br />

			<lable  for="">性别：

				<input  type="radio" name="gender" id="" value=""/>男

				<input  type="radio" name="gender" id="" value=""/>女

			</lable>

			<br />

			<br />

			<lable  for="">爱好：

				<input  type="checkbox" name="love" id="" value=""/>唱歌

				<input  type="checkbox" name="love" id="" value=""/>跑步

				<input  type="checkbox" name="love" id="" value=""/>游泳

			</lable>

			<br />

			<br />

			<lable for="">照片：

				<input type="file" name="" id="" value="" />

			</lable>

			<br />

			<br />

			<lable style="text-align: left;vertical-align: top;" for="">个人描述：

				<textarea name="" rows="" cols="" style="width: 240px;height: 100px;"></textarea>

			</lable>

			<br />

			<br />

			<label>籍贯：

			<select style="width: 120px;height: 25px;" name="">

				<option value="" disabled="">北京</option>

				<option value="" selected="">湖北</option>

				<option value="">湖南</option>

			</select>

			</label>

			<br />

			<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

			<input type="submit" name="" id="" value="提交" />

			<input type="reset" name="" id="" value="重置" />

			</div>

		</form>

		</div>

	</body>

</html

HTML之表格标签和form表单的更多相关文章

fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载码云下载测试环 ...
禁止button标签提交form表单，变成普通按钮
button有个type属性,属性值可为button.submit.reset button=普通按钮,直接点击不会提交表单submit=提交按钮,点击后会提交表单reset=表单复位当button ...
【HTML】--- 列表、表格、form表单标签
Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签概念把内容以列表的形 ...
（day43）form表单、css
目录昨日回顾一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...
form表单验证字段学习总结
字段的属性梳理最重要的字段 required inital widget error_messages ----------------------------------------------- ...
form表单详解
form表单 form是一个复杂的系统标签,其内部又可包含很多的一些输入标签例如input 输入文本标签 checkbox 多选标签等等 form表单有几个属性我们需要注意一下 1:action属 ...
前端HTML基础之form表单
目录一:form表单 1.form表单功能 2.表单元素二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...
Unit 2.前端之html--table(表格),form(表单)标签
一.table标签作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
HTML table、form表单标签的介绍
1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

随机推荐

Jupter Notebook常用快捷键与常用的魔法命令
jupter notebook快捷键整理 Part1 1.删除Cell——双击D 2.撤销删除——Z 3.新建Cell——A/B (向上/向下) 4.命令窗口——P 5.运行——Ctrl+Enter ...
vmware虚拟机网络不通原因之一
我是在华硕笔记本上安装的vmware workstation.而且我用虚拟机的网络模式喜欢选“桥接”模式. 最近在虚拟上做实验,打开虚拟机windows 2003后,网卡配置静态ip后显示状态正常,但 ...
YIIMP矿池搭建
本文将以Verge(x17)和Raven(x16rv2)为例子来说明多算法矿池YIIMP的搭建过程. 1 环境准备 1.1 准备Ubuntu 准备虚拟机或物理机,操作系统为Ubuntu 18.04,之 ...
帝国cms 批量替换语句
UPDATE www_92game_net_cnys_ecms_caipu SET titlepic=REPLACE(titlepic,'http://file.92game.net', '') ; ...
Core JSON及JSON解析
JSON (JavaScript Object Notation) 是一种基于文档的标准数据交换格式,它可以让应用程序通过网络交换数据.JSON独立于编程语言(Ruby, Java/EE, JavaS ...
控件setText与setValue赋值顺序先后区别
1.text与value设置不同的值一定要先赋值 value后赋值text, 否则全为value值 2.若只setValue,则getValue 与 getText获取的值全为value值 $('#t ...
Java面试 - 什么是单例设计模式，为什么要使用单例设计模式，如何实现单例设计模式(饿汉式和懒汉式)？
什么是单例设计模式? 单例设计模式就是一种控制实例化对象个数的设计模式. 为什么要使用单例设计模式? 使用单例设计模式可以节省内存空间,提高性能.因为很多情况下,有些类是不需要重复产生对象的. 如果重 ...
uwp,c#,全屏播放保持屏幕响应
在开发视频app的时候,全屏播放一段时间内没有电脑操作,电脑会自动进入睡眠模式,这时就要多写些代码来保持响应了. (这里使用的是MediaElement播放控件,MediaElement需要手动添加代 ...
diy操作系统附录：常用命令
ld -m elf_i386 as --32 gcc -m 16 o
ARTS
ARTS的初衷 Algorithm.主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...

HTML之表格标签和form表单

HTML之表格标签和form表单的更多相关文章

随机推荐

热门专题