HTML555---表格和表单

1.创建表格

<table></table>标签用于定义一个表格的开始和结束，在<table>标签内部，可以放置表格的标题，表格行，单元格
<tr>用于定义表格的一行，必须嵌套在<table></table>标签中，在<table></table>中包含几对<tr></tr>就表示该表格有几行
<td></td>用于定义表格单元格，必须嵌套在<tr></tr>标签中，一对<tr></tr>中包含几对<td></td>,就表示该行有多少列(或多少个单元格)

<td>标签，它就像一个容器，可以容纳所有的标签，<td>中可以嵌套表格<table>,但是<tr>中只能嵌套<tb>,不可以在<tr>标签中输入文字

<table border="1">
<tr><th>表格1</th></tr>
<tr><td>表格2</td></tr>
</table>

<table>标签的属性
属性值
①border：设置表格的边框（默认为0）
②cellspacing：设置单元格与单元格之间的空间（默认距离为2px）
③cellpadding：设置单元格内容与单元格边缘之间的空间（默认距离为1px）
④width：设置表格的宽度
⑤height：设置表格的高度
⑥align：设置表格在网页中的水平对齐方式（控制表格在页面中的水平对齐方式，单元格的内容不受影响）
⑦bgcolor：设置表格的背景颜色
⑧background：设置表格的背景图片。
当为表格标签table同时设置width、height和cellspacing属性时，cellspacing的显示效果将不太容易观察，所以一般在未给表格设置宽高的情况下测试cellpacing属性。
<tr>标签的属性
①height：设置行高度
②align：设置一行内容的水平对齐方式
③valign：设置一行内容的垂直对齐方式
④bgcolor：设置行背景颜色
④background：设置行背景图像
<tr>标签无宽高属性width，其宽度取决于表格标签<table>
可以对<tr>标签应用valign属性，用于设置一行内容的垂直对齐方式。
<td>标签的属性
①height：设单元格高度
②width：设置单元格宽度
③align：设置单元格内容的水平对齐方式
④valign：设置单元格内容的垂直对齐方式
⑤bgcolor：设置单元格背景颜色
⑥background：设置单元格背景图像
⑦colspan：设置单元格横跨的列数（用于合并水平方向的单元格）
⑧rowspan：设置单元格竖跨的列数（用于合并竖直方向的单元格）
注意：①在<td>标签的属性中，应该重点掌握colspan和rolspan，其他属性了解即可，不建议使用，这些属性均可用CSS样式属性替代。
②当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。
③当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。
<th>标签及其属性
该标签为表头标签，文本默认为加粗居中，而<td>定义的为普通单元格，其文本为普通文本且水平左居中。
表格的结构
<thead></thead>：用于定义表格的头部，必须位于table标签中，一般包括含网页的logo和导航等头部信息。
<tfoot></tfoot>：用于定义表格的页脚，位于table标签中thead标签之后，一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体，位于table标签中tfoot标签之后，一般包含网页中出头部和底部之外的其他内容。
注意：一个表格只能定义一对thead标签、一对tfoot标签，但可以定义多对tbody标签，它们必须按thead标签、tfoot标签和tbody标签的顺序使用。之所以将tfoot标签置于tbody标签之前，是为了浏览器在收到全部数据之前即可显示页脚。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" cellspacing="0px" cellpadding="1px" width="600px" align="center"><caption>表格</caption><thead><!-- 网页的头部 --><tr><th>球队</th><th>球员</th><th>夺冠次数</th></tr></thead><tfoot><!-- 网页的尾部 --><tr><td colspan="3" align="center">比赛解说：黄健翔，姚明</td></tr></tfoot><tr><td rowspan="3" background="tupian/111.png">马刺队</td><td>邓肯</td><td rowspan="3">5次</td></tr><tr><td>帕克</td></tr><tr><td>吉诺比利</td></tr><tr></tr><tr><td rowspan="3" background="tupian/222.png">热火队</td><td>邓肯</td><td rowspan="3">5次</td></tr><tr><td>帕克</td></tr><tr><td>吉诺比利</td></tr><tr></tr></table></body>
</html>

2、CSS控制表格样式
CSS控制表格边框

如果只设置<table>样式，效果图只显示外边框的样式，内部不显示边框

border-collapse使单元格的边框合并，当表格的border-collapse属性设置为collapse时，则HTML中设置的cellspacing属性值无效

行标签<tr>无border样式属性

CSS控制单元格边距

行标签<tr>无内边距属性padding和外边距属性margin

要想设置单元格之间的距离，只能对<table>标签应用HTML标签属性cellspacing

CSS控制单元格的宽和高

可以对同一行中的单元格定义不同的高度height，或对同一列中的单元格定义不同的宽度，最终的宽度和高度将取其中的较大者

表单

表单的构成

