HTML 表格表单

最新推荐文章于 2024-10-21 09:00:00 发布

原创最新推荐文章于 2024-10-21 09:00:00 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #表单 #表格 #隔行换色

html 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML中表格的创建、样式设置、隔行换色及长表格处理，包括基本语法、单元格合并和表格布局。同时，还探讨了HTML表单的创建，如文本框、密码框、按钮、单选按钮、多选框、下拉列表等，并介绍了label标签和表单项分组的应用。

文章目录

表格

在 HTML 中，使用 table 标签创建一个表格。表格也是一个块级元素

基本语法

<tr>表示表格中的一行，有几行就有几个 <tr>
<td>在<tr>中需要使用 <td>来创建单元格，有几个单元格就创建几个 <td>
<th>可以使用<th>标签来表示表头的内容，它的用法和 <td> 一样，不同的是有一个默认的样式，加粗并且居中

<body>
	<!-- table 表示一个表格-->
    <table>
    	<!-- tr 代表一行 -->
        <tr>
        	<!-- td 代表一列 -->
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果

合并单元格

rowspan 跨行合并单元格

<body>
    <table border="1">
        <tr>
            <td rowspan="2">我占2行</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果
colspan 跨列合并单元格

<body>
    <table border="1">
        <tr>
            <td colspan="2">我横跨2列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果

表格的样式

border-spacing table 和 td 之间默认有一个距离，通过 border-spacing 属性可以设置这个距离.

例如：
border-spacing:0px; 设置table和 td之间没有距离。

<style>
    table {
        border: 1px solid deeppink;
        border-spacing: 0;
    }

    td {
        border: 1px solid deeppink;
    }
</style>

<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

运行结果
border-collapse可以用来设置用来设置表格的边框合并

可选值：
collapse 表示合并

注意：设置了 border-collapse 以后，则 border-spacing 自动失效。

<style>
	table {
        border: 1px solid deeppink;
        border-spacing: 0;  /* 自动失效 */
        border-collapse: collapse;
 	}

    td {
        border: 1px solid deeppink;
    }
</style>

运行结果
隔行变色的效果

<style>
	table {
        border: 1px solid deeppink;
        border-collapse: collapse;
 	}

    td {
        border: 1px solid deeppink;
    }
    /* 设置偶数行背景颜色 */
    tr:nth-child(even) {
    	background: deepskyblue;
    }
    /* 设置奇数行背景颜色 */
    tr:nth-child(even) {
    	background: yellowgreen;
    }
</style>
<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
        </tr>
        <tr>
            <td>第五行第一列</td>
            <td>第五行第二列</td>
            <td>第五行第三列</td>
        </tr>
        <tr>
            <td>第六行第一列</td>
            <td>第六行第二列</td>
            <td>第六行第三列</td>
        </tr>
        <tr>
            <td>第七行第一列</td>
            <td>第七行第二列</td>
            <td>第七行第三列</td>
        </tr>
    </table>
</body>

运行结果

长表格

有一些情况下，表格非常的长。这时，就需要将表格分为3个部分【表头、主体、底部】。

在HTML中，提供了三个标签：
<thead></thead> 中的内容永远会显示在表格的头部。
<tbody></tbody> 中的额内容永远都会显示在表格的中间。
<tfoot><tfoot> 中的内容永远都会显示在表格的底部。

这三个标签的作用就是用来区分表格的不同部分，他们都是table的子标签，都需要直接写到 table 中。
如果表格中没有写tbody 浏览器会自动在表格中添加 tbody，并且将所有的 tr放到 tbody 里边。
所以注意：tr 不是 table 的子元素，而是tbody的子元素。

<style>
    table {
        border: 1px solid deeppink;
        border-collapse: collapse;
    }

    td {
        border: 1px solid deeppink;
        text-align: center;  /* 设置文字居中 */
    }
</style>
<body>
    <table>
    	<!-- 表头 -->
        <thead>
            <tr>
                <th colspan="4">编程语言</th>
            </tr>
        </thead>
        <!-- 表格主要内容 -->
        <tbody>
            <tr>
                <td>Java</td>
                <td>PHP</td>
                <td>Python</td>
                <td>web前端</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>Node.Js</td>
                <td>Vue.js</td>
                <td>React</td>
            </tr>
        </tbody>
        <!-- 底部 -->
        <tfoot>
            <tr>
                <td>世界上最优雅的语言是:</td>
                <td colspan="3">Python</td>
            </tr>
        </tfoot>
    </table>
</body>

运行结果

表格布局

以前表格更多的情况是对页面进行布局的，但是这种方式早已被CSS淘汰了。

表格的列数由td最多的那行决定。
表格可以嵌套，可以在 td中再放置一个table

表单

表单的作用就是将用户的信息提交给远程服务器的。比如：注册、登录、百度的搜索框

创建表单

使用 <form action="#"></form>标签创建一个表单，form 标签中必须指定一个 action 属性，该属性指向的是一个服务器的地址，当提交表单的时候，会提交到action属性所对应的地址。

表单项

如果希望表单项中的内容提交到服务器中，还必须给表单项指定一个 name 属性，表示提交内容的名字。

