HTML每日学习代码：表格和表单

原创已于 2023-07-10 10:04:02 修改 · 446 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习 #前端

于 2023-07-09 10:41:54 首次发布

HTML5 专栏收录该内容

5 篇文章

订阅专栏

<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>姓&nbsp;&nbsp;&nbsp;&nbsp;名：
        <input type="text" class=txt size="12" maxlength="20" name="username">
    </p><p>姓&nbsp;&nbsp;&nbsp;&nbsp;别：
        <input type="radio" value="male"/>男
        <input type="radio" value="female"/>女
    </p><p>年&nbsp;&nbsp;&nbsp;&nbsp;龄：
        <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>