Web前端——HTML表单及表格_html前后端表格-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_25592087/article/details/127060847

HTML表单

作用：用于接收和收集用户的输入信息。

表单许多属性，常用的有以下：

name属性：name属性用于规定input元素的名称，向后台传值的描述
id属性：用于css引用或者其他引用
value属性：用于定义input框的初始值，常用于举例说明该文本框输入的内容
placeholder：表单提示信息
disabled：控制表单是否禁止操作 true false
readonly: 只读不可操作
required：必填字段提示
type属性:用于设置输入框的类型，最重要的属性

一、form标签:一般在向后台提交数据时使用

1、在html中，通常把form标签称为表单

2、常见的表单元素有输入框，单选框，复选框，文本域，密码框等

3、form的属性：（1）action：放置后台地址（2）method：请求方式 get post

get请求和post请求的区别：

（1）get是明文（值展示在网址上） post不会

（2）get请求发相对来说比post更快捷post传递东西更大（传递文件）

<form action="https://youkuaiyun.com" method="get">   <!-- action：放置后台地址 method：请求方式 get post -->

二、input标签:

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。

input->type属性：

1、text:文本框

2、password：密码框

3、submit:提交按钮按钮改文字用value

4、radio：单选框注意点：name属性保持一致

5、checkbox：多选框单选框和多选框默认选中属性checkbox

6、file:文件上传需要配合js实现

7、reset:重置重置内容和重置按钮放到同一个form标签中

8、button按钮：input（button）情况改文字用value

9、hidden：没有实际效果，但是默认提交内容

三、表单其他标签

1、select元素：可创建单选或多选菜单

option标签下拉选择框

2、textarea标签定义多行的文本输入控件

默认可以拖拽，可以通过CSS设置resize:none固定大小

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，也可以通过css设置

可以通过 textarea>标签的 wrap 属性设置文本输入区内的换行模式

3、button标签:按钮(只写button按钮有提交功能)

4、label 标签为 input 元素定义标注

如何点击图标或者文字获取表单焦点

label标签中for属性的属性值和表单中的id属性值保持一致

四、表格

1.表格的基本结构

<table>代表表格 <caption>表格标题

<thead>代表表头 <tr>代表行 <th>代表表头中的列

<tbody>代表表身体 <tr>代表行 <td>代表表身体中的列

<table border="1" cellspacing="0" cellpadding="10"> 
        <caption>表格标题</caption>

        <thead>   <!-- 表头 -->
            <tr>     <!-- tr代表行 -->
                <th>tr代表行</th>
                <th>th代表表头的列</th>
                <th></th>
            </tr>
        </thead>
        <tbody>   <!-- 表身体 -->
            <tr>
                <td>tr代表行</td>
                <td>td代表表身体里的列</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="3">rowspan合并列</td>
                <!-- rowspan合并列 -->
                <td colspan="2">colspan合并行</td>
                <!-- colspan合并行 -->
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

2.表格的基本属性

border：设置表格边框宽度 bordercolor：表格颜色

cellspacing：设置单元格之间的距离 cellpadding：设置单元格的内边距

rowspan：合并列 colspan：合并行

五、表格练习

<!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">
        <thead>
           <tr>
            <th rowspan="2">序号</th>
            <th rowspan="2">工作内容</th>
            <th rowspan="2">要求工作时间</th>
            <th colspan="3">我的采集</th>
            <th colspan="2">资料审核</th>
            <th rowspan="2">状态</th>
            <th rowspan="2">操作</th>
           </tr>
           <tr>
            <th>通过</th>
            <th>不通过</th>
            <th>待审核</th>
            <th>已审核</th>
            <th>未审核</th>
           </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr>
                <td>1</td>
                <td >核实个人基本信息</td>
                <td>10月05日-10月11日</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>已完成</td>
                <td></td>
                </tr>
                <tr>
                <td>2</td>
                <td>采集个人授课情况</td>
                <td>10月05日-10月11日</td>
                <td></td>
                <td></td>
                <td>4</td>
                <td></td>
                <td></td>
                <td>进行中</td>
                <td>待办</td>
                </tr>
                <tr>
                <td>3</td>
                <td>采集个人其他情况（培训进修）</td>
                <td>10月05日-10月05日</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>已完成</td>
                <td></td>
                </tr>
                <tr>
                <td>4</td>
                <td>采集个人其他情况（挂职锻炼）</td>
                <td>10月05日-10月05日</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>已完成</td>
                <td></td>
                </tr>
                <tr>
                <td>5</td>
                <td>采集个人其他情况（社会兼职）</td>
                <td>10月05日-10月05日</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>已完成</td>
                <td></td>
                </tr>
                <tr>
                <td>6</td>
                <td>采集个人其他情况（项目获奖）</td>
                <td>10月05日-10月05日</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>已完成</td>
                <td></td>
                </tr>
                <tr>
                <td>7</td>
                <td>采集个人其他情况（技术专列）</td>
                <td>10月05日-10月05日</td>
                <td></td>	
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>已完成</td>
                <td></td>
                </tr>
        </tbody>
    </table>
</body>
</html>