HTML---form表单

最新推荐文章于 2022-10-12 17:13:44 发布

yemaozi1501

最新推荐文章于 2022-10-12 17:13:44 发布

阅读量56

点赞数

本文链接：https://blog.csdn.net/yemaozi1501/article/details/117298574

版权

三个简单的用例----------只是记录给自己看看，页面真的很简单，随手记录，自己找的时候方便一些。
1.搜索页面

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>搜索</title>
         <!--关联css资源-->
         <link rel="stylesheet" href="search.css">
     </head>
     <body>
         <form>
             <!-- input type是有固定选项的，有预置的含义，name可以随便填-->
             <input type="text" name="keyword" value="默认值">
             <button type="submit">搜索</button>
         </form>
     </body>
 </html>

2.注册页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <style>
            body{
                background-color:burlywood;
            }
            div{
                font-size: 2em;
                font-style: normal;
                background-color: beige;
                width: 80%;
                margin: 50px auto;
                margin-left: 600px;
                padding: 50px;
                border: 2px dotted rgb(216, 55, 55);
                border-radius: 20px;
                box-shadow: 30px 13px 30px rgb(131, 124, 74);
            }
            span{
                display: inline-block;
                width: 500px;
            }
            button{
                color: rgb(235, 105, 18);
                margin: auto;
            }
        </style>
    </head>
    <body>
        <span>

       
        <div> 
        <form>
            用户名：<input type="text" name="username"><br>
           密码：<input type="password" name="password"><br>
           手机号码：<input type="tel" name="phone"><br>
           验证码：<input type="text" name="code"><br>
           <button type="submit"> 注册</button>
        </form>
    </div>
</span>
    </body>
</html>

3.用户信息收集

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户信息收集</title>

    </head>
    <body>
        <form>
            <!--提交的key都是name选项指定的，提交的value都是value选项指定的-->
            姓名：<input type="text" name="name">
            <br>
            性别：<select name="gender">
            <option value="female">女</option>
            <option value="male">男</option>
            </select>
            <br>
            <!--单选框只有在name相等的情况下才能形成互斥，必须指定相同的name值-->
            最高学历：<input type="radio" name="xl" value="xx">小学
            <input type="radio" name="xl" value="cz">初中
            <input type="radio" name="xl" value="gz">高中
            <br>
            爱好：<input type="checkbox" name="ah" value="zq">足球
            <input type="checkbox" name="ah" value="cg">唱歌
            <input type="checkbox" name="ah" value="tq">弹琴
            <input type="checkbox" name="ah" value="xz">写作
            <br>
            <button type="submit">提交</button>
        </form>
    </body>
</html>

yemaozi1501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML---form表单

三个简单的用例----------只是记录给自己看看，页面真的很简单，随手记录，自己找的时候方便一些。1.搜索页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>搜索</title>  <link rel="stylesheet"
复制链接

扫一扫