表单题目

  1. 编写一个仅包含input[type=password]的表单，要求：

    • 密码框有占位提示 “请输入 6-12 位密码”；
    • 设置maxlength=12、minlength=6、required属性；
    • 点击提交按钮后，弹窗显示输入的密码（控制台也打印）。

  2. 编写一个select+option表单，要求：

    • 下拉选项为 “小学、初中、高中、大学”，对应的 value 值为 “primary、middle、high、college”；
    • 默认显示占位选项 “-- 请选择学历 --”（禁用且选中）；
    • 提交后弹窗显示 “你选择的学历：[学历文本]（值：[value 值]）”。

  3. 编写一个textarea表单，要求：

    • 文本域占位提示 “请输入个人介绍（最多 200 字）”；
    • 设置maxlength=200、rows=5；
    • 提交后控制台打印输入的文本内容，弹窗显示 “介绍长度：[字符数] 字”。

  4. 编写一个input[type=radio]表单（性别选择），要求：

    • 选项为 “男、女、保密”，对应的 value 值为 “male、female、secret”；
    • 默认选中 “保密”；
    • 提交后弹窗显示选中的性别值。

  5. 编写一个包含input[type=checkbox]的 “美食偏好” 表单，要求：

    • 选项为 “川菜、粤菜、湘菜、鲁菜、苏菜”，value 值与文本一致；

    • 提交后：

      ✅ 若选中≥2 个，弹窗显示 “你的美食偏好：[选中项用逗号分隔]”；

      ✅ 若选中 1 个，弹窗显示 “你最喜欢的菜系：[选中项]”；

      ✅ 若未选中，弹窗显示 “你还未选择任何菜系”；

    • 控制台打印所有选中项的数组。

  6. 编写一个简单的 “用户注册” 表单，包含以下控件：

    • 用户名（input text，必填）；
    • 手机号（input tel，必填，设置pattern匹配 11 位手机号）；
    • 爱好（checkbox，选项：游戏、音乐、电影、旅行）；
    • 提交按钮；
    • 要求：提交后控制台打印所有表单数据（用户名、手机号、爱好数组），弹窗提示 “注册信息提交成功”。

  7. 为第 6 题的表单添加 “重置按钮”，要求点击后：

    • 清空用户名、手机号输入框；
    • 取消所有爱好复选框的选中状态；
    • 弹窗提示 “表单已重置”。

  8. 编写一个 “问卷调查” 表单，包含以下控件：

    • 年龄（input number，范围 1-100，必填）；

    • 是否使用过前端技术（radio，是 / 否，value：yes/no）；

    • 熟悉的框架（checkbox，选项：Vue、React、Angular、jQuery）；

    • 意见反馈（textarea）；

    • 提交后：

      ✅ 若年龄＜18，弹窗提示 “未成年人暂不参与本次调查”；

      ✅ 若年龄≥18 且选中 “使用过前端技术”，弹窗显示 “你熟悉的框架：[选中项，若无则显示‘无’]”；

      ✅ 若年龄≥18 且选中 “未使用过”，弹窗显示 “感谢你的参与，意见反馈已收到”；

    • 所有合法提交的信息都要打印到控制台。

  9. 编写一个 “购物车选择” 表单，要求：

    • 商品选项（checkbox）：手机（1999 元）、电脑（4999 元）、平板（2999 元）、耳机（999 元）；

    • 每个复选框的 value 值为对应的价格（数字）；

    • 提交后计算选中商品的总价：

      ✅ 弹窗显示 “选中商品总价：¥[总价]”；

      ✅ 若总价＞5000，额外提示 “满 5000 元可减免 200 元”；

    • 控制台打印选中商品的价格数组和总价。

