Skip to content
Open
50 changes: 44 additions & 6 deletions Form-Controls/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,57 @@
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>Pick product</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-->
<!-- 1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.-->
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Chandrmani Gaire" pattern=".*\S.*\S.*" required>
</div>
<br>
<div>
<label for="email">Email</label>
<input type="email" name="email" placeholder="chandramani@gmail.com" id="email" required>
</div>
<br>
<!--What color should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? -->
<div>
<label for="color">T-shirt color:</label>
<select id="color" name="color" required>
<option value="">Choose a color</option>
<option value="grey">Grey</option>
<option value="red">Red</option>
<option value="black">Black</option>
</select>
</div>
<br>

<!--What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
<label for="size">What size do you want?</label>
<select id="size" name="size" required>
<option value="">-- Choose 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>
<br>
<div>
<input id="submit" type="submit">
</div>
<br>
<div>
<input id="reset" type="reset">
</div>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Chandramani Gaire</p>
</footer>
</body>
</html>
Loading