Hands-on Exercise to Create web forms

webdev
Exercices
Auteur
Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Date de publication

2024-10-13

Exercise 1: Basic Form Creation

  1. Create a new HTML file and link a CSS file:
    • Create a file named form-styles.css.
    • Link it in your HTML file (contact.html):
    <link rel="stylesheet" href="form-styles.css">
  2. Add a basic form structure:
    • Add the following HTML to your contact.html:
    <div class="container">
  <h2>Contact Us</h2>
  <form>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" class="form-control" required>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" class="form-control" required>
    </div>
    <div class="form-group">
      <label for="message">Message</label>
      <textarea id="message" name="message" class="form-control" rows="4" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
  3. Style the form using CSS:
    • Add the following CSS to form-styles.css:
    .container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

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

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0056b3;
}

Exercise 2: Adding Validation

  1. Add HTML5 validation attributes:
    • Ensure that the required attribute is added to all input fields in the form.
    • Add the type="email" attribute to the email input field to ensure proper email format.
  2. Test the form validation:
    • Open the contact.html file in a web browser.
    • Try submitting the form without filling in the fields to see the validation messages.

Exercise 3: Enhancing the Form with Bootstrap

  1. Include Bootstrap in your HTML file:
    • Add the following code to the <head> section of your contact.html:
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3B4xZMEozC77q1x6Y84n6b22c34367719321254960204672945265f67946759" crossorigin="anonymous">
  2. Update the form to use Bootstrap classes:
    • Modify the form HTML to use Bootstrap classes:
    <div class="container mt-5">
  <h2>Contact Us</h2>
  <form>
    <div class="mb-3">
      <label for="name" class="form-label">Name</label>
      <input type="text" id="name" name="name" class="form-control" required>
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Email</label>
      <input type="email" id="email" name="email" class="form-control" required>
    </div>
    <div class="mb-3">
      <label for="message" class="form-label">Message</label>
      <textarea id="message" name="message" class="form-control" rows="4" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
  3. Test the form with Bootstrap styling:
    • Open the contact.html file in a web browser to see the enhanced form with Bootstrap styling.

Exercise 4: Adding Custom Styles

  1. Create a custom CSS file:
    • Create a file named custom-styles.css.
    • Link it in your contact.html file after the Bootstrap CSS link:
    <link rel="stylesheet" href="custom-styles.css">
  2. Add custom styles to override Bootstrap defaults:
    • Add the following CSS to custom-styles.css:
    .container {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
}

.btn-primary {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-primary:hover {
  background-color: #218838;
  border-color: #1e7e34;
}
  3. Test the form with custom styles:
    • Open the contact.html file in a web browser to see the form with custom styles applied.

Final Step

Update the HTML website from the previous exercises with the new styles and components you’ve created using CSS and Bootstrap.

Additional Tips:

  • Validate Your CSS:
  • Test Your Pages:
    • Test your web pages in different browsers to ensure compatibility.
  • Keep Practicing:
    • Experiment with different styles and layouts to improve your CSS skills.

Réutilisation