-
-
Notifications
You must be signed in to change notification settings - Fork 92
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SOUTH AFRICA - ITP | Luke Manyamazi | Module-User-Focused-Data | Week 2 #230
base: main
Are you sure you want to change the base?
Changes from all commits
fc5ddfc
c8ed7ef
4ebfbdb
ee9131d
b6adb3c
031df7b
b69ad37
29c0dd1
fc06a98
5de8e34
c3a627d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,61 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<title>My form exercise</title> | ||
<meta name="description" content=""> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<header> | ||
<h1>Product Pick</h1> | ||
</header> | ||
<main> | ||
<form> | ||
<!-- write your html here--> | ||
<!-- try writing out the requirements first--> | ||
</form> | ||
|
||
</main> | ||
<footer> | ||
<!-- change to your name--> | ||
<h2>By HOMEWORK SOLUTION</h2> | ||
</footer> | ||
</body> | ||
|
||
</html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<title>Luke form exercise</title> | ||
<meta name="description" content=""> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<header> | ||
<h1>Product Pick</h1> | ||
</header> | ||
<main> | ||
<div class="form_container"> | ||
<form> | ||
<div class="name"> | ||
<label for="name">Name: </label> | ||
<input id="name" placeholder="Your name" type="text" required> | ||
</div> | ||
<br /> | ||
<div class="email"> | ||
<label for="email">Email: </label> | ||
<input id="email" type="email" placeholder="Your email" required> | ||
</div> | ||
<div class="color"> | ||
<p>Please select your favorite color.</p> | ||
<input type="radio" id="red" name="color" value="red"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Select elements do not have associated label elements. Please ensure that all input fields etc. Have lables it is important for accessibility. |
||
<label for="red">Red</label><br /> | ||
<input type="radio" id="green" name="color" value="green"> | ||
<label for="green">Green</label><br /> | ||
<input type="radio" id="blue" name="color" value="blue"> | ||
<label for="blue">Blue</label><br /> | ||
</div> | ||
<br /> | ||
<div class="size"> | ||
<label for="size_choice">Choose a size.</label> | ||
<select name="size" id="size" required> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Touch targets do not have sufficient size or spacing. This is having an impact on your accessibility score. |
||
<option value="select">Select a size</option> | ||
<option value="extra_small">XS</option> | ||
<option value="small">S</option> | ||
<option value="medium">M</option> | ||
<option value="large">L</option> | ||
<option value="extra_large">XL</option> | ||
<option value="extra_extra_large">XXL</option> | ||
</select> | ||
</div><br> | ||
<div class="date"> | ||
<label for="date">Choose a deliver date.</label> | ||
<input type="date" id="date" name="delivery_date" min="2024-10-16" max="2024-11-16" required> | ||
</div> | ||
</form> | ||
</div> | ||
</main> | ||
<footer> | ||
|
||
<h2>By Luke Manyamazi</h2> | ||
</footer> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
body { | ||
width: 100%; | ||
padding: 1em 1em 2em 3em; | ||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
background-color: aqua; | ||
} | ||
|
||
.form_container { | ||
width: 700px; | ||
height: 250px; | ||
border-color: black; | ||
border: 1px; | ||
border-style: solid; | ||
padding: 1em; | ||
background-color: bisque; | ||
} | ||
|
||
input:valid { | ||
border: 2px solid green; | ||
background-color: #e6ffe6; | ||
} | ||
|
||
input:invalid { | ||
border: 2px solid red; | ||
background-color: #ffe6e6; | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The name field is only supposed to accept names with atleast two characters.