HTML中得表格和表单(第二天)
表格标签
创建表格
在HTML网页中,创建表格的基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
1.table用于定义一个表格。
2.tr用于定义表格中的一行,必须嵌套在table标签中,在table中包含几对tr,就有几行表格。
3.td/td:用于定义表格中的单元格,必须嵌套在标签中,一堆中包含几对,就表示该行有多少列(或多少单元格)
注意:
1.中只能嵌套
2.标签,他就像一个容器,可以容纳所有的元素
表格属性
表格结构
<table>
//头部
<thead>
<tr>
<th ></th>
</tr>
</thead>
//主体
<tbody>
<tr>
<td></td>
</tr>
</tbody>
//页脚
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
表格标题
表格标题:caption
定义及用法
caption元素定义表格标题
<table>
<caption>我是表格标题</caption>
</table>
注意:caption标签必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
合并单元格
跨行合并:rowspan
跨列合并:colspan
公式:删除的个数 = 合并的个数 - 1
合并的顺序:先上 先左
表单标签
input控件
属性
lable标签
lable标签为input元素定义标签
作用:当绑定一个表单元素,当点击lable标签的时候,被绑定的表单元素就会获得输入焦点。
代码如下
<!-- 表单 -->
<!-- label 光标自动定位,根据id值 -->
<label for="username">用户名</label>
<input type="text" id="username" name="username">
textarea控件(文本域)
用来输入大量的信息,可以轻松地创建多行文本输入框,语法格式如下:
<!-- textarea 文本域控件 -->
<textarea cols="10" rows="10">
夜,结束了一天的喧嚣后安静下来,伴随着远处路灯那微弱的光。风,毫无预兆地席卷整片旷野,撩动人的思绪万千。星,遥遥地挂在天空之中,闪烁着它那微微星光,不如阳光般灿烂却如花儿般如痴如醉。
</textarea>
下拉菜单(select控件)
select控件定义下拉菜单拿的基本语法格式如下:
<!-- 下拉菜单
selected="selected" 默认选中
-->
<select>
<option>家里蹲</option>
<option>英国</option>
<option>美国</option>
<option selected="selected">中国</option>
<option>俄国</option>
</select>
表单域(form标签)
<!-- 表单域 -->
<form action="http://www.baidu.com" method="post" name="MyiPhone">
<label for="name">用户名</label>
<input type="text" name="name" id="name" value="admin"/><br>
<label for="password">密 码</label>
<input type="password" name="password" id="password" value="admin"/><br>
<input type="submit" id="submit" name="submit" value="提交"><br>
</form>
常用属性:
1.Action
action属性用于指定接收并处理表单数据的服务器程序的url地址
2.method
用于设置表单数据的提交方式,其取值为get或post
3.name
用于指定表单的名称,以区分同一个页面中的多个表单
注意:每个表单都应该有自己的表单域