007第7课：细说表单（重点）+后台框架

程序员文章站 2022-05-15 09:21:52
...

<!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>

<br>
<h2>用户注册</h2>
<!-- form + input + select +button ... -->

<!-- <form action="verify.php" method="post">
    <input type="" name="username" value="admin" />
    <input type="password" name="password" value="" />
    <button>提交</button>
</form> -->
<!-- http://127.0.0.1:5500/20211222/verify.php?username=admin -->
<!-- http://127.0.0.1:5500/20211222/verify.php?username=admin&password=12345 -->

<!-- 文本框 -->
<form action="verify.php" method="post" style="display: grid;gap:10px">

    <div>
        <label for="username">用户名：</label>
        <!-- label的for属性和input的id属性必须一致 -->
        <input type="text" name="username" id="username" value="" placeholder="至少8位" required />
        <!-- placeholder="至少8位" required 提示位数，以及强制填写才能提交 -->

    </div>

    <!-- 密码框 -->
    <div>
        <label for="password">密码：</label>
        <!-- label的for属性和input的id属性必须一致 -->
        <input type="password" name="password" id="password" value="" placeholder="数字+字母，至少6位" required />
        <!-- placeholder="至少8位" required 提示位数，以及强制填写才能提交 -->
        <button onclick="showPassword(this,this.form.password)" type="button">查看</button>
    </div>

    <!-- 邮箱 -->
    <div>
        <label for="email">密码：</label>
        <!-- label的for属性和input的id属性必须一致 -->
        <input type="email" name="email" id="email" value="" placeholder="类似：xxx@gmail.com" required />
        <!-- placeholder="至少8位" required 提示位数，以及强制填写才能提交 -->

    </div>


    <!-- 单选按钮 -->
    <!-- div>label+input*2 -->
    <div><label for="">性别</label>
        <input type="radio" name="gender" id="" value="male"><label for="male">男</label>
        <input type="radio" name="gender" id="" value="female"><label for="female">女</label>
    </div>

    <!-- 复选框 -->
    <div>
        <lable>爱好：</lable>
        <input type="checkbox" name="hobby[0]" id="game">
        <lable for="game">游戏</lable>
        <input type="checkbox" name="hobby[1]" id="trave">
        <lable for="trave">旅游</lable>
        <input type="checkbox" name="hobby[2]" id="shoot">
        <lable for="shoot">摄影</lable>
    </div>
    <!-- 默认提交，重置 -->
    <button></button><button></button><button></button>

    <!-- 内联框架和多媒体 -->
    <!-- 内联标签：画中画 -->
    <a href="https://map.baidu.com/search/%E4%B8%9C%E8%8E%9E%E5%B8%82/@12663667,2618456.75,12z?querytype=s&wd=%E4%B8%9C%E8%8E%9E%E5%B8%82&c=119&provider=pc-aladin&pn=0&device_ratio=1&da_src=shareurl" target="map">东莞市</a>
    <iframe src="" frameborder="1" width="500" height="500" name="map"></iframe>

    <!-- 多媒体 -->
    <video width="" height="" controls>

    </video>
    <button>提交</button>
</form>

<script>
    function showPassword(btn, ele) {
        if (ele.type === "password") {
            ele.type = "text";
            btn.textContent = "隐藏";
        } else {
            ele.type = "password";
            btn.textContent = "显示";
        }
    }
</script>
</body>

</html>
上一篇：使用数据库元数据为Entity Framwork实体生成注释
下一篇： FileZilla日常使用