五、HTML之表单

news2024/11/17 8:49:20

文章目录

  • 一、表单的作用
    • 1.1 常用控件
    • 1.2 宽高自适应
    • 1.3 窗口自适应
    • 1.4 伪元素选择器
    • 1.5 浮动高度塌陷问题
    • 1.6 左侧一栏为200px余下的右边栏占余下屏幕

一、表单的作用

表单用来收集用户的信息。

语法：

<form action = "提交地址" method="提交方法" target="打开方式">
    控件 输入框 密码框 按钮
</form>

1.1 常用控件

input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        

    </style>
</head>
<body>
    <form action="#" method="post">
        <!-- 文本框 -->
        账号: <input type="text"> <br>
        <!-- 密码框 -->
        密码: <input type="password"> <br>
        <!-- 提交按钮 -->
        <input type="submit"> <br>
        <!-- 重置按钮 -->
        <input type="reset"> <br>
        <!-- 普通按钮 -->
        <input type="button" value="普通按钮"> <br>
        <!-- 双标签的按钮具备提交功能 -->
        <button>提交</button> <br>
        <!-- 图片按钮 -->
        <input type="image" src="./images/icon.png"> <br>
        <!-- 文件上传 -->
        <input type="file"> <br>
        <!-- 隐藏域 -->
        <input type="hidden" value="这是隐藏域需要上传的数据">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <form action="#" method="post">
        <!-- 单选框 -->
        请选择你的性别: <br>
        <input type="radio" name="sex"> 男
        <input type="radio" name="sex" checked="checked"> 女
        <br>
        <!-- 复选框 -->
        你喜欢的英雄：
        <input type="checkbox"> 张三
        <input type="checkbox"> 李四
        <input type="checkbox" checked="checked"> 王五
        <input type="checkbox"> 赵六
    </form>
</body>
</html>

选框优化

<!-- 点字也能选中-->
<input type="radio" name="hehe" id="boy"><label for="boy">男</label>
<input type="radio" name="hehe" id="girl"><label for="girl">女</label>

扩展表单属性
disabled 禁用
readonly 只读

占位符属性
value 属性 表单控制的取值，一般用来传到后台
placeholder 属性 占位符

select

<!-- 下拉列表 -->
        <select>
            <option value="">北京</option>
            <option value="">广东</option>
            <option value="">深圳</option>
            <option value="">玉清</option>
        </select>

textarea

<textarea name="" id="" cols="30" rows="10">
            
</textarea>

1.2 宽高自适应

宽度自适应
能够根据屏幕或视口的大小发生对应的改变
宽度自适应 width: auto
一个元素在不定义宽的情况下会实现宽度自适应，自适应是根据父容器的宽度来自适应的，如果没有父容器是根据浏览器来自适应宽度的。
宽度自适应和宽度100%一样吗？
自适应的情况加上外边距还是自适应一整个宽度 auto+200px=auto
宽度100%的情况如果加外边距的话是 100%+200 > 100%
高度自适应
容器的高度根据当中的元素内容发生改变
定义高度的时候发现如果内容较多的时候就会产生溢出
如果不定义高度，高度就自适应，有多少内容就撑起多少的高度
自适应的情况下如果说子元素太少数据不够支撑高度需要用到最小高度
min-height
max-height
min-width
max-width

1.3 窗口自适应

