首页 > 博客列表 > HTML表格与表单的标签与属性

博主信息

博文 4

粉丝 0

访问量 4133

专题推荐

更多>

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

border【边框属性】
border="1" 可自定义单元格边框大小
cellspacing【单元格之间的间距属性】
cellspacing="0" 可自定义单元格之间间距
cellpadding【单元格内间距属性】
cellpadding="5" 可自定义单元格内间距
width【宽度属性】
width="50%" 可使用百分比、px、em、rem、vw、vh等单位
heigth【高度属性】
heigth="50%" 可使用百分比、px、em、rem、vw、vh等单位
bgcolor【背景颜色属性】
bgcolor="red" 可自定义背景颜色
align【对齐属性】
align="center" 只有left、right 、center、justify
rowspan【纵向单元格合并】
rowspan="3" 数值为3则纵向合并3个单元格
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 标签可包含以下四种标签

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

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

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

2.表单属性

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

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

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

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

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>

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>

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>

总结：

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

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法使用

2021-03-19 17:09:34