表单答案

  • 练习1

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input[type=password]</title>
    <style>
        input[type=password] {
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h3>input[type=password]</h3>
    <form action="#" method="get" id="inputFrom">
        <label for="password">密码</label>
        <input type="password" maxlength="12" minlength="6" required>
        <button type="submit">提交</button>
    </form>
    <script>
        const inputFrom = document.getElementById('inputFrom');
        inputFrom.onsubmit = function (e) {
            e.preventDefault();
            const password = this.querySelector('input[type=password]').value;
            console.log(password);
            alert(password);
        }
    </script>
</body>
</html>

  • 练习2

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select+option</title>
    <style>
        select{
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 0 5px;
        }
    </style>
</head>
<body>
    <h3>select+option</h3>
    <form action="#" method="get" id="inputForm">
        <select name="school">
            <option value="" disabled selected>请选择</option>
            <option value="primary">小学</option>
            <option value="middle">初中</option>
            <option value="high">高中</option>
            <option value="college">大学</option>
        </select>
        <button type="submit">提交</button>
    </form>

    <script>
        const inputFrom = document.getElementById('inputForm');
        inputFrom.onsubmit = function(e){
            e.preventDefault();
            const select = document.querySelector('select');
            const selectText = select.options[select.selectedIndex].text;
            console.log("选择value:" + select.value + "选择text:" + selectText);
            alert("选择value:" + select.value + "选择text:" + selectText);
        }
    </script>
</body>
</html>

  • 练习3

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea</title>
    <style>
        textarea { resize: none;}
    </style>
</head>
<body>
    <form action="#" method="get" id="inputFrom">
        <textarea name="infos" id="" cols="30" rows="5" placeholder="个人简介" maxlength="200"></textarea>
        <button type="submit">提交</button>
    </form>
    <script>
        var inputFrom = document.getElementById('inputFrom');
        inputFrom.onsubmit = function(e) {
            e.preventDefault();
            var infos = document.getElementsByName('infos')[0].value;
            alert("介绍长度  " + infos.length + "个字");
        }
    </script>
</body>
</html>

  • 练习四

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input[type=radio]</title>
</head>
<body>
    <h3>input[type=radio]</h3>
    <form action="#" id="inputForm" method="get">
        <input type="radio" name="male" id="male"  value="男">
        <label for="male">男</label>
        <input type="radio" name="male" id="female" value="女">
        <label for="female">女</label>
        <input type="radio" name="male" id="secret" value="保密" checked>
        <label for="secret">保密</label>
        <button type="submit">提交</button>
    </form>
    <script>
        const inputForm = document.getElementById('inputForm');
        inputForm.onsubmit = function (e) {
            e.preventDefault();
            var input_val = inputForm.male.value;
            alert(input_val)
        }
    </script>
</body>
</html>

  • 练习五

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input[type=checkbox]</title>
</head>
<body>
    <h3>input[type=checkbox]</h3>
    <form action="#" id="formInput" method="get">
        <input type="checkbox" name="checkbox" value="川菜" id="cc"></input>
        <label for="checkbox">川菜</label>
        <input type="checkbox" name="checkbox" value="粤菜" id="ec"></input>
        <label for="checkbox">粤菜</label>
        <input type="checkbox" name="checkbox" value="湘菜" id="sc"></input>
        <label for="checkbox">湘菜</label>
        <input type="checkbox" name="checkbox" value="鲁菜" id="lc"></input>
        <label for="checkbox">鲁菜</label>
        <input type="checkbox" name="checkbox" value="苏菜" id="sc1"></input>
        <label for="checkbox">苏菜</label>
        <button type="submit">提交</button>
    </form>
    <script>
        var formInput = document.getElementById('formInput');
        formInput.onsubmit = function(e){
            e.preventDefault();
            var get_values = [];
            this.querySelectorAll('input[type="checkbox"]:checked').forEach(item => {
                get_values.push(item.value);
            })
            if(get_values.length == 0){
                alert("你还未选择任何菜系");
            }
            if (get_values.length == 1) {
                alert("你选择的菜系是：" + get_values[0]);
            }
            if (get_values.length >= 2) {
                alert("你选择的菜系是：" + get_values.join("、"));
            }
        }
    </script>
</body>
</html>

  • 练习六

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- <style>
        input { border: 1px solid #ccc; height: 30px; width: 200px;}
    </style> -->
</head>
<body>
    <h3>用户注册</h3>
    <form action="#" id="userReg" method="get">
        <div>
            <label for="username">用户名</label>
            <input type="text" name="username" placeholder="请输入用户名" required id="username">
        </div>
        <div>
            <label for="phone">手机号</label>
            <input type="text" id="pthon" name="phone" placeholder="请输入手机号" maxlength="11" required>

        </div>
        <div>
            <label>爱好: </label>
            <input type="checkbox" name="hobby" id="game" value="游戏">
            <label for="hobby">游戏</label>
            <input type="checkbox" name="hobby" id="music" value="音乐">
            <label for="hobby">音乐</label>
            <input type="checkbox" name="hobby" id="movie" value="电影">
            <label for="hobby">电影</label>
            <input type="checkbox" name="hobby" id="travel" value="旅行">
            <label for="hobby">旅行</label>
        </div>
        <button type="submit">提交</button>
    </form>
    <script>
        var inputUserReg = document.getElementById('userReg');
        inputUserReg.onsubmit = function (e) { 
            e.preventDefault();
            var username = inputUserReg.username.value;
            var phone = inputUserReg.phone.value;
            var hobbys = [];
            inputUserReg.hobby.forEach(function (item) { 
                if (item.checked) {
                    hobbys.push(item.value);
                }
            });
            alert("用户名:" + username + "手机号:" + phone + "爱好:" + hobbys)
            console.log(username, phone, hobbys);
        }
    </script>
</body>
</html>

  • 练习七

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- <style>
        input { border: 1px solid #ccc; height: 30px; width: 200px;}
    </style> -->
</head>
<body>
    <h3>用户注册</h3>
    <form action="#" id="userReg" method="get">
        <div>
            <label for="username">用户名</label>
            <input type="text" name="username" placeholder="请输入用户名" required id="username">
        </div>
        <div>
            <label for="phone">手机号</label>
            <input type="text" id="pthon" name="phone" placeholder="请输入手机号" maxlength="11" required>

        </div>
        <div>
            <label>爱好: </label>
            <input type="checkbox" name="hobby" id="game" value="游戏">
            <label for="hobby">游戏</label>
            <input type="checkbox" name="hobby" id="music" value="音乐">
            <label for="hobby">音乐</label>
            <input type="checkbox" name="hobby" id="movie" value="电影">
            <label for="hobby">电影</label>
            <input type="checkbox" name="hobby" id="travel" value="旅行">
            <label for="hobby">旅行</label>
        </div>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
    <script>
        var inputUserReg = document.getElementById('userReg');
        inputUserReg.onsubmit = function (e) { 
            e.preventDefault();
            var username = inputUserReg.username.value;
            var phone = inputUserReg.phone.value;
            var hobbys = [];
            inputUserReg.hobby.forEach(function (item) { 
                if (item.checked) {
                    hobbys.push(item.value);
                }
            });
            alert("用户名:" + username + "手机号:" + phone + "爱好:" + hobbys)
            console.log(username, phone, hobbys);
        }
        inputUserReg.onreset = function (e) { 
            e.preventDefault();
            inputUserReg.username.value = "";
            inputUserReg.phone.value = "";
            inputUserReg.hobby.forEach(function (item) { 
                item.checked = false;
            });
            alert("重置成功")
        }
    </script>
</body>
</html>

  • 练习八

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷调查</title>
</head>
<body>
    <form action="#" id="inputForm" method="get">
        <div>
            <label for="age">年龄</label>
            <input type="number" name="age" id="age"  maxlength="3" minlength="3" placeholder="请输入年龄1-100"></input>
        </div>
        <div>
            <label>是否使用过前端技术: </label>
            <input type="radio" name="front" id="yes" value="yes">
            <label for="yes">是</label>
            <input type="radio" name="front" id="no" value="no">
            <label for="no">否</label>
        </div>
        <div>
            <label>熟悉的框架: </label>
            <input type="checkbox" name="hbooy" id="vue" value="vue">
            <label for="vue">Vue</label>
            <input type="checkbox" name="hbooy" id="react" value="react">
            <label for="react">React</label>
            <input type="checkbox" name="hbooy" id="angular" value="angular">
            <label for="angular">Angular</label>
            <input type="checkbox" name="hbooy" id="jquery" value="jquery">
            <label for="jquery">jQuery</label>
        </div>
        <button type="submit">提交</button>
    </form>
    <script>
        const inputFrom = document.getElementById('inputForm');
        inputFrom.onsubmit = function (e) { 
            e.preventDefault();
            var age = inputFrom.age.value;
            var yesNo = inputFrom.front.value;
            var hbooys = []
            inputFrom.hbooy.forEach(function (item) { 
                if (item.checked) {
                    hbooys.push(item.value)
                }
            })
            if (age < 18){
                alert("未成年人暂不参与本次调查")
                console.log("未成年人暂不参与本次调查")
            }
            else if (age >= 100 || age <= 0){
                alert("请输入正确的年龄1-100") 
            }
            else if (age >= 18 && yesNo == "no"){
                alert("感谢参与调查")
                console.log("感谢参与调查")
            }
            else if (age >= 18 && yesNo == "yes"){
                if (hbooys.length == 0) {
                    alert("没有选择爱好")
                }
                else {
                    alert("爱好列表: " + hbooys.join(","))
                    console.log("爱好列表" + hbooys.join(","))
                }
            }
        }
    </script>
</body>
</html>

  • 练习9

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车选择</title>
</head>
<body>
    <h3>购物车选择</h3>
    <form action="#" id="iform" method="get">
        <label>购物车选择: </label>
        <input type="checkbox" name="cart" value="1999" id="phone">
        <label for="phone">手机(1999元)</label>
        <input type="checkbox" name="cart" value="4999" id="com">
        <label for="com">电脑（4999 元）</label>
        <input type="checkbox" name="cart" value="2999" id="pb">
        <label for="pb">平板（2999 元）</label>
        <input type="checkbox" name="cart" value="999" id="ej">
        <label for="ej">耳机（999 元）</label>
        <button type="submit">提交</button>
    </form>
    <script>
        var iform = document.getElementById('iform');
        iform.onsubmit = function(e) {
            e.preventDefault();
            var carts=[];
            iform.cart.forEach(element => {
                if (element.checked){
                    carts.push(element.value);
                }
            });
            var inum =0;
            carts.forEach(element => {
                inum += Number(element);
            });
            if (inum == 0) {
                alert('请选择商品');
                return;
            }
            if (inum >= 5000 ){
                alert('满 5000 元可减免 200 元');
            }
            alert('选中商品总价' + inum);

        }
    </script>
</body>
</html>
# 前端 # python # html
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

我测试了一个0.9B模型，它竟然能自动区分多人讲话）

avatar AI Agent技术社区
cover

从一张商品图到正式上架：实测店匠 Shoplazza Athena，AI Agent 不只是聊天框

avatar AI Agent技术社区
cover

【AI Agent】《2026年9月 AI Agent全栈开发技术选型专项面试宝典》

avatar AI Agent技术社区