表格标签:

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. iOS面试-assign与retain

    assign 对基础数据类型 (NSInteger,CGFloat)和C数据类型(int, float, double, char)等等.        此标记说明设置器直接进行赋值,这也是默认值.在 ...

  2. Docker Swarm 集群(十七)

    目录 一.Docker Swarm 概念 1.集群 2.Docker Swarm 3.重要概念 swarm node service 二.创建 Swarm 集群 1.环境准备 2.创建 swarm 3 ...

  3. NGUI 9宫格输入的一个巨坑

    UILabel 中的maxlines = 0,输入没有问题.如果maxlines=1,输入出错

  4. charles 工具菜单总结

    本文参考:charles 工具菜单总结 主要是下面的功能,具体可以点击对应菜单查看 工具菜单总结 禁用缓存 禁用Cookies 远程映射到URL地址 映射到本地 重写工具 黑名单 白名单 DNS欺骗 ...

  5. linux SSH 登录

    1:  远程连接linux server:       ssh -p22 root@192.168.XXX.XXX 然后输入密码. 2: 免密码的方式: A: sudo -i B: ssh-keyge ...

  6. eNSP——配置全局地址池的DHCP

    原理: 拓扑图: 实验编址: 1.基本配置 2.配置全局地址池的DHCP Server 在R1上开启DHCP功能,使用ip pool命令创建一个全局地址池,名字自己定. 在全局地址池配置网段.掩码.租 ...

  7. 乐字节Java学习01-Java语言概述,Java发展前景,Java的特点

    从这篇文章开始,小乐准备写一整系列的Java学习文章,一步一步带您进入Java的神奇世界! 这是第一篇:Java语言概述以及Java的发展前景 1.SUN公司介绍 SUN公司全称是Stanford U ...

  8. WCF-复杂配置

    两种模式,一个契约两个实现,两个契约一个实现. 服务类库 宿主 static void Main(string[] args) { ServiceHost sh1 = new ServiceHost( ...

  9. Oracle日常

    Xmltype select extractvalue(value(x), '//utext') value from table(XMLSEQUENCE(extract(v_xmlContent, ...

  10. laravel中间件的实现原理

    中间件的实现原理 运用 array_reduce 以及 call_user_func 实现 interface Middleware { public static function handle(C ...