Skip to content

Commit 778e937

Browse files
haftomprogrammerhaftomprogrammer
committed
the html format only
1 parent a7b8a25 commit 778e937

3 files changed

Lines changed: 74 additions & 7 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ Let's write out our testable criteria. Check each one off as you complete it.
5151

5252
> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional?
5353
54-
These practices reflect the level of quality expected in professional work.
54+
These practices reflect the level of quality expected in professiona- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
55+
l work.
5556
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
5657

5758
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
@@ -61,7 +62,6 @@ They ensure your code is reliable, maintainable, and presents a polished, credib
6162

6263
## Resources
6364
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
64-
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
6565
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
6666
- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse)
6767
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)

‎Form-Controls/index.html‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,61 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<link rel="stylesheet" href="./style.css" >
45
<meta charset="utf-8" />
56
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
67
<title>My form exercise</title>
78
<meta name="description" content="" />
89
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
<style>
11+
input:valid{
12+
border:2px solid green;
13+
}
14+
input:invalid{
15+
border:2px solid red;
16+
}
17+
</style>
918
</head>
1019
<body>
1120
<header>
1221
<h1>Product Pick</h1>
1322
</header>
1423
<main>
1524
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
25+
<!-- -->
26+
<label for="customername">Customer name: </label>
27+
<input type="text" id="customername" name="customername" required
28+
pattern="^[a-zA-Z]+ [a-zA-Z]+$"
29+
placeholder="Customer name"
30+
/>
31+
<br />
32+
<label for="customeremail">Customer email: </label>
33+
<input type="email" id="customeremail" name="customeremail" required
34+
pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
35+
placeholder="Customer email" />
36+
<br />
37+
<fieldset>
38+
<legend>T-shirt Colors</legend>
39+
<input type="radio" id="black" name="colors" value="BLACK">
40+
<label for="black">BLACK</label>
41+
<input type="radio" id="bLue" name="colors" value="BLUE">
42+
<label for="blue">BLUE</label>
43+
<input type="radio" id="red" name="colors" value="RED">
44+
<label for="red">RED</label>
45+
</fieldset>
46+
<select name="size" id="sizes">
47+
<option value="xs">XS</option>
48+
<option value="s">S</option>
49+
<option value="m">M</option>
50+
<option value="l">L</option>
51+
<option value="XL">XL</option>
52+
<option vallue="XXL">XXL</optio>
53+
</select>
2054
</form>
2155
</main>
2256
<footer>
2357
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
58+
<p>By Yonas Gebre</p>
2559
</footer>
2660
</body>
2761
</html>

‎Form-Controls/style.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
body {
3+
background-color: lightwhite;
4+
text-align:center;
5+
max-width: 800px;
6+
}
7+
8+
input {
9+
width: 150px;
10+
padding: 0;
11+
margin: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
fieldset {
16+
position: relative;
17+
}
18+
19+
legend {
20+
position: absolute;
21+
left: 0;
22+
top:0;
23+
}
24+
25+
#black{
26+
background-color:black;
27+
}
28+
#red{
29+
background-color:red;
30+
}
31+
#blue{
32+
background-color:blue;
33+
}

0 commit comments

Comments
 (0)