表格标签：

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表单的更多相关文章

  1. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  2. 禁止button标签提交form表单，变成普通按钮

    button有个type属性,属性值可为button.submit.reset button=普通按钮,直接点击不会提交表单submit=提交按钮,点击后会提交表单reset=表单复位 当button ...

  3. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  4. （day43）form表单、css

    目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...

  5. form表单验证字段学习总结

    字段的属性梳理 最重要的字段 required inital widget error_messages ----------------------------------------------- ...

  6. form表单详解

    form表单 form是一个复杂的系统标签,其内部又可包含很多的一些输入标签 例如input 输入文本标签  checkbox 多选标签等等 form表单有几个属性我们需要注意一下 1:action属 ...

  7. 前端HTML基础之form表单

    目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...

  8. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

  9. HTML table、form表单标签的介绍

    1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

随机推荐

  1. jQuery学习三——事件

    代码如下: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </head& ...

  2. iOS推送证书上传（转)

    iOS 推送证书制作(JAVA/PHP) 在使用Java或者PHP制作iOS推送服务器的时候,需要自己从开发者网站上导出的aps_developer_identity证书和Apple Developm ...

  3. 《Django企业开发实战 高效Python Web框架指南》胡阳

    链接:https://pan.baidu.com/s/1NmN_IT5RvevCMt9bZCW1-g提取码:2ki9

  4. （二）MVC项目+c3p0连接池

    一.项目架构 注:删除了原有的数据库工具,添加了c3p0数据库工具类,添加了c3p0的配置文件,修改了Dao类以及servlet类 二.修改或添加的类 1.C3p0Helper(暂时不了解事务回滚之类 ...

  5. 静态链表过程演示及代码实现(A - B) U (B - A)

    静态链表说明 使用数组来实现链式存储结构,目的是方便在不设指针类型的高级程序设计语言中使用链式结构 c语言定义数据结构 #define MAX_SIZE 1000 // 所有的类型都统一定义为Elem ...

  6. Apache Commons Lang 学习栏目

    Apache Commons Lang 学习栏目 Apache Commons Lang 3.8.1 API https://mvnrepository.com/artifact/org.apache ...

  7. 什么是H5？

    总听到很多人说H5,现在H5很火,到底H5是什么,以下发表个人对H5的理解. HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年. ...

  8. [转帖]彻底弄懂UTF-8、Unicode、宽字符、locale

    彻底弄懂UTF-8.Unicode.宽字符.locale linux后端开发   已关注   彻底弄懂UTF-.Unicode.宽字符.locale unicode 是字符集 utf-8是编码格式.. ...

  9. [转帖]linux常用命令大全（linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习）

    linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习) https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 ...

  10. java模拟from表单提交，上传图片

    /** * java上传表单,有图片 * @param urlStr 上传地址 * @param textMap 表单参数 * @param fileMap 文件参数 key:文件名称 value:文 ...