使用开关返回输入，在表单中返回不同的<Input>

基础概念

在表单设计中，使用开关（通常指复选框或单选按钮）来控制输入框的显示或隐藏，是一种常见的交互设计模式。这种设计可以让用户根据需要选择性地填写表单信息，提高用户体验和表单的灵活性。

类型

复选框（Checkbox）：用户可以选择多个选项，每个选项对应一个输入框。
单选按钮（Radio Button）：用户只能选择一个选项，每个选项对应一个输入框。

应用场景

注册表单：用户可以选择是否填写备用邮箱或手机号。
配置设置：用户可以选择启用或禁用某些功能，每个功能对应一个输入框。
调查问卷：用户可以选择回答某些问题，每个问题对应一个输入框。

示例代码

以下是一个使用HTML和JavaScript实现开关返回输入框的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Switch Input Example</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <label>
            <input type="checkbox" id="switch">
            Enable Additional Information
        </label>
        <div id="additionalInfo" class="hidden">
            <label for="additionalInput">Additional Input:</label>
            <input type="text" id="additionalInput">
        </div>
    </form>

    <script>
        document.getElementById('switch').addEventListener('change', function() {
            const additionalInfo = document.getElementById('additionalInfo');
            if (this.checked) {
                additionalInfo.classList.remove('hidden');
            } else {
                additionalInfo.classList.add('hidden');
            }
        });
    </script>
</body>
</html>