HTML表格和表单（3）

最新推荐文章于 2024-08-23 10:53:05 发布

元气啵啵

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量790

点赞数 20

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_79795370/article/details/135612597

版权

本文详细介绍了HTML中表格的创建、样式调整，以及各种表单元素如文本框、单选按钮、复选框、下拉选择框的使用方法，展示了如何构建用户输入和数据展示的界面。

摘要由CSDN通过智能技术生成

<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>