HTML表格、表单

最新推荐文章于 2022-04-16 13:01:00 发布

Karglo

最新推荐文章于 2022-04-16 13:01:00 发布

阅读量97

点赞数

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

本文链接：https://blog.csdn.net/changlinke/article/details/114109136

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML表格、表单

表格
表单

表格

<table></table>用于定义一个表格。
.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
th /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

如：

<!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="500" align="center" cellspacing="0" cellpadding="10">
        <caption>
            <h2>学生信息表</h2>
        </caption>
        <thead>
            <!-- tr用来定义一行 -->
            <tr>
                <!-- th是表头 -->
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- td是每一个行中的单元格 -->
                <td>1</td>
                <td>张三</td>
                <td>27</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>28</td>
            </tr>
        </tbody>

    </table>
</body>

</html>

table属性

在这里插入图片描述
如：

<table border="1" width="500" align="center" cellspacing="0" cellpadding="10">
</table>

表格标题

使用<caption></caption>定义表格标题，会在表格上方自动居中并加黑

合并单元格

跨行合并：rowspan
跨列合并：colspan

合并单元格的步骤：

先判断跨行合并还是跨列合并
跨行合并用rowspan属性，跨列合并用个colspan属性
将rowspan 或者colspan写在第一个要合并的单元格上
将合并的行数和列数写在指定的属性值上
将多余的单元格注释掉

表单

概述

表单主要用于对用户进行疏忽采集，让用户输入数据
比如登录，注册，添加，更改等所有需要用户输入数据的地方。

表单标签

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method用于设置表单数据的提交方式，其取值为get或post。
name用于指定表单的名称，以区分同一个页面中的多个表单。

input控件

input标签在from表单标签内部使用
主要属性值有以下几种：
在这里插入图片描述
注意：

radio如果是一组，必须给他们命名相同的名字name，这样就可以多个选其中的一个啦。
Input的size跟字体大小有关系，不设置的情况下，浏览器默认情况下，input默认的输入框的宽度就是169px

使用如下：

<!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 align="center" border="1" width="500" cellpadding="2" cellspacing="0">
        <caption>
            <h3>学员信息录入</h3>
        </caption>
        <!-- input : 以name=value 进行数据传递
            select : 以select的name=option的value 进行数据传递
        -->
        <form action="http://www.baidu.com" method="GET">
            <!-- 隐藏 -->
            <input type="hidden" name="id" value="2">
            <tr>
                <td>姓名</td>
                <!-- 普通输入框 -->
                <!-- placeholder : 输入框中默认提示信息 -->
                <td><input size="20" type="text" name="username" placeholder="请输入用户名"> </td>
            </tr>
            <tr>
                <td>密码</td>
                <!-- 密码输入框 -->
                <td><input type="password" name="password"> </td>
            </tr>
            <tr>
                <td>性别</td>
                <!-- 密码输入框 -->
                 <td>
                   <!-- 单选的name必须一致 -->
                    <input type="radio" name="sex" value="1"> 男
                    <input type="radio" name="sex" value="0"> 女
                    <!-- checked 默认选择项 
                        checked , checked=true , checked="checked"
                    -->
                    <input type="radio" name="sex" checked="checked" value="2"> 保密
                </td>
            </tr>
            <tr>
                <td>学校</td>
                <!-- 下拉列表 -->
                <td>
                    <!-- 对select添加 multiple 属性 可以选择多个项
                        对option添加 selected属性 设置默认选择项
                    -->
                    <select  name="edu">
                        <option value="河北科技大学1">河北科技大学</option>
                        <option value="河北师范大学1">河北师范大学</option>
                        <option selected="selected" value="河北地质大学1">河北地质大学</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>选修课程</td>
                <td>
                    <!-- 复选框默认选择的设置方式和单选一样 -->
                    <input type="checkbox" checked="checked" name="courses" value="java"> java
                    <input type="checkbox" name="courses" value="Oracle"> Oracle
                    <input type="checkbox" name="courses" value="Android"> Android
                </td>
            </tr>
            <tr>
                <td>自我评价</td>
                <td>
                    <textarea name="eval"  cols="30" rows="4"></textarea>
                </td>
            </tr>
            <tr>
                <td>上传头像</td>
                <td><input type="file"></td>

            </tr>
            <tr>
                <td>家庭地址</td>
                <td>
                    <!-- 不可选中,不可更改,不可传递 -->
                    <input disabled="disabled" type="text" name="addr" value="河北省石家庄市">
                    <!-- 可选中,不可更改,可传递 -->
                    <!-- <input readonly="readonly" type="text" name="addr" value="河北省石家庄市"> -->
                </td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <!-- 可以提交 -->
                    <button>button会触发action</button>
                    <!-- 普通按钮 -->
                    <button type="button">button[type="button"]不会触发action</button>
                    <!-- 普通按钮 -->
                    <input type="button" value="input[type='button']不会触发action">
                    <!-- 提交按钮 -->
                    <input type="submit" value="input[type='submit']会触发action">
                    <!-- 重置按钮 -->
                    <input type="reset" value="重置">
                    <!-- 使用图片代替提交按钮 -->
                    <input type="image" src="./images/faq01.jpg">
                </td>
            </tr>
        </form>
    </table>
</body>

</html>

Karglo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML表格、表单

HTML表格、表单表格标签table属性表格标题合并单元格表单概述表单标签input控件表格标签<table></table>用于定义一个表格。.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。th /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或
复制链接

扫一扫

专栏目录