好看的form表单只需要一个提交按钮

不完全正确。一个好看的form表单不仅需要一个提交按钮，还需要考虑以下几点：

1. 表单布局：表单元素的排列方式要合理，布局要美观。

2. 字体和颜色：表单元素的字体大小、颜色和字体风格等要与页面整体风格相协调，避免突兀。

3. 表单元素样式：表单元素的边框、背景、圆角等样式也要考虑到美观和易用性。

4. 表单验证：表单提交前需要进行验证，提示错误信息的方式也要考虑到美观和易用性。

5. 表单交互：表单提交后的交互效果也要考虑到美观和易用性，比如提示提交成功或失败的信息。

综上所述，一个好看的form表单需要多方面的考虑，而不仅仅是一个提交按钮。

相关问题

多个form表单共用一个提交

可以使用 JavaScript 来实现多个表单共用一个提交的功能。具体实现步骤如下：

1. 给每个表单添加一个 class 或 ID，用于标识不同的表单。

2. 给提交按钮添加一个点击事件，获取所有表单的数据，并进行提交。

3. 在点击事件中，使用 `document.querySelectorAll()` 方法获取所有表单元素，然后遍历每个表单，获取表单数据，并将数据拼接成一个对象。

4. 最后将获取到的数据对象使用 Ajax 或表单提交方式进行提交。

下面是一个简单的示例代码，供参考：

HTML 代码：

<form class="form1">
  <input type="text" name="username" />
  <input type="password" name="password" />
</form>

<form class="form2">
  <input type="text" name="email" />
  <input type="text" name="phone" />
</form>

<button id="submitBtn">提交</button>

JavaScript 代码：

const submitBtn = document.querySelector('#submitBtn');
submitBtn.addEventListener('click', () => {
  const forms = document.querySelectorAll('form');
  const data = {};

  forms.forEach((form, index) => {
    const formData = new FormData(form);
    for (let [key, value] of formData.entries()) {
      data[`form${index + 1}_${key}`] = value;
    }
  });

  // 使用 Ajax 或表单提交方式进行提交
  // ...
});

在上面的代码中，我们将表单数据拼接成了一个对象 `data`，并通过 `data` 对象来传递数据。在实际开发中，可以根据需求来选择使用 Ajax 或表单提交方式进行提交。

layui form表单点击按钮提交数据

在layui中，可以使用form模块来处理表单的提交操作。以下是一个示例代码，演示如何在点击按钮时提交表单数据：

HTML代码：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
    </div>
  </div>
</form>

JavaScript代码：

// 引入layui模块
layui.use(['form'], function() {
  var form = layui.form;

  // 监听表单提交事件
  form.on('submit(submitForm)', function(data) {
    // 获取表单数据
    var username = data.field.username;
    var password = data.field.password;

    // 打印获取的表单数据
    console.log('用户名：', username);
    console.log('密码：', password);

    // TODO: 在这里可以进行表单提交等操作

    return false; // 阻止表单默认提交
  });
});

在上述示例中，我们使用layui的form模块监听了表单的提交事件，并通过`data.field`获取到了表单中输入的数据。你可以根据自己的需求，在监听事件中进行表单数据的处理、验证、提交等操作。最后，使用`return false`阻止表单的默认提交行为。