表单,表格的补充

一,表单补充

form的属性有name method action target

method表单提交方式的值有get和post

GET会将信息放在地址栏,安全性低,但效率高,可以查询获取数据

POST不会将信息放在地址栏,安全性高,效率低,增删改查上传数据

action:表单提交的路径

input select checkbox 的属性有 checked selected disabled maxlength size

textarea的属性 cols=“10” 一行可以输入10个字符,两个汉字为一个字符
rows="10"可以写十行文字,十行以后出现滚动条

input type =“submit提交(刷新页面);button(按钮);reset(重置)”

注意,submit button 如果没有写在form中,不生效

radio单选按钮要想实现单选,必须添加一致的name

表单字段集fieldset 。

字段集标题legend。

字段集标题要放在第一个位置。

<style>
fieldset{
	border:none;/*改变fieldset的边框*/
}

legend{
	padding:100px;/*改变标题与边框的距离*/
}
</stlye>
<form action="">
	<fieldset disabled>
		<legend>title</legend>
		<input type="text"/><br />
		<input type="password"/><br />
	</fieldset>
</form>

表单的组成:

表单域form
表单控件input
提示信息label

for里的内容写id的值,就可以定位到。

<label for="text">用户名:</label><input type="text" id="text"/>

上传文件域,上传多个。
<input type="file" multipul="multipule"/>

上传图片域,可以当提交按钮。

<input type="image" src="img.jpg" width="100" />

隐藏按钮。

<input type="hidden" value="submit"/>

二,表格补充

table 单元格之间cellspacing=“0” 内容之间cellpadding=“10” align=“center”(水平居中) valign=“middle”(垂直居中)

<caption>表格标题</caption>

colspan=“2”(列合并) rowspan=“3”(行合并)

表格
按照数据行分组:表头thead,表体tbody,表尾tfoot.

表头和表尾只能有一个,表体可以有多个

<table rules="none"></table>


<table rules="groups">/*给分组列添加分割线*/
	<colgroup span="2"></colgroup>
	/*<colgroup></colgroup>
	<colgroup></colgroup>*/
	<col></col>/*中间没有竖线*/
</table>
  1. 单元格与单元格的间距(必须写给table)

    html的属性是cellspacing

    css的属性是border-spacing

  2. 合并相邻单元格的边框(可以写给td)

    border-collapse:separate(不合并)、collapse(合并)

    empty-cells:hide、show(没有内容的时候,单元格隐藏边框)

  3. 表格标题的位置

    caption-side :top ,bottom ,left ,right (left,right只有火狐浏览器支持)

发布了33 篇原创文章 · 获赞 57 · 访问量 1665

猜你喜欢

转载自blog.csdn.net/Shirley_0513/article/details/103556977