HTML之表格、表单

遇安.YuAn

已于 2022-10-30 20:13:22 修改

阅读量608

点赞数 4

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

于 2022-10-30 09:41:24 首次发布

本文链接：https://blog.csdn.net/qq_62731133/article/details/127595327

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用

<table>

<tr>

<td>单元格</td>

</tr>

</table>

可以创建一个最简单的只有一行、一个单元格的表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表格</title>
</head>
<body>
<!--border用来设置边框宽度
align对齐方式
width表格宽度
height表格高度
-->
<!--让表格居中浏览器-->
<table align="center"border="1px"width="300px"height="200px">
    <!--让整行居中-->
    <tr align="center">
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr >
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr >
        <td>单元格</td>
        <td>单元格</td>
        <!--单独让一个单元格中的内容居中-->
        <td align="center">单元格</td>
    </tr>
</table>

<table border="1px"width="300px"height="200px">
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <!--行合并口诀：将后面的单元格注释掉，在前面的单元格上使用rowspan属性进行合并-->
        <td rowspan="2">单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <!--
        <td>单元格</td>
        -->
    </tr>

    <tr>
        <td>单元格</td>
        <!--列合并：两个单元格随意注释其中一个，在另一个单元格中使用colspan进行列合并，合并几个写几个-->
        <!--
        <td>单元格</td>
        -->
        <td colspan="2">单元格</td>
    </tr>

    <!--th标签也可以做单元格，会自动加粗，自动居中-->
    <th>单元格</th>
    <th>单元格</th>
    <th>单元格</th>


</table>
<br>

<!--表格是可以分为三部分的：表头、表体、表脚
thead tbody tfoot把表格分隔为三部分，在表现形式上没有任何变化
-->
<table border="1px">
    <thead>
    <tr>
        <td>单元格</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>单元格</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>单元格</td>
    </tr>
    </tfoot>


</table>

</body>
</html>

        用<form></form>可以创建一个表单。

        表单可以用来收集用户的数据，提交表单时，可以向服务器发送请求，并且还可以携带用户填写的数据。

form标签的属性：

        action属性用来指定请求路径，也就是说数据提交的时候，提交给谁。action属性和超链接的href属性相同，都是提供“请求路径”的。

method属性用来指定表单提交的方式，常见的有两种：

         get方式提交：提交的时候，提交的数据会直接显示在浏览器的地址栏上

         post方式提交：提交的时候，提交的数据不会直接显示在浏览器的地址栏上

当method缺省的时候，默认采用get方式提交。只有当method设置为post的时候，表单才会采用post方式提交。当使用超链接，或者直接在浏览器地址栏上输入URL，这些都是get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--当使用超链接，或者直接在浏览器地址栏上输入URL，这些都是get请求-->
<form action="http://www.baidu.com" method="get">
<!--提交按钮
input标签被称为输入域，当type是submit的时候，表示提交按钮
提交按钮具有提交表单的能力
提交表单就是发送请求，并且提交数据
<input type="submit“/>
-->
    <!--设置按钮上显示的文本，使用value属性-->
    <input type="submit" value="百度"/>
    <br>
    <!--普通按钮，不具备提交表单的能力-->
    <input type="button" value="百度按钮"/>
</form>
<br>
<!--submit按钮具有提交能力，但是要放到form表单内部，提交的是当前表单-->
<input type="submit" value="百度2"/>
<br>
<!--这样也可以画出一个按钮对象-->
<button>我是一个按钮对象</button>
</body>
</html>

         input标签是form表单中非常重要的输入域控件，所有的输入域控件都是用来收集用户的数据。用户实际上就是向输入域控件中输入数据的

input标签中最常用的属性是type属性，type属性用来设置输入域控件展示的样式：

        text 文本框

        password 密码框

        radio 单选按钮

        checkbox 复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单2</title>
</head>
<body>
<form action="http://localhost:8080/oa/login" method="get">
<h2>user login</h2>
<hr>
<!--文本框 对于文本框来说，是有value属性的，但是不需要程序员指定，因为用户会填写，用户填写的就是value-->
username:&nbsp;&nbsp;<input type="text" name="yonhuming"/><br>
<!--密码框-->
password:&nbsp;&nbsp;<input type="password" name="mima"/><br>

<!--这样写，会导致"hi=login"提交
<input type="submit" name="hi" value="login">
-->
<!--提交按钮  提交按钮只是为了起到提交的作用，按钮上的数据是不需要提交的，不需要提交的数据别写name属性-->
<input type="submit" value="login"/>
</form>
<!--
以上表单提交的时候，数据格式是：
http://localhost:8080/oa/login?yonhuming=zhan&mima=123
注意：当一个表单提交数据的时候，输入域控件必须有name属性，没有name属性，这个数据是不会提交的
任何一个浏览器都是采用以上的格式提交的
-->
</body>
</html>

注册表单：

以下是一个注册/提交简历的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
</head>
<body>
<form action="http://localhost:8080/oa/register" method="get">
    <!--对于文本框来说value是不需要程序员指定的，用户会填写-->
    用户名 <input type="text" name="username"/><br>
    <!--密码框的value也是用户填写的-->
    密码 <input type="password" name="password"/><br>
    性别
    <!--对于单选按钮来说，value属性是必须要提供的
    最终表单提交的数据是:sex=1或者sex=0
    男 女 这几个汉字是不会提交给服务器的，汉字只是一个参考
    对于同一组单选按钮来说，name属性必须一致，才可以保证单选
    checked默认选中
    女<input type="radio" name="sex" value="0" checked/>
    -->
    男<input type="radio" name="sex" value="1"/>
    女<input type="radio" name="sex" value="0"/>
    <br>

    学历
    <!--下拉列表 selected默认选中
     <option value="4" selected>硕士</option>
     -->
    <select name="grade">
        <!--选项 真正提交的是value-->
        <option value="">--请选择学历--</option>
        <option value="1">高中</option>
        <option value="2">大专</option>
        <option value="3">本科</option>
        <option value="4">硕士</option>
    </select>
    <br>
    兴趣
    <!--同一组的复选框，name属性也必须一致-->
    打篮球<input type="checkbox" name="aihao" value="ba"/>
    踢足球<input type="checkbox" name="aihao" value="foot"/>
    羽毛球<input type="checkbox" name="aihao" value="yu"/>
    <br>
    简介
    <!--文本域
    对于textarea来说value是不需要的
    -->
    <textarea rows="10" cols="60" name="jianjie"></textarea>
    <br>
    <!--提交表单-->
    <input type="submit" value="注册"/>
    <!--重置表单-->
    <input type="reset" value="重置"/>

    <br>
    <!--下拉列表怎么显示多个条目，怎么支持多选
    size属性：用来设置下拉列表一次可以显示的条目数量
    multiple属性：用来设置支持多选 按住ctrl键即可多选
    -->
    省份：
    <select name="province" size="4" multiple>
        <option value="">--请选择省份--</option>
        <option value="1">湖南省</option>
        <option value="2">湖北省</option>
        <option value="3">河南省</option>
        <option value="4">河北省</option>
        <option value="5">山西省</option>
        <option value="6">陕西省</option>
    </select>

</form>
</body>
</html>