HTML初学--表格和表单

最新推荐文章于 2024-11-01 15:19:31 发布

hello word?

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量178

点赞数

分类专栏：前段学习文章标签： html

本文链接：https://blog.csdn.net/dugu99/article/details/119889557

版权

前段学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格

1.表格的使用

<table>标签定义html表格。简单的html表格由table元素一级一个或多个<tr>、<th>或<td>元素组成表格结构(<tr> 表示表格的行，<th>常用于表头单元格，th单元格内的内容有居中加粗的效果,<td>表示表格用来包含数据的单元格)，Table标签经常需要配合caption thead tfoot tbody tr td th col colgroup一起使用。

2.表格的标签

标签	作用
<table>	在Html文档中代表表格，通过二维数据表表示数据
<caption>	表示表格的标题信息
<thead>	表示表头，包含了<tr>以及<td>
<tfoot>	表示表脚，包含了对表的总结信息
<tbody>	表示表格的表体，包含了很多<tr>
<tr>	表示表格的行，可以包含<td>,<th>元素
<td>	表示表格用来包含数据的单元格
<col>	定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为<colgroup>元素的子元素
<colgroup>	定义一个表中的一组列，只能作为table的子元素，位于<caption>元素后，其他元素之前

3.表格的属性

做一个简单的表格，课程表

实现代码如下：

<!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>课程表</title>
</head>

<body>
    <table border="1" width="100%" cellspacing="0" cellpadding="5px">
        <thead>
            <tr>
                <th colspan="6">课程表</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
            <tr>
                <th rowspan="4">上午</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
            <tr>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
            <tr>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
            <tr>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
            <tr>
                <th rowspan="4">下午</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
            <tr>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
            <tr>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
            <tr>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
                <th>html</th>
            </tr>
        </tbody>
    </table>
</body>

</html>

表单

作用：用来收集用户信息，与后台交互

form 输入框、单选按钮、多选按钮、下拉菜单

表单控件

input表单控件

Input控件用于接受来自用户的数据

      type属性，用于设定控件类型，取值如下：
        text   单行文本框
        password   密码框，输入的内容将会被遮挡。
        checkbox   复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。
        radio   单选按钮，必须使用value属性来描述该控件所提交的值，使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个控件。
        submit   提交按钮
        reset   重置按钮
        file   文件按钮，该控件用于选中文件系统中的某个文件
        hidden   隐藏域，该控件不显示在页面中，但是其值会被提交。
        image   图像按钮，必须使用src来加载图片，使用alt来声明替换文本。
        button   普通按钮

      其他属性
        ame    用于设定控件名和提交数据的属性名
        value   用于控件值初始化，可选       涉及到用户输入、选择时，必须选
        checked   单选框，复选框默认选中属性
        disabled   表示禁用组件，禁用组件的值也不能被提交
        size   当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20
        maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password。

select 用于表示下拉列表或列表

option 每一项

label 用于表示某一表单控件的标题

做一个简单注册页面：

实现代码如下：

<!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>注册</title>
</head>

<body class="zhuce">
    <form method="GET">
        <label>
        </label></form><br>
    <label>
            <span>注册类型：</span>
            <select name="lx">
                <option value="">请选择账号类型</option>
                <option value="vip">普通用户</option>
                <option value="dev">开发者</option>
            </select><br>
        </label>
    <label>
            <span>注册账号：</span>
            <input type="text" name="username" placeholder="请输入账号"><br>
        </label>
    <label>
            <span>输入密码：</span>
            <input type="text" name="password" id="" placeholder="请输入密码"><br>
        </label>
    <label>
            <span>重复密码：</span>
            <input type="text" name="repassword" id="" placeholder="请重新输入密码"><br>
        </label>
    <label>
            <span>注册QQ：</span>
            <input type="text" name="qq" placeholder="请输入QQ"><br>
        </label>
    <label>
            <span>选择密保：</span>
            <select name="mb">
                <option value="0">请选择密保问题</option>
                <option value="1">你爸爸的名字叫什么？</option>
                <option value="2">你妈妈的名字叫什么？</option>
                <option value="3">你配偶的名字叫什么？</option>
                <option value="4">你初恋的名字叫什么？</option>
                <option value="5">你的出生地在哪里？</option>           
            </select><br>
        </label>
    <label>
            <span>密保答案：</span>
            <input type="text" name="answord" placeholder="请输入密保答案"><br>
        </label>
    <label>
            <span>邀请码：</span>
            <input type="text" name="invitename" placeholder="请输入邀请人账号"><br>
        </label>
    <label>
            <span>&nbsp;</span>
            <input type="submit" value="立即注册">
        </label>
    </form>
</body>

</html>