Skip to content

Commit 922960c

Browse files
Niangh-CiangNiangh-Ciang
committed
Add form inputs, radio colour options, placeholders, and improved styling
1 parent 0606b09 commit 922960c

3 files changed

Lines changed: 138 additions & 20 deletions

File tree

‎Form-Controls/image.jpg‎

41.2 KB
Loading

‎Form-Controls/index.html‎

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,88 @@
66
<title>Product Picker Form</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="style.css" />
910
</head>
1011
<body>
1112
<header>
12-
<h1>Choose your product</h1>
13+
<h1>Please Enter Your Details</h1>
1314
</header>
1415
<main>
1516
<form>
16-
<!-- Requirements:
17-
- Ask for user name
18-
- Ask for product type
19-
- Ask for quantity
20-
- Add validation
21-
-->
22-
23-
<label for="name">Your Name:</label>
24-
<input id="name" name="name" type="text" required />
25-
<label for="product">Product:</label>
26-
<select id="product" name="product" required>
27-
<option value="">Select one</option>
28-
<option value="shoes">Shoes</option>
29-
<option value="bag">Bag</option>
30-
<option value="hat">Hat</option>
31-
</select>
17+
<!-- NAME -->
18+
<label for="name">Full Name:</label>
19+
<input
20+
id="name"
21+
name="name"
22+
type="text"
23+
required
24+
minlength="2"
25+
pattern=".*\S.*"
26+
placeholder="Jane Doe"
27+
/>
28+
29+
<!-- EMAIL -->
30+
<label for="email">Email Address:</label>
31+
<input
32+
id="email"
33+
name="email"
34+
type="email"
35+
required
36+
placeholder="janedoe@gmail.com"
37+
/>
38+
39+
<fieldset>
40+
<legend>Choose a Colour:</legend>
41+
42+
<label>
43+
<input type="radio" name="colour" value="red" required />
44+
Red
45+
</label>
46+
47+
<label>
48+
<input type="radio" name="colour" value="blue" required />
49+
Blue
50+
</label>
51+
52+
<label>
53+
<input type="radio" name="colour" value="black" required />
54+
Black
55+
</label>
3256

33-
<label for="qty">Quantity:</label>
34-
<input id="qty" name="qty" type="number" min="1" max="10" required />
57+
<label>
58+
<input type="radio" name="colour" value="pink" required />
59+
Pink
60+
</label>
61+
62+
<label>
63+
<input type="radio" name="colour" value="white" required />
64+
White
65+
</label>
66+
67+
<label>
68+
<input type="radio" name="colour" value="orange" required />
69+
Orange
70+
</label>
71+
72+
<label>
73+
<input type="radio" name="colour" value="purple" required />
74+
Purple
75+
</label>
76+
</fieldset>
77+
78+
<!-- SIZE -->
79+
<label for="size">Choose a Size:</label>
80+
<select id="size" name="size" required>
81+
<option value="">Select size</option>
82+
<option value="XS">XS</option>
83+
<option value="S">S</option>
84+
<option value="M">M</option>
85+
<option value="L">L</option>
86+
<option value="XL">XL</option>
87+
<option value="XXL">XXL</option>
88+
</select>
3589

36-
<button type="submit">Submit</button>
90+
<button type="submit">Submit Order</button>
3791
</form>
3892
</main>
3993
<footer>

‎Form-Controls/style.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body {
2+
background-image: url("image.jpg");
3+
background-size: cover;
4+
background-repeat: no-repeat;
5+
background-position: center;
6+
font-family: Arial, sans-serif;
7+
max-width: 600px;
8+
margin: 0 auto;
9+
padding: 20px;
10+
line-height: 1.6;
11+
}
12+
13+
header h1 {
14+
text-align: center;
15+
margin-bottom: 20px;
16+
}
17+
18+
form {
19+
display: flex;
20+
flex-direction: column;
21+
gap: 15px;
22+
}
23+
24+
label {
25+
font-weight: bold;
26+
27+
28+
}
29+
30+
input,
31+
select {
32+
padding: 8px;
33+
font-size: 1rem;
34+
}
35+
36+
fieldset {
37+
border: 1px solid #ccc;
38+
padding: 10px;
39+
}
40+
41+
legend {
42+
font-weight: bold;
43+
}
44+
45+
button {
46+
padding: 10px;
47+
font-size: 1rem;
48+
background-color: #333;
49+
color: white;
50+
border: none;
51+
cursor: pointer;
52+
}
53+
54+
button:hover {
55+
background-color: #555;
56+
}
57+
58+
footer {
59+
text-align: center;
60+
margin-top: 30px;
61+
font-size: 25px;
62+
font-weight: bold;
63+
color: #360670;
64+
}

0 commit comments

Comments
 (0)