-
-
Notifications
You must be signed in to change notification settings - Fork 74
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
ITP-JAN-25-LONDON| BAKYTBEK SYDYKOV | module-onboarding/Form controls| Week2 #214
base: main
Are you sure you want to change the base?
Changes from 11 commits
32ed6c1
72fb6eb
56eb122
d264695
54d6f12
e38b67d
80a63eb
5e00dfd
4219640
671c82b
7042c36
c99ac81
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 |
---|---|---|
@@ -0,0 +1,8 @@ | ||
1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. | ||
HTML | ||
2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. | ||
HTML | ||
3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? | ||
HTML | ||
4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL | ||
HTML |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,7 @@ | |
<head> | ||
<meta charset="utf-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<title>My form exercise</title> | ||
<title> My form exercise </title> | ||
<meta name="description" content="" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
</head> | ||
|
@@ -13,15 +13,51 @@ <h1>Product Pick</h1> | |
</header> | ||
<main> | ||
<form> | ||
<!-- write your html here--> | ||
<!-- | ||
try writing out the requirements first as comments | ||
this will also help you fill in your PR message later--> | ||
<div> | ||
<label for="name">Full name:</label> | ||
<input type="text" id="name" name="user_name" required minlength="2" maxlength="50" placeholder="Enter your name" /> | ||
Age: | ||
<input type="number" id="age" name="age"> | ||
</div> | ||
<div> | ||
<label for="e-mail">Email:</label> | ||
<input type="e-mail" id="e-mail" name="user e-mail" required placeholder="Enter your e-mail"/> | ||
</div> | ||
<div> | ||
<label for="color"> Please choose a color </label> <br> | ||
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. I don't see any input with 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. Labels are usually used with inputs. If you don't have any corresponding input, I would suggest to replace |
||
<input type="radio" id="green" name="t-shirt color" value="green"> | ||
<label for="green"> Green</label> | ||
<input type="radio" id="red" name="t-shirt color" value="red"> | ||
<label for="red"> Red</label> | ||
<input type="radio" id="yellow" name="t-shirt color" value="yellow"> | ||
<label for="yellow"> Yellow</label> | ||
</div> | ||
|
||
<div> | ||
<label for="size"> Please choose a T-shirt's size: </label> | ||
<select id="size" name="size"> | ||
<option disabled selected value> -- select size --</option> | ||
<option value="XS"> XS </option> | ||
<option value="S"> S </option> | ||
<option value="M"> M </option> | ||
<option value="L"> L </option> | ||
<option value="XL"> XL </option> | ||
<option value="XXL"> XXL </option> | ||
</select> | ||
</div> | ||
<div> | ||
<label for="comment"> Comment: </label> | ||
<input type="text" id="comment" name="comment"> | ||
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. It is good that you have comment field. Usually comments are long texts. What can be a better tag for this type of input? 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. The textarea is a better tag. |
||
</div> | ||
<div> | ||
<button type="submit"> SUBMIT</button> | ||
</div> | ||
|
||
</form> | ||
</main> | ||
<footer> | ||
<!-- change to your name--> | ||
<h2>By HOMEWORK SOLUTION</h2> | ||
|
||
<p>By Bakytbek Sydykov</p> | ||
</footer> | ||
</body> | ||
</html> |
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.
There is no such input type as
e-mail
. Please, fix it.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.
Name attribute (as well as any other attributes) can't have spaces inside. Please, fix it.
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.
done