Mobile-First Forms

Part of the Practical Frontend section of Coddy's HTML journey — lesson 10 of 35.

Forms are one of the most important parts of the web — users type, tap, and interact with them constantly. When designing forms for mobile first, we focus on usability on small screens:

Make inputs and buttons bigger so users can easily type and tap.
Stack fields vertically and use full-width inputs.
Add padding and spacing for fingers.

Example for mobile:

input, button {
  width: 100%;       /* full width for small screens */
  padding: 0.75rem;  /* easier to tap */
  font-size: 1rem;   /* readable text */
}

Then, for larger screens (tablet or desktop), we enhance the layout:

Center the form on the page.
Place some fields side by side instead of stacking.
Adjust widths and spacing for better appearance.

Example for larger screens:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* center and limit width */
    margin: 0 auto;
  }

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

Challenge

Easy

You are given a basic HTML form. Your task is to set mobile-first styles:

The elements inside the form should be stacked vertically. Use display: flex and flex-direction: column, and add some gap so it looks nice.
Apply width: 100% and add some padding to the input, button, and textarea elements so they are large enough for mobile screens and easy for users to tap.

Cheat sheet

When designing forms for mobile first, focus on usability on small screens:

Make inputs and buttons bigger so users can easily type and tap
Stack fields vertically and use full-width inputs
Add padding and spacing for fingers

Mobile-first form styles:

input, button {
  width: 100%;       /* full width for small screens */
  padding: 0.75rem;  /* easier to tap */
  font-size: 1rem;   /* readable text */
}

For larger screens (tablet or desktop), enhance the layout:

Center the form on the page
Place some fields side by side instead of stacking
Adjust widths and spacing for better appearance

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* center and limit width */
    margin: 0 auto;
  }

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

Try it yourself

<!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>