Module-Onboarding/Form-Controls/index.html at 058595ef29fc364bf3f42e0d47d999969b3bcf73 · Jay00-gg/Module-Onboarding · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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">
  </head>
  <body>
    <!--
      FORM REQUIREMENTS:
      1. Collect customer's full name
         - Must be at least 2 characters long
         - Cannot be empty

      2. Collect customer's email
         - Must be a valid email format
         - Field is required

      3. Choose T-shirt colour
         - Must select ONE option only
         - Only 3 allowed options provided
         - Cannot enter custom colours

      4. Choose T-shirt size
         - Must select ONE option
         - Options: XS, S, M, L, XL, XXL
         - Field is required

      5. All fields required before submission

      6. No JavaScript allowed... only HTML form validation
     -->
  <header>
    <h1>T-Shirt Order Form</h1>
  </header>

  <main>
    <form>

      <!-- Name -->
      <label for="name">Full Name</label>
      <input
        type="text"
        id="name"
        name="name"
        placeholder="Enter your full name"
        required
        minlength="2"
        pattern=".*\S.*\S.*"
      >

      <!-- Email -->
      <label for="email">Email Address</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="you@example.com"
        required
      >

      <!-- Colour Selection -->
      <fieldset>
        <legend>Choose a colour</legend>

        <label>
          <input
            type="radio"
            name="colour"
            value="pink"
            required
          >
          Pink
        </label>

        <label>
          <input
            type="radio"
            name="colour"
            value="black"
          >
          Black
        </label>

        <label>
          <input
            type="radio"
            name="colour"
            value="blue"
          >
          Blue
        </label>
      </fieldset>

      <!-- Size Selection -->
      <fieldset>
        <legend>Select a size</legend>

        <label for="size">Size</label>

        <select
          id="size"
          name="size"
          required
        >
          <option value="">-- Select 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>
      </fieldset>

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

    </form>
  </main>

  <footer>
    <p>By Juanita Nwachukwu</p>
  </footer>

</body>
</html>