html表格和表单
HTML表格
表格是由行和列组成的栅格,这些行和列组成一个个单元格,每个单元格都可以用于放置文本或图形等。
表格由<table>开始,由</table>结束
<tr>标签定义表格的行,表格有多少行,就有多少个<tr>标签
<td>标签定义表格的单元格,有多少单元格就有多少标签
<th>标签定义表格的表头,与<td>类似,内容会加粗显示
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <title>表格标签示例</title> </head> <body> <table > <tr><th>第一讲</th><th>第二讲</th><th>第三讲</th></tr> <tr><td>HTML概念</td><td>HTML元素</td><td>HTML属性</td></tr> </table> </body> </html>
width,height这两个属性用于设置表格的大小。如果不设置会根据各行各列的总和来确定宽高。可以使用具体的数字(单位是像素)来表示,也可以是用百分比的形式(与整个屏幕相比)
border属性,设置表格的边框的大小,表示边框的边厚度和框线。如果设置成0,表示不需要边框和框线
rowspan和colspan属性用在<td>或<th>标签中,表示单元格要跨越的行的个数或列的个数。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <title>表格标签示例</title> </head> <body> <table border="2" width="50%" height="50%"> <tr><th rowspan="2">第一讲</th><th>第二讲</th><th>第三讲</th></tr> <tr><td>HTML概念</td><td>HTML元素</td><td>HTML属性</td></tr> </table> </body> </html>
HTML表单
表单用于收集不同类型的用户输入,是实现动态交互的基础。
常用表单元素
元素描述 |
元素类型 |
单行文本框 |
text |
密码框 |
password |
单选按钮 |
radio |
复选框 |
check |
多行文本框 |
textarea |
下拉列表 |
select |
提交按钮 |
submit |
重置按钮 |
reset |
1表单
所有表单元素都应该在<form>和</form>之间,表单之间不可以嵌套或者重叠
method属性设置表单的提交方式,默认为get. get表示表单数据作为URL变量提交,post表示表单数据作为HTTP post方式发送。
action属性设置表单的提交对象,action=”deal.jsp”表示表单元素的信息提交给服务器上的deal.jsp
1 单行文本框
size属性设置文本框的显示长度,默认值为20
value属性设置文本框的初始值
readonly属性,文本框的内容不能被编辑
name文本域的名称
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <title>单行文本框示例</title> </head> <body> <form method="post" action="deal.jsp"> <input type="text" name="username" size="20"> <input type="text" name="username1" size="20" value ="sun" readonly> </form> </body> </html>
2密码框
输入的内容看不到,但是可以被发送到服务器
属性和单行文本框类似
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head><title>密码框示例</title></head> <body> <form action="deal.jsp"> <input type="password" name="pw" size="20" value="123"> </form> </body> </html>
3 单选按钮
checked属性表明该选项被默认选中
为实现选项之间的单选效果,需要每个选项的name属性保持一致
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head><title>单选按钮示例</title></head> <body> <p><input type="radio" name="career" value="工人" checked>工人</p> <p><input type="radio" name="career" value="农民">农民</p> <p><input type="radio" name="car" value="我">我</p> </body> </html>
4 复选框
为实现服务器端一次性读取所有选中的选项,需要每个选项的name一致
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head><title>复选框示例</title></head> <body> </p> <input type="checkbox" name="hobbies" value="音乐">音乐 <input type="checkbox" name="hobbies" value="旅游" checked>旅游 <input type="checkbox" name="hobbies" value="读书">读书 </p> </body> </html>
5 多行文本框
rows属性文本的行数
cols属性文本的列数
文本的初始内容写在<textarea></textarea>之间
注:多行文本框不是input type
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head><title>多行文本框示例</title></head> <body> <p>请输入你的留言</p> <p><textarea name="message" rows="5" cols="30">此处输入内容</textarea></p> </body> </html>
6 下拉列表
size表示下拉列表可见选项
multiple属性可以设置为选择多项,当设置为多项的时候,size需要设置为大于1
selected属性表明该项是默认选中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head><title>下拉列表示例</title></head> <body> <select size="2" name="mysite" multiple="multiple"> <option value="163" selected>网易</option> <option value="sohu">搜狐</option> <option value="sina">新浪</option> </select> </body> </html>
7 提交按钮
type=”submit”是提交按钮的标识
value是提交按钮的值,同时也是提交按钮上显示的内容
name是提交按钮的名字,可以根据这个名字来获取提交按钮的值
每个表单至少由一个提交按钮完成提交,可以有多个按钮完成不同的提交动作
多个提交按钮的名字可以相同,但是值不一样;也可以使用不同的名字,根据名字区分不同的提交按钮
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head><title>提交按钮示例</title></head> <body> <input type="submit" value="提交" name="b1"> </body> </html>
8重置按钮
把表单元素恢复到原始状态
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head><title>重置按钮示例</title></head> <body> <input type="reset" value="重置" name="b2"> </body> </html>
作者:孙建钊
出处:http://www.cnblogs.com/sunjianzhao/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。