HTML555---表格和表单

最新推荐文章于 2021-12-04 18:52:05 发布

洒-家

最新推荐文章于 2021-12-04 18:52:05 发布

阅读量676

点赞数

分类专栏： HTML55555

本文链接：https://blog.csdn.net/qq_45725890/article/details/108659745

版权

HTML55555 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

洒-家

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML555---表格和表单

案列：表格控件---input控件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellspacing="0px" cellpadding="1px" width="600px" align="center"&...
复制链接

扫一扫

专栏目录