HTML 表格 表单

Day7
主要内容
表格
表单
内联框架

表格
网页布局只有两种：table div
想要在网页中画一个表格，需要用到table

<table>
	<tr>
		<td></td>
</tr>
<tr></tr>

</table>

<table border="5" width="300" height="200" align="center" bordercolor="red" cellspacing="0">
			<caption><strong>这是张三的考试成绩</strong></caption>
			
			<tr bgcolor="red">
				<th align="center">语文</th>
				<th align="center">数学</th>
			</tr>
			<tr>
				<td align="center">100</td>
				<td align="center">90</td>
			</tr>
		</table>

关于属性说明如下:
border=”1” 给表格加边框 ，如果不需要边框，可以使用border=”0’来去掉
width=“300” 给表格加宽度
height=“200” 给表格加高度
align=“center” 设置水平对齐方式(可以用在table标签，也可以用在td标签)
bordercolor=“red” 边框加颜色
cellspacing=“0” 去掉单元格之间的空白

<caption><strong>这是张三的考试成绩</strong></caption>

给表格加大标题

<th align="center">语文</th> 

表格中的第一行如果是标题，可以使用th,它写在tr中
valign=”middle” 设置垂直方向上居中。

表格中关于合并单元格：
合并列的单元格 colspan=”几个单元格”
合并行的单元格 rowspan=”几个单元格
上述两个属性用在td中”
表单
表单的主要目的：是用来接收用户输入的

<form method=””  action=””>
</form>

method: post:不会把用户输入的信息在地址栏显示 但是它的提交数量有限 512KB
get: 会把用户输入的信息在地址栏显示 没有提交限制
action:将用户输入的数据提交到何处。Demo1.html
常用的表单元素：
文本框

type=”text” 说明是文本框
name:表示给文本框起个名字
size：表示文本框的宽度
maxlength：限制输入的长度
value:给一个默认值
placeholder:提示语
密码框

type=”password” 说明是密码框

单选按钮

Type=”radio” 代表是单选按钮
一个单选按钮组的name属性必须一致。Value值是给后台取值用的
checked=”checked” 代表默认选中。

复选框

爱好:<input type="checkbox" name="hobby"  value="baskerball"/>打篮球 <input type="checkbox" name="hobby" value="sing"/> 唱歌 
			<input type="checkbox" name="hobby" value="dancer"/>跳舞

爱好:打篮球
唱歌
跳舞

Type=”checkbox” 代表是复选框
一个复选框组的name属性必须一致。Value值是给后台取值用的
checked=”checked” 代表默认选中。

下拉列表
selected=”selected” 默认选中
value是为了给后台提交使用

按钮：
提交按钮:
type=”submit” 说明是提交按钮，点击该按钮，会提交表单

图片按钮：

<input type="image" src="img/btn_reg.gif" name="submit"/>

src:中选择你使用的图片的路径
普通按钮:

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

文本域:

<textarea name="pinglun" rows="10" cols="100"></textarea>

cols：列
rows：行

文件域:

个人头像:<input type="file" name="touxiang" />