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=""> 姓名：
<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 />
<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 ...
随机推荐
- 李宗盛spss罚写2019-12-8
以上过程即整个假设检验的思想:反证法及小概率原理. 因而假设检验有可能犯两类错误. 第一类错误:原假设正确,而错误地拒绝了它,即“拒真”的错误,其发生的概率为第一类错误的概率. 第二类错误:原假设不正 ...
- Java中让fastJson识别Colloction和Map中的泛型类
由于fastJson的高效性,最近采用fastJson来做序列化并存储数据,但出现了一个麻烦的问题,如果将Map<K,V>这样的类型序列化,反序列化就会不尽人意,有以下尝试: 使用JSON ...
- VS2010开发.cpp与.c的注意事项
VS2010开发.cpp与.c的注意事项 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 强大的VS2010,正是由于vs2010的完全封装,让现在的wind ...
- opencv 直方图
1.简介 对输入图像进行直方图均衡化处理,提升后续对象检测的准确率在OpenCV人脸检测的代码演示中已经很常见.此外对医学影像图像与卫星遥感图像也经常通过直方图均衡化来提升图像质量. 图像直方图均衡化 ...
- Oracle之配置节点间相互信任机制测试
更改一下,之前的都不对,现在来一版简单有效的ssh互信配置 例如我的是在配置rac,在grid用户下配置互信:建立好相应的文件 mkdir .ssh chmod -R 700 .ssh/ 使用ssh- ...
- BP（back propagation）误差逆传播神经网络
[学习笔记] BP神经网络是一种按误差反向传播的神经网络,它的基本思想还是梯度下降法,中间隐含层的误差和最后一层的误差存在一定的数学关系,(可以计算出来),就像误差被反向传回来了,所以顾名思义BP.想 ...
- 数据分析之--Mataplotlib入门
目录 Mataplotlib Seaborn 绘制线性图 图片的标题 点和线的样式 X和Y轴可读的映射 直方图 柱状图 条件性柱状图 饼图 箱图 散步图 3D图 Excel数据导入数据库 Matapl ...
- 关于NumPy中数组轴的理解
参考原文链接(英文版):https://www.sharpsightlabs.com/blog/numpy-axes-explained/:中文版:https://www.jianshu.com/p/ ...
- 20191011-构建我们公司自己的自动化接口测试框架-Util的AssertResult模块
AssertResult主要就是进行结果断言的了,因为断言结果分2种情况,一种是断言词,一种是断言sheet,如果涉及断言sheet,则需要操作excel到对应的断言表断言所有的字段并且书写断言结果主 ...
- pandas数据结构之Series笔记
对Series的理解也源于对其相关的代码操作,本次仅贴一些代码来加深理解以及记忆 import pandas as pd import numpy as np s = pd.Series(np.ran ...