<table>:标识一个表格对象的开始。border可以改变表格边框类型,bgcolor可以改变表格背景颜色
<tr>: 表示表格一行的开始。
<td>:标识表格某行中的一个单元格的开始。
单行文本输出框:
<input type="text" name="…" size="…" maxlength="…" value="…">
type="text"定义单行文本输出框,name设置文本框的名称,size设置文本框宽度,maxlength设置文本框设置最大输入字数,value设置文本框的初始值。
多行文本输出框:
<textarea name="…" cols="…" rows="…" wrap="…"></textarea>
cols设置文本框的宽度,rows设置文本框的高度,wrap设置输入内容超出文本域时的显示方式。
单选按钮:
<input type="radio" name="" value="">
type="radio"定义单选按钮,name设置按钮名称,同一组单选项的名称相同,value摄制单选按钮的值,同一组中值域不同。
复选框:
<input type="checkbox" name="" value="">
type="checkbox"定义复选框。
相信大家已经发现了,改变type后面的值对应不同按钮,其他常见按钮:button表示普通按钮,submit表示提交按钮,reset表示重置按钮。
下拉选择框:
<select name="" size="" multiple>
<option value="" selected>
……
</option>
……
</select>
size定义下拉选择框的行数,multiple表示可以多选,没有multiple就只能单选,selected表示默认已经选择本选项。
7.8日代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格基本结构</title>
</head>
<body>
<h4>带有标题的表格</h4>
<table border="8"
bgcolor="green">
<caption>数据统计表</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>排列单元格中的内容</h4>
<table width="400" border="8" bgcolor="green" cellpadding="10">
<tr>
<th align="left">项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<th align="left">衣服</th>
<th align="right">¥241.10</th>
<th align="right">¥50.20</th>
</tr>
<tr>
<th align="left">化妆品</th>
<th align="right">¥30.00</th>
<th align="right">¥44.45</th>
</tr>
<tr>
<th align="left">食物</th>
<th align="right">¥730.40</th>
<th align="right">¥650.00</th>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">¥1001.50</th>
<th align="right">¥744.65</th>
</tr>
</table>
<h4>表单</h4>
<form>
下面是输入用户登录信息
<br>
用户名称
<input type="text" name="user">
<br>
用户密码
<input type="password" name="password">
<br>
<input type="submit" value="登录">
</form>
<h4>选择感兴趣的图书</h4>
<form>
请选择您感兴趣的图书类型:<br>
<input type="radio" name="book" value="Book1">网站编程<br>
<input type="radio" name="book" value="Book2">办公软件<br>
<input type="radio" name="book" value="Book3">设计软件<br>
<input type="radio" name="book" value="Book4">网络管理<br>
<input type="radio" name="book" value="Book5">黑客攻防<br>
</form>
<h4>复选框</h4>
<form>
请选择您感兴趣的图书类型:<br>
<input type="checkbox" name="book" value="Book1">网站编程<br>
<input type="checkbox" name="book" value="Book2">办公软件<br>
<input type="checkbox" name="book" value="Book3">设计软件<br>
<input type="checkbox" name="book" value="Book4">网络管理<br>
<input type="checkbox" name="book" value="Book5">黑客攻防<br>
</form>
<h4>下拉选择框</h4>
<form>
<select name="fruit" size="3" multiple>
<option value="Book1">网站编程
<option value="Book2">办公软件
<option value="Book3">设计软件
<option value="Book4">网络管理
<option value="Book5">黑客攻防
</select>
</form>
<h4>用户反馈表单</h4>
<form method="post">
<p>姓 名:
<input type="text" class=txt size="12" maxlength="20" name="username">
</p><p>姓 别:
<input type="radio" value="male"/>男
<input type="radio" value="female"/>女
</p><p>年 龄:
<input type="text" class=txt name="age"/>
</p>
<p>联系电话:
<input type="text" class=txt name="tel"/>
</p><p>电子邮件:
<input type="text" class=txt name="email"/>
</p><p>联系地址:
<input type="text" class=txt name="address">
</p>
<p>
请输入您对网站的建议<br>
<textarea name="yourworks" cols="50" rows="5"></textarea>
<br>
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="rest" value="清除"/>
</p>
</form>
</body>
</html>