表单控件：包含了具体表单功能，如单行文本输入框，密码输入框，复选框，提交按钮，收索框等

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作

表单域：相当于一个容器，用来容纳所有表单控件和提示信息，可以通过它处理表单数据所用程序的url地址，定义数据提交到服务器的方法，如果不定义表单域，表格中的数据就无法传送到后台服务器

创建表单

<form></form>标签用来定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form></form>中的所有内容都会被提交给服务器

<form action="url 地址" method="提交方式"  name="表单名称">各种表单控件
</form>

action属性：用于指定接收并处理表单数据的服务器程序的url地址。
可以是相对路径也可以是绝对路径
method：取值有get和post，get为该属性的默认值，采用get方法时，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据，而post时分段传输。
get方法保密性差，post方法保密性强。
name属性：表单中的name属性用于指定表单的名称，而表单控件中具有name属性的元素将用户填写的内容提交给服务器。

表单控件

input控件：type属性值为最基本的属性，用于指定不同的控件类型

type：属性值有：text（单行文本输入框）、password（密码输入框）、radio（单选按钮）、checkbox（复选框）、button（普通按钮）、submit（提交按钮）、reset（重置按钮）、image（图像形式的提交按钮）、hidden（隐藏域）、file（文本域）。
name：用户自定义控件名称
value：用户自定义 input控件中的默认文本值
size：正整数 input控件在页面中的显示宽度
readonly：readonly 内容为只读 (不能编辑修改)

disabled:disabled 第一次加载页面时禁用该控件(显示为灰色)

checked:checked 定义控件默认被选中的项

maxlength:正整数控件允许输入的最多字符数

案例：表单控件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">form{border: 1px brown double;width: 500px;margin: 10px auto;}</style></head><body><form action="#" method="post" >姓名:<input type="text" size="10" maxlength="4"/><br>密码:<input type="password" size="9" /><br>性别：<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" checked="checked" />女<br>兴趣：<input type="checkbox" />唱歌<input type="checkbox" />跳舞<input type="checkbox" />弹琴<br>上传头像：<input type="file" /><br><input type="submit" /><input type="reset" /><input type="button" value="普通按钮"/><input type="image" src="tupian/111.png" value="登录"/></form></body>
</html>

将<input/>控件联合<label>标签使用,以扩大控件的选择范围

例如：希望单击文字男或者女时，也可以选中相应的单选按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="#" method="post"><label for="name">姓名：</label><input type="text"  id="name" maxlength="16"/><br>性别：<input type="radio" name="sex" checked="checked" id="man" /><label for="man">男</label><input type="radio" name="sex" id="woman" /><label for="woman">女</label>
</form>
</body>
</html>

textarea控件：创建多行文本输入框

<textarea rows="5" cols="6">每行中的字符数5，显示的行数6
</textarea>
其可选属性有readonly disabled

select控件：包含多个选项的下拉菜单

<form action="#" method="post" ><select><optgroup label="学生"><option >学生1</option><option >学生2</option></optgroup><optgroup label="老师"><option >老师1</option><option >老师2</option></optgroup></select><input type="button" value="提交"/></form>select常用属性
size:指定下拉菜单的可选项数（取值为正整数）
multiple:定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住【ctrl】键的同时选择多项
option常用属性
selected:定义selected=selected时，当前项即为默认选中项
<optgroup></optgroup>标签用于定义组，必须嵌套在select标签中，必须 有一个属性名label用于定义组名

全新的form属性
autocomplete属性:用于指定表单是否有自动完成的功能，所谓自动完成是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入，autocomplete属性有两个值
on:表单有自动完成功能
off:表单无自动完成功能
autocomplete属性不仅可以用于form标签，还可以用于所有输入类型的input标签
novalidate属性:在提交表单时，取消对表单进行有效的检查，为表单设置，该属性时可以关闭整个表单的验证，这样可以使标签内的所有表单控件不被验证，其取值为自身
全新的表单控件
datalist控件:用于定义输入框的选项内容
网页中的列表通常通过datalist内的option进行创建
如果用户不希望从列表选择某项，也可以自行输入其他内容
datalist控件通常与input控件配合使用，来定义input的取值
在使用datalist控件时，需要通过id属性为其指定一个唯一的标识，然后为input控件指定list属性，将该属性值设置为opotion对应的id属性值即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="#" method="post"><input type="text" list="namelist"/><datalist id="namelist"><option >张三</option><option >李四</option><option >王五</option></datalist><input type="submit" value="提交"/></form></body>
</html>

全新的input控件
email类型 <input type="email">
email类型的input控件是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式如果不符合，将提示相应的错误信息
url类型 <input type="email">

一种用于输入URL地址的文本框，如果所输入的内容是URL地址的文本框，则会提交数据到服务器；如果不符合，将提示相应的错误信息

tel类型同上

用于提供输入电话号码的文本框，常配合pattern属性使用

