HTML——表格与表单

1、表格

<table></table>

         background:背景图片。

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式代替。 规定表格的背景颜色。
border	pixels	规定表格边框的宽度。常用值0。
cellpadding	pixels %	规定单元边沿与其内容之间的空白。常用值0。
cellspacing	pixels %	规定单元格之间的空白。常用值0。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	% pixels	规定表格的宽度。可以用像素或百分比表示。常用960像素。

<tr></tr> 行

　height：行高

　bgcolor:背景色

   background:背景图片

属性	值	描述
align	right left center justify char	定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式取而代之。 规定表格行的背景颜色。
char	character	规定根据哪个字符来进行文本对齐。
charoff	number	规定第一个对齐字符的偏移量。
valign	top middle bottom baseline	规定表格行中内容的垂直对齐方式。

<td></td> 单元格

属性	值	描述
abbr	text	规定单元格中内容的缩写版本。
align	left right center justify char	规定单元格内容的水平对齐方式。
axis	category_name	对单元进行分类。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式取而代之。 规定单元格的背景颜色。
char	character	规定根据哪个字符来进行内容的对齐。
charoff	number	规定对齐字符的偏移量。
colspan	number	规定单元格可横跨的列数。
headers	header_cells'_id	规定与单元格相关的表头。
height	pixels %	不赞成使用。请使用样式取而代之。 规定表格单元格的高度。
nowrap	nowrap	不赞成使用。请使用样式取而代之。 规定单元格中的内容是否折行。
rowspan	number	规定单元格可横跨的行数。
scope	col colgroup row rowgroup	定义将表头数据与单元数据相关联的方法。
valign	top middle bottom baseline	规定单元格内容的垂直排列方式。
width	pixels %	不赞成使用。请使用样式取而代之。 规定表格单元格的宽度。

内容必须放在单元格里，单元格必须放在行里，行必须放在表格里。设置单元格行高、列高时，会同时影响对应的行或列

　　单元格合并：（建议尽量用表格嵌套）

　　　　colspan="n"    合并同一行单元格（后面写代码要减去相对应的列）

　　　　rowspan="n"    合并同一列单元格（从第二行开始减去对应的列）

2、表单

　　<form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复；name可重复；

属性	值	描述
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	get post	规定用于发送 form-data 的 HTTP 方法。get提交有长度限制，并且编码后的内容在地址栏可见，post提交无长度限制，且编码后内容不可见。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top framename	规定在何处打开 action URL。

 

2.1、文本输入

type

button checkbox file hidden image password radio reset submit text

规定 input 元素的类型。

　　文本框<input type="txet" name="" id="" value="" />

　　密码框<input type="password" name="" id="" value="" />

　　文本域<textarea name="" id="" cols=""（字符多少） rows=""（几行高）></textarea>

　　隐藏域<input type="hidden" name="" id="" value="" />

2.2、按钮

　　提交按钮<input type="submit" name="" id="" disabled="disabled" value=""/>点击后转到form内的提交服务器的地址

　　重置按钮<input type="reset" name="" id="" disabled="disabled" value=""/>

　　普通按钮<input type="button" name="" id="" disabled="disabled" value=""/>

      图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址"/>

附：

    disabled，使按钮失效；enable，使可用。

2.3、选择输入

　　单选按钮组<input type="radio" name="" checked="checked" value=""/>   name的值用来分组；value值看不见，是提交给程序用的；checked，设置默认选项。

      复选框组<input type="checkbox" name="" checked="checked" value=""/>

　　文件上传<input type="file" name="" id="" />

                 <lable for=""></lable> <label> 标签为 input 元素定义标注（标记）。

    label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

下拉列表框

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

　　<select  name="" id="" size="" multiple="multiple">    --size=1时，为菜单；>1时，为列表。multiple为多选。

　　      <option value="值">内容1</option>

            <option value="值" selected="selected">内容2</option>    --selected，设为默认

            <option value="值">内容3</option>

　　</select>

例如：做一个用户注册表

<form action="Untitled-2.html" method="post">
<span>用户名：</span>
<input name="uid" type="text"/><br/><br/>
<span>密码：&nbsp;</span>
<input name="pwd" type="password"/><br/><br/>
<span>姓名：&nbsp;</span>
<input name="name" type="text"/><br/><br/>
<span>性别：&nbsp;</span>
男<input type="radio" value="true" name="sex" checked="checked"/>
女<input type="radio" value="false" name="sex"/><br/><br/>
<span>民族：</span>&nbsp;
<select name="nation">
    <option value="han">汉族</option>
    <option value="hui">回族</option>
    <option value="man">满族</option>
    <option value="wei">维吾尔族</option>
    <option value="meng">蒙古族</option>
</select><br/><br/>
<span>备注：&nbsp;</span>
<textarea name="bz" rows="5"></textarea><br/><br/>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>