form表单小练习

最新推荐文章于 2020-12-08 21:34:14 发布

你的指尖-有改变世界的力量

最新推荐文章于 2020-12-08 21:34:14 发布

阅读量626

点赞数 2

分类专栏：大前端文章标签： form表单提交按钮加入图片想让写过的一键清空表单

本文链接：https://blog.csdn.net/xiaoLong2345/article/details/52674666

版权

大前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是form表单应用</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .middle{
            width: 100%;
            height: 1024px;
        }
        .w{
            width: 600px;
            /*height: 1000px;*/
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div class="middle">
        <div class="w">
            <img src="img/qq.jpg" alt="">
            <br><br>
            <form action="http://www.baidu.com" method="post">
                账号：<input type="text"><span class="red"> 账号输入不能超过10个字符</span><br><br>
                密码：<input type="password"><span class="red"> 密码必须填写       </span><br><br>
                性别： <input type="radio"name="sex" >男   <input type="radio" name="sex">女    <span class="red">性别单选按钮</span>       <br><br>
                出生日期： <select name="cars" id="">
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
            </select> 年 
                <select name="cars2" id="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select> 月 
                <select name="cars3" id="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select> 日  <span class="red">默认1995年</span>
                <br><br>
                兴趣爱好：
                <input type="checkbox">编程 
                <input type="checkbox">跳舞 
                <input type="checkbox">跑步 
                <input type="checkbox">围棋 
                <input type="checkbox">旅游 
                <br><br>
                <input type="checkbox">玩游戏 
                <input type="checkbox">阅读 
                <input type="checkbox">跆拳道 
                <input type="checkbox">演讲 
                <br><br>
                个人介绍：
                <textarea name="" id="" cols="60" rows="5"></textarea>
                <br>
                <input type="image" src="img/submit.jpg">
                <!--input
                input表单新学知识：type="image" src="img/..."是以图片提交为按钮来提交
                type="reset"擦掉重写
                -->
                <input type="reset" value="擦掉重写">
            </form>

        </div>
    </div>
</body>
</html>

值得注意的地方：想给提交按钮加图片 <input type="image" src="img/subimit.jpg">

想让写过的一键清空<input type="reset" value="擦掉重写"