search类型

是一种专门用于搜索关键词的文本框，它能自动记录一些字符，在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容

color类型

用于提供设置颜色的文本框，用于实现RGB颜色输入，通过value属性可以更改默认颜色，单击color类型文本框，可以快速打开拾色板

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="#" method="get">邮箱：<input type="email" /> <br>个人网址：<input type="url" /> <br>电话号码：<input type="tel" name="tellphone" pattern="^\d{11}$"/> <br>搜索关键字：<input type="search" name="searchinfo"/> <br>颜色：<input type="color" name="color1"/><input type="color" name="color2" value="250000" /><input type="submit" value="提交" /></form></body>
</html>

numberl类型：用于提供输入数值的文本框

value:指定输入框的默认值

max：指定输入框可以接受的最大的输入值

min:指定输入框可以接受的最小的输入值

step:输入域合法的间隔，如果不设置，默认值是1

<form action="#" method="get">
请输入数值：<input type="number" name="number1" value="1" min="1" max="10" step="2" />
<input type="submit" value="提交"/>
</form>

range类型<input type="range">

用于提供一定范围的数值输入，常用属性同number一样

Date pickers类型

date 选取日月年

month 选取月年

week 选取周和nian

time 选取时间，小时和分钟

datetime 选取时间日月年(UTC时间)

datetime-local 选取时间日月年(本地时间)

全新的input属性

autofocus属性：用于指定页面加载完后是否自动获取焦点，将标签的属性值指定为true时，表示页面加载完毕后会自动获取焦点

form属性：可以把表单的子元素写在表单的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可

form属性还允许一个表单控件从属与多个表单

list属性：用于指定输入框所绑定的datalist元素，其值是某个datelist元素的id

multipe属性：指定输入框可以选择多个值，该属性适用于email和file类型的input元素，multipe属性用于email类型的input元素时，表示可以向文本框输入多个E-mail地址，多个地址之间(,)逗号隔开，multipe属性用于file类型的input元素时，表示可以选择多个文件

max,min,step属性：用于为包含数字或日期的input输入类型规定限值，适用于date pickers,number,range 标签

pattern属性：用于验证input类型输入框中用户输入的内容是否与所定义的正则表达式相匹配，

placeholder属性：用于为input类型的输入框提供相应提示信息，以描述输入框期待用户输入何种内容

设置登录页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">form,p{padding: 0px;margin: 0px;border: 0px;}p{text-align: center;padding-top: 15px;}p span{width: 60px;display: inline-block;text-align: right;}.one{        background: url(tupian/xiao.jpg) no-repeat ;border-radius: 10px ;}body{font-size: 18px;font-family: "微软雅黑";background: url(tupian/333.png) chocolate no-repeat top center;}form{width: 450px;height: 300px;padding-top: 60px;margin: 100px auto ;background-color: rgba(255,0,0,0.5);             border: 1px rgba(100,255,255,0.1) solid ;border-radius: 20px 20px ;                             }</style></head><body><form action="#" method="post" ><p> <span >账号：</span><input type="text" class="one"/></p><p><span >密码：</span ><input type="password" class="one"/></p><p><input type="button"  value="登录" /></p></form></body>
</html>

HTML555---表格和表单相关推荐

easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
<HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目录第3章 HTML表格与表单................................... ...
表格和表单的结合示例
表格和表单的结合示例demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
用HTML制作表单表格能学到什么,Html学习之十七（表格与表单学习--排行版制作）...
表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...
HTML中的表格和表单控件详解
文章目录前言表格和表单控件的作用? 一.表格控件的语法 1.tr标签和td标签 2.表格的属性二.表单控件的用法 1.创建表单 2.表单的常用属性 3.表单常用控件(input控件) 4.文本域 ...
HTML之表格与表单
文章目录表格一.表格的格式二.表格标签表单一.作用二.表单结构三.表单控件案例:表格与表单结合表格一.表格的格式 <table> //定义表格<tr> // ...
html中的列表、表格、表单
目录一.列表(有序列表和无序列表) 1.无序列表 2.有序列表 3.列表的嵌套二.表格 1.表格所需的主要标签 2.详细介绍表格的制作 3.单元格的合并(跨行和跨列) 三.表单 1.表单标签 ...
前端之表格，表单，列表
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.表格 # HTML 第二天目标能够利用表格.列表和 ...
HTML5简明教程系列之HTML5 表格与表单（二）
HTML的第二弹也来了,最近高产似母猪,状态也不错,代码来源为实验课.本期主要内容为:HTML表格与DIV应用.HTML表单.上期基础部分的传送门: HTML5简明教程系列之HTML5基础(一)_Th ...
WEB入门二表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作入门视频课:H5和JAVASCRIPT实战教程能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的 ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...

HTML555---表格和表单

HTML555---表格和表单相关推荐

最新文章

热门文章