移动优先表单

本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 10 课，共 35 课。

表单是网页中最重要的部分之一：用户会不断地输入、点击并与表单互动。在设计表单时，我们优先考虑移动设备，重点关注小屏幕上的易用性：

把输入框和按钮调大，方便用户输入和点击。
将字段垂直排列，并使用全宽输入框。
增加内边距和间距，方便手指操作。

移动设备示例：

input, button {
  width: 100%;       /* 在小屏幕上占满宽度 */
  padding: 0.75rem;  /* 更容易点击 */
  font-size: 1rem;   /* 清晰易读的文字 */
}

然后，对于更大的屏幕（平板电脑或台式电脑），我们会优化布局：

将表单置于页面中央。
让一些字段并排显示，而不是上下堆叠。
调整宽度和间距，让页面看起来更美观。

较大屏幕的示例：

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* 居中并限制宽度 */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* 并排显示输入框 */
  }
}

挑战

简单

这里有一个基本的 HTML 表单。你的任务是设置移动端优先的样式：

表单内的元素应垂直排列。使用 display: flex 和 flex-direction: column，并添加一些 gap，让布局看起来更美观。
为 input、button 和 textarea 元素设置 width: 100% 并添加一些 padding，让它们在手机屏幕上足够大，方便用户点击。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>