Skip to content
74 changes: 68 additions & 6 deletions Form-Controls/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,81 @@
</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? -->
<fieldset>
<legend>Color Option</legend>
<div>
<input type="radio" name="color" value="grey" id="grey" required>
<label for="grey">Grey</label>
</div>
<div>
<input type="radio" name="color" value="black" id="black" required>
<label for="black">Black</label>
</div>
<div>
<input type="radio" name="color" value="red" id="red" required>
<label for="red">Red</label>
</div>
</fieldset>
<br>

<!--What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
<fieldset>
<legend>Size</legend>
<div>
<input type="radio" name="size" value="XS" id="xs" required>
<label for="xs">XS</label>
</div>
<div>
<input type="radio" name="size" value="S" id="s" required>
<label for="s">S</label>
</div>
<div>
<input type="radio" name="size" value="M" id="m" required>
<label for="m">M</label>
</div>
<div>
<input type="radio" name="size" value="L" id="l" required>
<label for="l">L</label>
</div>
<div>
<input type="radio" name="size" value="XL" id="xl" required>
<label for="xl">XL</label>
</div>
<div>
<input type="radio" name="size" value="XXL" id="xxl" required>
<label for="xxl">XXL</label>
</div>
</fieldset>
<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>