HTML-CSS-Pair-Programming-Lab-2/form.html at 27ca03eb4deb5fb91abb0bb86374d16bfea65c45 · Return-Ready-PT-Mon-Wed/HTML-CSS-Pair-Programming-Lab-2 · 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

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <title>BuyIt!Form</title>
   </head>

   <body>

      <form action="formData.html" method="post">

         <fieldset class="your_details">
            <legend><h3>Step 1: Your details</h3></legend>
            <ul>
               <li>
               <label for="name">Name</label>
               <input id="name" name="user_name" type="text" size="30" placeholder="First and last name">
               </li>
               <li>
               <label for="email">Email</label>
               <input id="email" name="user_email" type="email" size="30" placeholder="youremail@domain.com">
               </li>
               <li>
               <label for="phone">Phone</label>
               <input id="phone" name="user_phone" type="tel" size="30" placeholder="Eg. 302-555-1212">
               </li>
            </ul>
         </fieldset>

         <fieldset>
            <legend class="delivery_address"><h3>Step 2: Delivery Address</h3></legend>
            <ul class="deliver_inputs">
               <li>
               <label for="address">Address</label>
               <textarea id="address" name="deliv_address" rows="6" cols="30"> </textarea>
               </li>
               <li>
               <label for="zip">Post code</label> <!--https://css-tricks.com/html-for-zip-codes/-->
               <input id="zip" name="zip" type="text" size="30" inputmode="numeric" pattern="^(?(^00000(|-0000))|(\d{5}(|-\d{4})))$">
               </li>
               <li>
               <label for="country">Country</label>
               <input id="country" name="user_phone" type="phone" size="30" >
               </li>
            </ul>
         </fieldset>

         <fieldset class="card_details">
         <legend><h3>Step 3: Card details</h3></legend>
            <ul>
               <li>
               <label>Card type</label><br>
               <input id="radio_visa" name="card_type" type="radio" value="radio_visa">
               <label class="radio_label">VISA</label>

               <input id="radio_amex" name="card_type" type="radio" value="radio_amex">
               <label class="radio_label">AmEx</label>

               <input id="radio_mastercard" name="card_type" type="radio" value="radio_mastercard">
               <label class="radio_label">Mastercard</label>
               </li>

               <li>
               <label for="card_number">Card number</label>
               <input id="card_number" name="card_number" type="text" size="30">
               </li>
               <li>
               <label for="cvv_number">Security code</label>
               <input id="cvv_number" name="security_code" type="text" size="30">
               </li>
               <li>
               <label for="cardName">Name on card</label>
               <input id="cardName" name="cardName" type="text" size="30" placeholder="Exact name as on the card">
               </li>
            </ul>

            <button type="submit">BUY IT!</button>

         </fieldset>

      </form>

   </body>
</html>