【无标题】

最新推荐文章于 2024-06-07 19:31:00 发布

lingxiaoxing

最新推荐文章于 2024-06-07 19:31:00 发布

阅读量109

点赞数

分类专栏： HTML 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_46471322/article/details/127180326

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML表格与表单

文章目录

HTML表格与表单

1.表格标签

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

看一个简单的表格案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</body>
</html>

看一下效果：

可以看出是和我们预期的表格是不太一样的！那是因为在表格中我们并没有去添加属性，像表格的边框也乜有去规定！现在我们看一下表格中的**

**的属性！

1.1 table标签的属性

属性名	介绍
width	宽度，默认单位为px(像素)，可省略,可以写成百分比的形式，百分比是按照父元素的百分比，如果没有父元素，那就是默认为body的百分比！
height	高度，默认单位为px，可省略，也可写成百分比的形式，同上
broder	边框大小
brodercolor	边框颜色
bgcolor	表格的背景颜色
color	表格中的文字颜色
align	表格的对齐方式，默认为left(左对齐),可以为right(右对齐)或center(居中对齐)
cellspacing	单元格与单元格之间的空隙
cepppadding	单元格与内容之间的空隙

接下来我们写一个案例，来具体看一下关于这些属性的应用!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="50%" heigth="50%" align="center"
    bordercolor="red"
    bgcolor="yellow"
    cellspacing="0"
    cellpadding="10"
    >
        <tr>        
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</body>
</html>

实现效果：

chrome_7mY3kSOzRK

1.2 tr行中的属性

表格中，除了对整个表格进行调整，当然也可以对单行进行操作！

属性	介绍
color	文字颜色
height	高度，同上
align	文字的水平对齐
valign	文字的垂直对齐，默认为top(顶部对齐),还可设置成bottom(底部),middle(中间)

案例操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300" bgcolor="pink">
        <tr color="blue" heigth=50 bgcolor="yellow" align="center" valign="bottom">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

效果：

1.3td单元格的属性

属性	介绍
height	高度
width	宽度
bgcolor	背景颜色
align	文字水平对齐
valign	文字垂直对齐

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" bgcolor="pink" width="400">
        <tr>
            <td >1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr heigth="60px">
            <td>4</td>
            <td>5</td>
            <td height="50" align="right" valign="top">6</td>
        </tr>
    </table>
</body>
</html>

效果：

1.4表格合并

在实际应用中我们经常用到表格中的合并，有的是行合并，有的是列合并，在编写表格的时候，我们也会用到表格的合并操作！

合并属性	介绍
Colspan	所要合并的单元格的列数，必须加在td上
Rowspan	所要合并的单元格的行数，必须加在td上

直接上代码！

当我们想实现一个这样的表格时，我们需要怎么去编写呢！

我们对表格结构进行一个简单的分析，这个表格时在第一行第二个单元格对列进行了合并，合并了下面这个单元格，然后在第三行第二个单元格进行了行的合并，知道了这些实现表格就很简单了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="500">
        <tr align="center">
            <td>1</td>
            <td rowspan="2">2</td>
            <td>1</td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>1</td>

        </tr>
        <tr align="center">
            <td>1</td>
            <td colspan="2" align="center">1</td>
        </tr>
    </table>
</body>
</html>

2.表单标签****

我们所编写的表格时不能进行操作的，那么怎么在网页上输入自己的数据呢!比如说在网页上登录用户的用户名，密码时就需要用到表单标签了!

表单标签

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

action=“” 服务器地址，
method=“” get / post

2.1action属性

action 属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面！

2.2method属性

method 属性规定在提交表单时所用的方法（GET 或 POST）

2.2.1method中的GET提交

如果表单提是被动的，且没有任何敏感信息！那么我们就可以采用GET的方式进行提交表单！

当您使用 GET 时，表单数据在页面地址栏中是可见的，安全性较低

<form action="url" method="get" ></form>

2.2.2method中的post提交表单

如果表单正在更新数据，或者包含敏感信息！就用POST去提交表单！

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

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

2.3Target属性

在表单进行跳转的时候，我通常会规定跳转的属性，是在本身窗口打开，还是在一个新的窗口打开，而target属性正是用来实现这一跳转的属性!target默认值为__self，也就是在本窗口打开，还可设置为_blank,在新的窗口打开！

2.4Input标签的介绍

在表单中，我们主要是用来收集一些信息，而input标签可以通过不同的属性值，开显示不同的效果

标签名	type属性值	说明
input	text	文本框，用来输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--action后面是我们需要提交的页面-->
    <form method="post" action="http://www.baidu.com" target="_blank">
        用户信息:<input type="text" name="user" placeholder="请输入用户名" ><br>
        密码:&emsp;&emsp;<input type="password" name="password" placeholder="请输入密码"><br>
        <p>清选择你的性别：</p>
        <input type="radio" name="sex" value="male">男<br>
        <input type="radio" name="sex" value="female">女<br>
        <p>请选择你的选修课名称:</p>
        <input type="checkbox" name="curriculum" value="pingpang">乒乓球<br>
        <input type="checkbox" name="curriculum" value="yumao">羽毛球<br>
        <input type="checkbox" name="curriculum" value="basketball">篮球<br>
        <input type="checkbox" name="curriculum" value="taichi">太极<br>
        <input type="checkbox" name="curriculum" value="tennis">网球<br>
        <input type="submit" value="登录">
        <button type="submit">提交</button><br>
        <input type="reset" value="清空">
        <button type="reset"> 清空</button>
    </form>
</body>
</html>

结果：

2.5textarea文本域标签

在网页中提供多行文本输入！

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
    
       <p>用来输入多行文本:<textarea></textarea></p> 

    </form>
</body>

显示：

2.6label标签

label标签常用来绑定内容与标签之间的关系！相当于把选中的目标区域方法!拿单选框来说，我们选择单选框，可以不仅直接选框，当我们选择文字的时候，也可进行选中操作！这时就可以用到label！

具体的用法就是用label标签把想要扩大范围的标签套起来！

<label><input type="radio" name="sex">中性</label>

2.7select下拉菜单标签

在网页中提供多个选项的下来菜单表单控件！

主要有select(下拉菜单整体)与option(下拉菜单选项)组成,

代码示例：

<!DOCTYPE html>
<head>
</head>
<body>
    <form>  
        选择年份
    <select>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
        <option selected>2004</option>
        <option>2005</option>
        <option>2006</option>
    </select>
    </form>
</body>
</html>

实现效果：