用户填写的信息会附在 URL 字符串的后边，以查询字符串的形式发送给服务器。
格式：
url地址?属性名=属性值&属性名=属性值&...

文本框

使用<input />来创建一个文本框，<input /> 是一个行内块元素，可以通过 value 属性设置文本框的默认值。
例如：

<body>
	<form action="#">
	    <input type="text" name="user-name" value="这是文本框的默认值">
	</form>
</body>

文本框

密码框

使用 <input /> 创建一个密码框，它的 type 属性值是 password
例如：

<body>
    <form action="#">
        <input type="password" name="user-pwd" />
    </form>
</body>

密码框

按钮

创建按钮有2中方式

使用 <input /> 标签来创建，它的 type 属性有三个值分别是botton 普通按钮、submit 提交按钮、reset重置按钮

<body>
    <form action="#">
        <input type="button" value="普通按钮" />
        <input type="submit" value="提交按钮" />
        <input type="reset" value="重置按钮" />
    </form>
</body>

运行结果

使用 <botton></botton>标签来创建，它的 type 属性有三个值分别是botton 普通按钮、submit 提交按钮、reset重置按钮

<body>
    <form action="#">
        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
    </form>
</body>

运行结果

单选按钮

使用 <input /> 来创建一个单选按钮，它的 type 属性值使用 radio

– 单选按钮通过 name 属性进行分组，name 属性相同的是一组按钮。
– 像这种用户选择的但不需要用户直接填写内容的表单项，还必须指定一个 value 属性，这样被选中的表单项的 value 值，将会被提交到服务器。

<body>
    <form action="#">
        <input type="radio" name="gender" value="man"> 男
        <input type="radio" name="gender" value="woman"> 女
    </form>
</body>

单选按钮

多选框

使用 <input> 创建一个多选框，它的 type 属性使用 checkbox ，用法和 单选按钮类似。

<body>
    <form action="#">
        <input type="checkbox" name="hobby" value="lq" />篮球
        <input type="checkbox" name="hobby" value="zq" />篮球
        <input type="checkbox" name="hobby" value="ppq" />乒乓球
    </form>
</body>

多选按钮

下拉列表

使用 select 来创建一个下拉列表，在下拉列表中，使用 option 创建列表项。
下拉列表的 name 属性需要指定给 select，value属性指定给 option

<body>
    <form action="#">
        <select name="star">
            <option value="fbb">范冰冰</option>
            <option value="zbs">赵本山</option>
            <option value="fw">范伟</option>
        </select>
    </form>
</body>

默认值

可以通过在 option 中通过添加 selected = "selected"将选项设置为默认选中状态。

<body>
    <form action="#">
        <select name="star">
            <option value="fbb">范冰冰</option>
            <!-- 默认选中 赵本山 -->
            <option value="zbs" selected="selected">赵本山</option>
            <option value="fw">范伟</option>
        </select>
    </form>
</body>

默认选中赵本山
当给下拉列表 select 添加一个 multiple="multiple" ，则下拉列表变为一个多选的下拉列表。

<body>
    <form action="#">
        <select name="star" multiple="multiple">
            <option value="fbb">范冰冰</option>
            <option value="zbs">赵本山</option>
            <option value="fw">范伟</option>
        </select>
    </form>
</body>

可以通过 optgroup对选项进行分组，同一个optgroup中的选项是一组。在optgroup中可以通过 lable 属性来指定分组的名字。

<body>
    <form action="#">
        <select name="star">
            <optgroup label="男孩">
                <option value="zs">张三</option>
                <option value="ls">李四</option>
                <option value="ww">王五</option>
            </optgroup>
            <optgroup label="女孩">
                <option value="zs">小红</option>
                <option value="ls">小兰</option>
                <option value="ww">小张</option>
            </optgroup>
        </select>
    </form>
</body>

运行结果

文本域

使用 textarea 创建一个文本域。
cols 设置列数
rows 设置行数

<body>
    <form action="#">
        <textarea name="test" cols="30" rows="10"></textarea>
    </form>
</body>

运行结果

label 标签

<label></label> 标签专门用来选中表单中的提示文字。
该标签可以指定一个 for 属性，该属性的值需要指定一个表单项的 ID 值，这样再选中文字的时候可以选择相应的表单项。

<body>
    <form action="#">
        <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />篮球</label>
        <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label>
        <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label>
    </form>
</body>

label

表单项分组

在表单中可以使用 <fieldset></fieldset> 来对表单项进行分组。可以将表单项中的同一组放到 <fieldset></fieldset> 中。
在<fieldset>中可以使用 <legend> 子标签来指定组名。

<body>
    <form action="#">
        <fieldset>
            <legend>用户信息</legend>
            用户名:<input type="text">
            密码:<input type="password">
        </fieldset>
        <fieldset>
            <legend>爱好</legend>
            <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />篮球</label>
            <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label>
            <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label>
        </fieldset>
        <fieldset>
            <legend>提交</legend>
            <button type="submit">提交按钮</button>
            <button type="reset">重置按钮</button>
            <button type="button">普通按钮</button>
        </fieldset>
    </form>
</body>