Module-HTML-CSS/Form-Controls/index.html at 92c27e07c31975c80e481d3850a2f18c3b65d455 · CodeYourFuture/Module-HTML-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My form exercise</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Shirt Order Form</h1>
  </header>
  <main>
  <form id="shirt-order-form">
    <!-- Customer's Name -->
    <div class="form-group">
      <label for="customer-name">What is your name?</label>
      <input type="text" id="customer-name" name="customer-name" required minlength="2" placeholder="Enter your name">
    </div>

    <!-- Customer's Email -->
    <div class="form-group">
      <label for="customer-email">What is your email?</label>
      <input type="email" id="customer-email" name="customer-email" required placeholder="Enter your email">
    </div>

    <!-- T-shirt Color -->
    <div class="form-group">
      <label for="tshirt-color">What color should this t-shirt be?</label>
      <select id="tshirt-color" name="tshirt-color" required>
        <option value="" disabled selected>Select a color</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
      </select>
    </div>

    <!-- T-shirt Size -->
    <div class="form-group">
      <label for="tshirt-size">What size do you want?</label>
      <select id="tshirt-size" name="tshirt-size" required>
        <option value="" disabled selected>Select a size</option>
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="XXL">XXL</option>
      </select>
    </div>

    <!-- Delivery Date -->
    <div class="form-group">
      <label for="delivery-date">When do you want the t-shirt to be delivered?</label>
      <input type="date" id="delivery-date" name="delivery-date" required min="" max="">
    </div>

    <!-- Submit Button -->
    <button type="submit">Submit Order</button>
  </form>

  </main>
  <footer>
    <!-- Change to your name -->
    <h2>By Delwin Mansur A. Bawa</h2>
  </footer>

  <script>
    // Setting min and max delivery dates (next 4 weeks)
    const deliveryDateInput = document.getElementById('delivery-date');
    const today = new Date();
    const maxDate = new Date(today);
    maxDate.setDate(today.getDate() + 28); // Max 4 weeks from today
    deliveryDateInput.min = today.toISOString().split('T')[0];
    deliveryDateInput.max = maxDate.toISOString().split('T')[0];
  </script>
</body>
</html>