我来分享html中如何实现表单切换。

小甜 • 2024年6月24日 09:40 • 网站搭建 • 阅读 2

在HTML中，表单切换通常用于在一个页面上创建多个表单，用户可以通过点击按钮或链接来在不同的表单之间切换，这种技术可以简化用户的操作，提高用户体验，以下是如何在HTML中实现表单切换的详细步骤：

（图片来源网络，侵删）

1、创建HTML结构

我们需要创建一个包含两个表单的HTML页面，每个表单都有一个提交按钮和一个重置按钮，为了方便用户切换表单，我们可以在每个表单下方添加一个切换按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>表单切换示例</title>
</head>
<body>
    <form id="form1">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
        <br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button" onclick="switchForm(\'form1\', \'form2\')">切换到表单2</button>
    </form>
    <form id="form2" style="display:none;">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <br>
        <label for="confirm_password">确认密码：</label>
        <input type="password" id="confirm_password" name="confirm_password">
        <br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button" onclick="switchForm(\'form2\', \'form1\')">切换到表单1</button>
    </form>
    <script src="script.js"></script>
</body>
</html>

2、编写JavaScript代码实现表单切换功能

接下来，我们需要编写JavaScript代码来实现表单切换功能，我们将使用getElementById方法获取表单元素，并使用style.display属性来控制表单的显示和隐藏。

在script.js文件中，我们定义了一个名为switchForm的函数，该函数接受两个参数：当前显示的表单ID和要切换到的表单ID，当调用此函数时，它将隐藏当前显示的表单，并显示指定的表单。

function switchForm(currentFormId, targetFormId) {
    var currentForm = document.getElementById(currentFormId);
    var targetForm = document.getElementById(targetFormId);
    currentForm.style.display = \'none\';
    targetForm.style.display = \'block\';
}

3、添加CSS样式美化页面

为了使页面看起来更美观，我们可以添加一些CSS样式，在这个例子中，我们将为每个表单添加一个灰色边框，并为按钮添加一些内边距和圆角。

在style.css文件中，我们添加以下样式：

form {
    border: 1px solid #ccc;
    padding: 20px;
    marginbottom: 20px;
}
button {
    padding: 5px 10px;
    borderradius: 5px;
    backgroundcolor: #f0f0f0;
    border: none;
    cursor: pointer;
}

4、测试表单切换功能

现在，我们可以在浏览器中打开HTML文件，测试表单切换功能，当我们点击“切换到表单2”按钮时，应该看到第一个表单被隐藏，第二个表单被显示出来，同样，当我们点击“切换到表单1”按钮时，应该看到第二个表单被隐藏，第一个表单被显示出来，我们还可以尝试填写表单字段并提交数据，以验证表单的功能是否正常。

本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/440254.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除