html前端开发-----表单form_表单前端代码-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51272779/article/details/124355460

文章目录

前言

哈喽同学们大家好，本节我们开始学习html5基础部分------表单相关学习，下面有具体案例和素材同学们自行取用

一、思维导图

二、案例一

代码如下（示例）：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            border: 0;
            outline: 0;
            background-color: transparent;
        }
        .search{
            width: 650px;
            height: 40px;
            border: 2px solid rgb(117, 121, 238);
            margin: 150px auto;
            border-radius: 8px;
            overflow: hidden;
        }
        .search input{
            float: left;
            height: 40px;
        }
        #search{
            width: 530px; 
            margin: 0 10px;  

        }
        #submit{
            width: 100px;
            background-color: rgb(117, 121, 238);
            color: #fff;
        }
        #submit:hover{
            background-color: blue;
            cursor: pointer;
        }
    </style>


<body>
    <form action="http://www.baidu.com/s">
        <div class="search">
            <input id="search" name="wd" type="text">
            <input id="submit" type="submit" value="百度一下">
        </div>
    </form>
    
</body>

2.案例二

代码如下（示例）：

* {
        margin: 0;
        padding: 0;
        
    }

    input {
        border: 0;
        outline: 0;
        background-color: transparent;
    }
    .wrap{
        width: 400px;
        height: 400px;
        /* background-color: antiquewhite; */
        overflow: hidden;
        margin: 30px ;
    }
    .wrap .pass{
        width: 100%;
        height: 60px;
        background-color: rgb(242, 239, 239);
        margin-bottom: 20px;
        color: rgb(198, 27, 27);
    }
    .wrap .phone{
            height: 50px;
            line-height: 50px;
            /* background-color: coral; */
        }
        .wrap .phone .left{
            color: rgb(6, 147, 93);
            font-weight: bold;
            font-size: 15px;
            float: left;
        }
        .wrap .phone .right{
            color: rgb(127, 124, 124);
            font-weight: bold;
            float: right;
            margin-right: 10px;
            font-size: 15px;
        }
        .wrap .submit{
            width: 100%;
            height: 60px;
            background-color: rgb(17, 142, 104);
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
        }
        .wrap ._submit{
            width: 100%;
            height: 60px;
           
            color: rgb(75, 73, 73);
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
        }
    </style>


<div class="wrap">
        <input class="pass" name="wd" type="text" placeholder="请输入常用手机号/邮箱">
        <input class="pass" name="wd" type="text" placeholder="请输入密码">
        <div class="phone">
            <a class="left" href="#">手机验证码登录</a>
            <a class="right" href="#">忘记密码</a>
        </div>
        <form action="http://www.baidu.com/s">
            <input class="submit" type="submit" value="登录">
            <input class="_submit" type="submit" value="立即注册">
        </form>
    </div>