css form layout example

The form layout adopts a responsive design and is suitable for multiple devices; 1. Use semantic HTML structures, including name, email, phone and message fields; 2. CSS settings centered containers, rounded borders and background colors to improve visual effects; 3. Each form item is arranged vertically, the label is bold and the associated input boxes are enhanced to enhance accessibility; 4. The input box and text field are 100% wide, the inner margins are uniform, and blue shadows are displayed when focusing; 5. The submit button is designed with full width green, hovering to dark green, improving interactive feedback; 6. Reduce spacing and fonts on a small screen through media queries; 7. Scalable to use flex layout to implement side-by-side input; 8. It is recommended to add JavaScript verification and error styles to enhance functions. The overall structure is simple and practical, and can be directly integrated into the project and end with a complete sentence.

Creating a beautiful and well-structured CSS form layout is a common requirement in web development. Below is a practical, responsive form layout example suitable for login, registration, or contact form scenarios.

✅ Basic HTML structure

 <form class="form-container">
  <h2>Contact Form</h2>

  <div class="form-group">
    <label for="name">name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="form-group">
    <label for="phone">Tel</label>
    <input type="tel" id="phone" name="phone">
  </div>

  <div class="form-group">
    <label for="message">Leave a message</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>

  <button type="submit">Submit</button>
</form>

? Corresponding CSS style (responsive design)

 .form-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.form-container h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #555;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box; /* Make sure padding does not affect the width*/
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4d90fe;
  box-shadow: 0 0 5px rgba(77, 144, 254, 0.3);
}

button[type="submit"] {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

/* Responsive: Adjust spacing on small screen*/
@media (max-width: 480px) {
  .form-container {
    padding: 20px;
    margin: 20px;
  }

  .form-group label {
    font-size: 14px;
  }
}

? Key design points description

• box-sizing: border-box : Make sure padding and border do not increase the total width of the element.
• width: 100% : Let the input box adapt to the container width to improve the responsive experience.
• focus style optimization : Enhance accessibility and let users know the fields of the current operation.
• Mobile adaptation : adjust spacing and fonts on small screens through media queries.
• Semantic tags : Use <label> and associate for and id to improve accessibility and user experience.

? Tips (advanced suggestions)

• Error status styles (such as red borders) can be added with JavaScript verification.
• Use grid or flexbox to implement multiple column layouts (such as name phone side by side):

 .form-row {
  display: flex;
  gap: 15px;
}

.form-row .form-group {
  flex: 1;
}

Then in HTML:

 <div class="form-row">
  <div class="form-group">
    <label for="name">name</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Tel</label>
    <input type="tel" id="phone" name="phone">
  </div>
</div>

Basically that's it. This form is simple and modern, compatible with most devices, and can be used directly in actual projects. It can be adapted to different topics with a slight modification.

The above is the detailed content of css form layout example. For more information, please follow other related articles on the PHP Chinese website!