HTML-CSS-Pair-Programming-Lab-2/index.html at main · CracknCode/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
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
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Form-Final</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>

<body>
    <div class="container">
        <Form>
            <fieldset>

                <legend class="toppad">Step 1: Your Details</legend>
                <ul>
                    <li>
                        <label for="user_name">Name</label>
                        <input type="text" name="user_name" id="user_name" placeholder="First and last name">
                    </li>
                    <li>
                        <label for="user_email">Email</label>
                        <input type="text" name="email" id="user_email" placeholder="example@domain.com">
                    </li>
                    <li>
                        <label for="user_phone">Phone</label>
                        <input type="text" name="phone" id="user_phone" placeholder="Eg. +447500000000">
                    </li>
                </ul>

            </fieldset>
            <fieldset>


                <legend>Step 2: Delivery Address</legend>


                <ul>
                    <li>
                        <label for="user_address">Address</label>
                        <textarea maxlength="250"></textarea> <!-- changed this input from text to textarea -->


                    </li>
                    <li>
                        <label for="user_postcode">Post Code</label>
                        <input type="text" name="post" id="user_postcode">
                    </li>
                    <li>
                        <label for="user_country">Country</label>
                        <input type="text" name="country" id="user_country">
                    </li>
                </ul>

            </fieldset>
            <fieldset>

                <legend>Step 3: Card Details</legend>

                <ul>
                    <li>

                        <label id="cardType">Card type</label>

                        <!-- i assigned the same name on all the radio buttons so you can only choose one of the
                            options, if you click another one after choosing one it will uncheck what you
                            initally picked -->

                        <ul id="cardOptions">
                            <li class="creditCards">
                                <input type="radio" name="click" id="visa">
                                <label for="visa">VISA</label>
                            </li>
                            <li class="creditCards">
                                <input type="radio" name="click" id="amex">
                                <label for="amex">AmEx</label>
                            </li>
                            <li class="creditCards">
                                <input type="radio" name="click" id="mastercard">
                                <label for="mastercard">Mastercard</label>
                            </li>
                        </ul>

                    </li>
                    <li>
                        <label for="cardNumber">Card number</label>
                        <input type="number" name="cardNumber" id="cardNumber">
                    </li>
                    <li>
                        <label for="securityCode">Security code</label>
                        <input type="number" name="securityCode" id="securityCode">
                    </li>
                    <li>
                        <label for="nameOnCard">Name on card</label>
                        <input type="text" name="nameOnCard" id="nameOnCard" placeholder="Exact name as on the card">
                    </li>
                </ul>

                <div class="centerAlign">
                    <button type="submit">BUY IT!</button>
                </div>

            </fieldset>


        </Form>
    </div>
</body>

</html>