Skip to content
62 changes: 52 additions & 10 deletions Form-Controls/index.html
Original file line number Diff line number Diff line change
@@ -1,27 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Order form exercise - Product Pick">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<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-->
<h2>Order Form</h2>
<div>
<label for="customerName">Customer Name:</label>
<input
type="text"
id="customerName"
name="customerName"
required
pattern="^[a-zA-Z\s'-]+$"
title="Please enter a valid name containing only letters, spaces, hyphens, and apostrophes."
>
</div>

<div>
<label for="customerEmail">Customer Email:</label>
<input
type="email"
id="customerEmail"
name="customerEmail"
required
>
</div>

<div>
<label for="tshirtColour">T-Shirt Colour:</label>
<select id="tshirtColour" name="tshirtColour" required>
<option value="" disabled selected>Please select a colour</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>

<div>
<label for="tshirtSize">T-Shirt Size:</label>
<select id="tshirtSize" name="tshirtSize" required>
<option value="" disabled selected>Please select a 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>

<button type="submit" id="submit">Submit Order</button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>HOMEWORK SOLUTION</h2>
<h3>Created By @Houssam Lahlah</h3>
</footer>
</body>
</html>
Loading