HTML表格与表单的标签与属性

HTML表格与表单的标签与属性

表格的标签与属性

1.标签

table：表格标签<table></table>

tr：表格行标签<tr></tr>

td：标准单元格<td></td>

th：表头单元格<th></th>

table表格由 tr 和 td / th 标签组成

实例一：

//实例一源码
<table  border="1">
    <tr>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
    </tr>
    <tr>
        <td>拖鞋</td>
        <td>35元</td>
        <td>15对</td>
    </tr>
    <tr>
        <td>棉拖</td>
        <td>68元</td>
        <td>10对</td>
    </tr>
</table>

---

复杂结构的表格由更多的HTML标签组成

caption：表格标题标签<caption></caption>

标签必须直接放置到 <table> 标签之后。
每个表格只能定义一个标题

thead：表头标签<thead></thead>

tbody：表格主体标签<tbody></tbody>

tfoot：表注标签<tfoot></tfoot>

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

实例二：

//实例二源码
<table border="1">
<caption>沃尔玛拖鞋采购单</caption>
    <thead>
        <tr>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>拖鞋</td>
            <td>35元</td>
            <td>15对</td>
        </tr>
        <tr>
            <td>棉拖</td>
            <td>68元</td>
            <td>10对</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>备注:</td>
            <td colspan="2">2021年3月21日采购</td>
        </tr>
    </tfoot>
</table>

---

table属性

1. border【边框属性】
   border="1" 可自定义单元格边框大小
2. cellspacing【单元格之间的间距属性】
   cellspacing="0" 可自定义单元格之间间距
3. cellpadding【单元格内间距属性】
   cellpadding="5" 可自定义单元格内间距
4. width【宽度属性】
   width="50%" 可使用百分比、px、em、rem、vw、vh等单位
5. heigth【高度属性】
   heigth="50%" 可使用百分比、px、em、rem、vw、vh等单位
6. bgcolor【背景颜色属性】
   bgcolor="red" 可自定义背景颜色
7. align【对齐属性】
   align="center" 只有left、right 、center、justify
8. rowspan【纵向单元格合并】
   rowspan="3" 数值为3则纵向合并3个单元格
9. colspan【横向单元格合并】
   colspan="6" 数值为6则横向合并6个单元格

实例三

//实例三源码
<table border="1" width="50%" cellspacing="0" cellpadding="5" align="center" >
        <caption>
            <h3>山卡拉课程表</h3>
        </caption>
        <thead style="background-color: #e60021;">
            <tr>
                <th>时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td rowspan="4" bgcolor="lightyellow">上午</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>体育</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>体育</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>美术</td>
                <td>数学</td>
                <td>计算机</td>
                <td>音乐</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>美术</td>
                <td>计算机</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
        </tbody>
        <tbody align="center">
            <tr>
                <td colspan="6" bgcolor="violet">课间午休</td>
            </tr>
        </tbody>
        <tbody align="center">
            <tr>
                <td rowspan="3" bgcolor="lightyellow">上午</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>体育</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>美术</td>
                <td>数学</td>
                <td>计算机</td>
                <td>音乐</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>美术</td>
                <td>计算机</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
        </tbody>
    </table>

表单的标签与属性

1.表单的标签

form 标签用于创建表单
form 标签可包含以下四种标签

1. <input> 标签用于搜集用户信息
2. <fieldset></fieldset> 元素可将表单内的相关元素分组
3. <textarea></textarea> 多行文本输入控件标签
4. <legend></legend> 元素为 fieldset 元素定义标题
5. <label></label> 元素为元素定义标记
6. <select></select> 元素为下拉选项框
7. <option></option> 标签用于定义列表中的可用选项。
8. <datalist></datalist> 标签定义选项列表,请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

2.表单属性

<form action="" method="post"></form>

1. action 规定当提交表单时向何处发送表单数据。
2. method 规定表单提交方式，方式分为get和post两种。

<label for="username">账号:</label>
<input type="text" name="username" id="username" autofocus required placeholder="必须是6-8位">

1. for 绑定指定表单元素。
2. type 设定元素类型。
   • button 按钮
   • checkbox 多选框
   • file 文件选择
   • hidden 隐藏
   • image 图片
   • password 密码
   • radio 单选框
   • reset 重置按钮
   • submit 提交按钮
   • text 文本输入框
3. name 元素名称。
4. id 元素ID。
5. autofocus 自动获取焦点。
6. required 设定该元素为必填项。
7. placeholder 规定帮助用户填写输入字段的提示。
8. value 设定元素值

   <label>段位：
    <select name="level" id="">
        <option value="1" selected>青铜</option>
        <option value="2">黄金</option>
        <option value="3">铂金</option>
        <option value="4">钻石</option>
        <option value="4">超凡大师</option>
        <option value="4">王者</option>
    </select>
   </label>

9. selected 默认选项

   <label>搜索：
    <input type="text" name="search" id="" list="keyword">
    <datalist id="keyword">
        <option value="php"></option>
        <option value="python"></option>
        <option value="javascript"></option>
        <option value="java"></option>
    </datalist>
   </label>

10. list 与datalist进行绑定

完整示例图

完整示例源码

       <form action="" method="post">
            <fieldset style="width: 230px;">
                <legend>必填项</legend>
                <div>
                    <label for="username">账号:</label>
                    <input type="text" name="username" id="username" autofocus required placeholder="必须是6-8位">
                </div>
                <div>
                    <label for="password">密码:</label>
                    <input type="password" name="password" id="password" required placeholder="必须是字母+数字">
                </div>
                <div>
                    <label for="email">邮箱:</label>
                    <input type="email" name="email" id="email" placeholder="demo@mail.com">
                </div>
            </fieldset>
            <div>
                <label for="gender">性别：</label>
                <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
                <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
                <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
            </div>
            <div>
                <label for="gender">爱好：</label>
                <input type="checkbox" name="hobby[]" value="php" id="php"><label for="php">PHP</label>
                <input type="checkbox" name="hobby[]" value="javascript" id="javascript"><label
                    for="javascript">JavaScript</label>
                <input type="checkbox" name="hobby[]r" value="java" id="java"><label for="java">Java</label>
                <input type="checkbox" name="hobby[]r" value="python" id="java"><label for="python">python</label>
            </div>
            <div>
                <label>段位：
                    <select name="level" id="">
                        <option value="1" selected>青铜</option>
                        <option value="2">黄金</option>
                        <option value="3">铂金</option>
                        <option value="4">钻石</option>
                        <option value="4">超凡大师</option>
                        <option value="4">王者</option>
                    </select>
                </label>
                <label>搜索：
                    <input type="text" name="search" id="" list="keyword">
                    <datalist id="keyword">
                        <option value="php"></option>
                        <option value="python"></option>
                        <option value="javascript"></option>
                        <option value="java"></option>
                    </datalist>
                </label>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>

总结：

1. HTML 标签元素很多，要彻底掌握要多写多练。
2. 熟悉各类型标签的组合结构使用，有利于页面布局与SEO优化