Skip to content

Commit 04a2603

Browse files
Dagim-DanielDagim-Daniel
committed
a branch called " form-controlling" is created. and a new CSS file called "style" is created.
1 parent 3725052 commit 04a2603

2 files changed

Lines changed: 104 additions & 9 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,76 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
4+
<meta charset="utf-8" >
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
66
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="description" content="" >
8+
<meta name="viewport" content="width=device-width, initial-scale=1" >
9+
<link rel="stylesheet" href="style.css" >
910
</head>
1011
<body>
1112
<header>
1213
<h1>Product Pick</h1>
1314
</header>
1415
<main>
1516
<form>
16-
<!-- write your html here-->
17+
<p>please enter the required (*) information to order your T-shirt.</p>
18+
<fieldset>
19+
<legend>Customer Information</legend>
20+
<label for="name">Name:*</label>
21+
<input
22+
type="text"
23+
id="name"
24+
name="name"
25+
required
26+
pattern="[A-Za-z\s]{2,50}"
27+
>
28+
<br >
29+
<p>
30+
Please enter a valid name (2-50 characters, letters and spaces
31+
only).
32+
</p>
33+
<br >
34+
<label for="email">Email:*</label>
35+
<input type="email" id="email" name="email" required >
36+
</fieldset>
37+
1738
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
39+
customer name, with validation
40+
customer's email
41+
- - The upper one customer information - -
42+
//
43+
- -The lower one product information - -
44+
colour of T-shire (choose one from 3 option)
45+
size of T-shirt (choose one from xs, s, m, l, xl,xxl)-->
46+
<fieldset>
47+
<legend>Product Information</legend>
48+
<label for="colour">Colour:*</label>
49+
<select id="colour" name="colour" required>
50+
<option value="">--Please choose a colour--</option>
51+
<option value="red">Red</option>
52+
<option value="blue">Blue</option>
53+
<option value="green">Green</option>
54+
</select>
55+
<br >
56+
<label for="size">Size:*</label>
57+
<select id="size" name="size" required>
58+
<option value="">--Please choose a size--</option>
59+
<option value="xs">XS</option>
60+
<option value="s">S</option>
61+
<option value="m">M</option>
62+
<option value="l">L</option>
63+
<option value="xl">XL</option>
64+
<option value="xxl">XXL</option>
65+
</select>
66+
</fieldset>
67+
<label for="submit"></label>
68+
<input type="submit" id="submit" value="Submit Order" >
2069
</form>
2170
</main>
2271
<footer>
2372
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
73+
<p>By Dagim Daniel</p>
2574
</footer>
2675
</body>
2776
</html>

‎Form-Controls/style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
:root {
2+
--paper: oklch(7 0 0);
3+
--ink: color-mix(in oklab, var(--color) 5%, Green);
4+
--font: 100%/1.5 system-ui;
5+
--space: clamp(6px, 6px + 2vw, 15px);
6+
--container: 1280px;
7+
}
8+
/* ====== Base Elements ======
9+
General rules for basic HTML elements in any context */
10+
body {
11+
background: var(--paper);
12+
color: var(--ink);
13+
font: var(--font);
14+
}
15+
/* ====== Site Layout ======
16+
Setting the overall rules for page regions
17+
https://www.w3.org/WAI/tutorials/page-structure/regions/
18+
*/
19+
body {
20+
max-width: var(--container);
21+
margin: 0 auto calc(var(--space) * 4) auto;
22+
}
23+
p {
24+
margin: auto;
25+
}
26+
h1 {
27+
text-align: center;
28+
}
29+
input:invalid {
30+
border-color: rgb(255, 64, 0);
31+
}
32+
span {
33+
font-size: smaller;
34+
}
35+
input:valid {
36+
border-color: green;
37+
}
38+
fieldset:focus-within {
39+
border-color: green;
40+
}
41+
footer {
42+
width: var(--container);
43+
position: fixed;
44+
bottom: 0;
45+
text-align: center;
46+
}

0 commit comments

Comments
 (0)