如何设置一张图片和浏览器一样大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        /* 撑起浏览器的高度100% */
        html, body{
            height: 100%;
        }
        img{
            <!-- 100%是父容器的100% -->
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <img src="./images/1.jpeg" alt="">
</body>
</html>

1.4 伪元素选择器

::first-line 选中第一行，双冒号，单冒号都可以。
::first-letter 选中第一个字
::before 向元素内部前面插入内容
::after 向元素内部后面插入内容
插入进来的伪元素是行元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box::first-line{
            background-color: aqua;
        }
        .box::first-letter{
            font-size: 20px;
            font-weight: bold;
            color: red;
        }
        /* 往元素前面插入一个嘎嘎 */
        .box::before{
            content: "嘎嘎！";
        }
    </style>
</head>
<body>
    <div class="box">
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
        我是一个兵，来自老百姓，打倒了日本狗强盗，消灭了蒋匪军!
    </div>
</body>
</html>

1.5 浮动高度塌陷问题

一个网页中一个区域内容展示商品图片六张，如果之后添加了要展示商品图九张如何自动适应？
在这里插入图片描述
高度塌陷，子元素浮动，父元素没有高度没有内容给撑起来。
在这里插入图片描述
解决高度塌陷：
1、给父容器添加固定的高度。
弊端：如果数据太多或者数据量在不固定的情况下会溢出容器。
2、overflow: hidden; 触发bfc机制父容器内容溢出的时候可以实现子元素在浮动的时候撑开父容器。
弊端：会隐藏需要溢出显示的元素
3、clear: both/left/right
在浮动元素的末尾加个div或其他块元素然后添加clear:both;来实风解决高度塌陷的问题。
4、万能清除法

.box::after{
    content: "";
    clear:both;
    display: block;
    height: 0;
    overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .Commodity-display{
            width: 100%;
        }
        .Commodity-display-wrap{
            width: 1192px;
            margin: 0 auto;
            height: 800px;
        }
        .Commodity-display-wrap .imgbox{
            margin-bottom: 20px;
        }
        .Commodity-display-wrap ul li{
            float: left;
            width: 230px;
            height: 216px;
            margin: 0 3px 0 3px;
            position: relative;
        }
        .Commodity-display-wrap ul li img{
            width: 150px;
            height: 150px;
            /* 使用定位解决图片居中的问题 */
            position: absolute;
            top: 30px;
            left: 40px;
        }
        .imgbox::after{
            content: "";
            clear:both;
            display: block;
            height: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="Commodity-display">
        <div class="Commodity-display-wrap">
            <ul class="imgbox">
                <li><img src="./images/aa1.webp" alt=""></li>
                <li><img src="./images/aa2.webp" alt=""></li>
                <li><img src="./images/aa3.webp" alt=""></li>
                <li><img src="./images/aa4.webp" alt=""></li>
                <li><img src="./images/aa5.webp" alt=""></li>
                <li><img src="./images/aa1.webp" alt=""></li>
                <li><img src="./images/aa2.webp" alt=""></li>
                <li><img src="./images/aa3.webp" alt=""></li>
                <li><img src="./images/aa4.webp" alt=""></li>
                <li><img src="./images/aa5.webp" alt=""></li>
                <li><img src="./images/aa1.webp" alt=""></li>
                <li><img src="./images/aa2.webp" alt=""></li>
                <li><img src="./images/aa3.webp" alt=""></li>
                <li><img src="./images/aa4.webp" alt=""></li>
                <li><img src="./images/aa5.webp" alt=""></li>
                <li><img src="./images/aa1.webp" alt=""></li>
                <li><img src="./images/aa2.webp" alt=""></li>
                <li><img src="./images/aa3.webp" alt=""></li>
                <li><img src="./images/aa4.webp" alt=""></li>
                <li><img src="./images/aa5.webp" alt=""></li>
            </ul>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

1.6 左侧一栏为200px余下的右边栏占余下屏幕

calc(参数1 - 参数2） 运算符的前后必须加空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box-left{
            width: 200px;
            height: 1000px;
            background-color: pink;
            float: left;
        }
        .box-right{
            width: calc(100% - 200px);
            height: 1000px;
            background-color: chocolate;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box-left"></div>
    <div class="box-right"></div>
</body>
</html>

后台管理系统的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }
        .head{
            width: 100%;
            height: 80px;
            background-color: orange;
        }
        .bottom{
            width: 100%;
            height: calc(100% - 80px);
            background-color: blanchedalmond;
        }
        .bottom .left{
            width: 200px;
            height: 100%;
            background-color: cadetblue;
            border-right: 1px solid olivedrab;
            float: left;
        }
        .bottom .right{
            width: calc(100% - 201px);
            height: 100%;
            background-color: blueviolet;
            float: left;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="bottom">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/349250.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

3.3 ISIS引入路由

3.3 ISIS引入路由

实验目的掌握IS-IS引入直连路由的方法掌握IS-IS引入静态路由的方法实验拓扑IS-IS引入路由的实验拓扑如图3-2所示： 图3-2：IS-IS引入路由 实验步骤IP地址的配置R1的配置 <Huawei>system-view [Huawei]undo info-center enable
阅读更多...
【实战场景一】设计一个分布式环境下全局唯一的信号器

【实战场景一】设计一个分布式环境下全局唯一的信号器

前面&#xff0c;我们罗列了一些面试时可能会到的一些技术上的问题。但都是基于理论&#xff0c;也就是外面所说的八股文。应付一些基础的或者中级的开发岗位来说&#xff0c;是没什么问题的&#xff0c;但如果想拿高薪&#xff0c;或者升职的话&#xff0c;仅靠八股文是仅仅不…
阅读更多...
2022年直播电商成交额，更是达到了24816亿元的成交额

2022年直播电商成交额，更是达到了24816亿元的成交额

近年来移动网络覆盖率、网速提升&#xff0c;直播行业不在是陌生的行业&#xff0c;直播也诞生了繁多的领域&#xff0c;游戏直播、户外直播等&#xff0c;当然还有今天的主题“直播带货”。直播带货是线上销售模式的一种&#xff0c;由衷是为了更好的把商品展示给用户观看&…
阅读更多...
【Redis】Redis 常用数据类型操作 ② ( 数据库操作 | 切换数据库 | 查询当前数据库键个数 | 清空当前数据库 | 清空所有数据库 )

【Redis】Redis 常用数据类型操作 ② ( 数据库操作 | 切换数据库 | 查询当前数据库键个数 | 清空当前数据库 | 清空所有数据库 )

文章目录一、Redis 数据库操作1、切换数据库2、查询当前数据库键个数3、清空当前数据库4、清空所有数据库一、Redis 数据库操作 在之前的博客 【Redis】Redis 数据库 安装、配置、访问 ( Redis 简介 | 下载 Redis 安装包 | 安装 Redis 数据库 | 命令行访问 Redis | 使用可视化工…
阅读更多...
保姆级Vue3+Vite项目实战正则在线校验工具

保姆级Vue3+Vite项目实战正则在线校验工具

写在前面注&#xff1a;本文首发掘金签约专栏&#xff0c;此为文章同步&#xff01;本文为 Vue3Vite 项目实战系列教程文章第五篇&#xff0c;系列文章建议从头观看效果更佳&#xff0c;大家可关注专栏防走失&#xff01;点个赞再看有助于全文完整阅读&#xff01;此系列文章主…
阅读更多...
为什么PMP的含金量会被质疑呢？（含pmp资料）

为什么PMP的含金量会被质疑呢？（含pmp资料）

1、考的人越来越多&#xff0c;物以稀为贵&#xff0c;且PMP也不是非考不可&#xff0c;也不是项目管理的门槛证书&#xff1b; 2、PMP的通过率是越来越高&#xff0c;就有种我上我也行的错觉&#xff0c;随便一考就考过了&#xff0c;还谈什么含金量&#xff1f; 3、PMP考了不…
阅读更多...
Windows中MySQL 8.x版本忘记密码如何重设

Windows中MySQL 8.x版本忘记密码如何重设

Windows中MySQL 8.x版本忘记密码如何重置 文章目录Windows中MySQL 8.x版本忘记密码如何重置一、前言二、重置密码操作1、停止MySQL服务2、以安全模式启动MySQL服务3、无密码登录mysql4、重置登录密码5、验证密码是否重置成功三、最后我想说一、前言 好久之前在电脑下载的MySQL…
阅读更多...
【Linux】初学Linux你需要掌握这些基本指令（二）

【Linux】初学Linux你需要掌握这些基本指令（二）

目录 1.man指令 2.cp指令 3.mv指令 4.tree指令 5.echo指令 6.more指令 7.less指令&#xff08;重要&#xff09; 8.head与tail指令 9.date指令 显示时间常用参数&#xff1a; 设置时间常用参数&#xff1a; 10.cal指令 11.find & whereis & which指令 …
阅读更多...
为知笔记 wiz 支持实时预览的md markdown编辑器 对比 typora Vditor

为知笔记 wiz 支持实时预览的md markdown编辑器 对比 typora Vditor

1.为什么退回到为知笔记老版本 升级到为知笔记最新版(wiznote X)已经快一年了(最近编辑文档不多,所以一直也将就使用,并且告诉自己习惯了新版就会更舒服),最近还是退回到老版本了. (1)新版本没有了顶部编辑菜单,全靠号提示,感觉不方便.好像在用命令行编辑文档.完全不喜欢这种…
阅读更多...
OpenCV Canny边缘检测

OpenCV Canny边缘检测

本文是OpenCV图像视觉入门之路的第13篇文章&#xff0c;本文详细的介绍了Canny边缘检测算子的各种操作&#xff0c;例如&#xff1a;Canny算子进行边缘检测等操作。 Canny函数是OpenCV中用于执行边缘检测的函数之一&#xff0c;其参数包括&#xff1a; threshold1&#xff1a;…
阅读更多...
【NVMEM子系统】一、Efuse介绍及安全启动浅析

【NVMEM子系统】一、Efuse介绍及安全启动浅析

个人主页&#xff1a;董哥聊技术我是董哥&#xff0c;嵌入式领域新星创作者创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01;文章目录1、Efuse是什么2、OTP是什么3、什么是Secure Boot4、CPU内部安全机制4.1 bootROM4.2 iRAM4.3 eFUSE4.5 …
阅读更多...
高通开发系列 - USB不能正常工作

高通开发系列 - USB不能正常工作

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅！ 你的喜欢就是我写作的动力！ 返回高通开发系列 - 总目录 目录 USB不能正常工作问题概述问题分析USB不能正常工作 问题概述 升级完linux内核后，msm-4.9内核中usb、adb…
阅读更多...
[22] Rodin: A Generative Model for Sculpting 3D Digital Avatars Using Diffusion

[22] Rodin: A Generative Model for Sculpting 3D Digital Avatars Using Diffusion

paper: https://arxiv.org/abs/2212.06135 总结&#xff1a;提出一种基于扩散模型和tri-plain features的3D虚拟人像生成方法。该方法包含多个模型&#xff0c;需要多次训练&#xff1a; 使用Blender synthetic pipeline&#xff08;Fake it untill you make it&#xff09;生…
阅读更多...
LeetCode-257. 二叉树的所有路径

LeetCode-257. 二叉树的所有路径

目录题目分析递归法题目来源 257. 二叉树的所有路径 题目分析 前序遍历以及回溯的过程如图&#xff1a; 递归法 1.递归函数参数以及返回值 要传入根节点&#xff0c;记录每一条路径的path&#xff0c;和存放结果集的result&#xff0c;这里递归不需要返回值&#xff0c;代…
阅读更多...
时间序列预测--基于CNN的股价预测（Matlab代码实现）

时间序列预测--基于CNN的股价预测（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 时间序列预测有很多方法&#xff0c;如传统的时序建模方法ARIMA、周期因子法、深度学习网络等&#xff0c;本次实验采用最简单的…
阅读更多...
趣味三角——第11章——一个著名的公式

趣味三角——第11章——一个著名的公式

目录 1. 著名无限积公式简述及证明 2. Jules Lissajous 和他的图形(Jules Lissajous and His Figures) 11章 一个著名的公式 The prototype of all infinite processes is repetition. . . . Our very concept of the infinite derives from the notion that what has bee…
阅读更多...
umap 速度测试

umap 速度测试

今天终于把umap的速度给测了一下&#xff0c;结果如下 预处理文件&#xff08;83万的数据量&#xff09; # import scanpy as sc # adatasc.read("/DATA1/zhangjingxiao/yxk/dataset/FullMouseBrain/FullMouseBrain_raw.h5ad") # print(adata) # sc.pp.normalize_…
阅读更多...
HTTP协议---详细讲解

HTTP协议---详细讲解

目录 一、HTTP协议 1.http 2.url url的组成&#xff1a; url的保留字符&#xff1a; 3.http协议格式​编辑 ①http request ②http response 4.对request做出响应 5.GET与POST方法 ①GET ②POST 7.HTTP常见Header ①Content-Type:: 数据类型(text/html等)在上文…
阅读更多...
H5/APP客服端源码/uniapp在线客服系统源码开源了，全源码代码解读及发行安装教程...

H5/APP客服端源码/uniapp在线客服系统源码开源了，全源码代码解读及发行安装教程...

前言 目前&#xff0c;即时通讯在线咨询在网站、APP、小程序中已经是不可获取的功能&#xff0c;尤其是专注于线上营销的商家&#xff0c;迫切需要一套可以随时与访客交流的即时通讯工具。 如果使用市面上的SaaS客服系统&#xff0c;会在功能上受限制&#xff0c;需要开通高级V…
阅读更多...
AWS Control Tower

AWS Control Tower

Hello大家好&#xff0c;在本课时我们将讨论AWS Control Tower。 **AWS Control Tower是AWS organizations的一个功能延伸&#xff0c;**它是设置在organizations的上层&#xff0c;并为您提供一些额外的控制。 通过Control Tower可以创建一个Landing zone&#xff0c;Landing…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023