Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 78 additions & 9 deletions Form-Controls/index.html
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see an error on the console when loading the page
Refused to apply style from 'http://127.0.0.1:5500/Form-Controls/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Original file line number Diff line number Diff line change
@@ -1,27 +1,96 @@
<!DOCTYPE html>
<!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="" />
<title>T-shirt Order Form</title>
<meta
name="description"
content="T-shirt order form for customers to place orders"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<form method="get" class="container">
<!-- Requirements:
- What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
- What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
- What colour should this T-shirt be? I must provide 3 options and to ensure they do not choose other colours.
- What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL and to ensure they do not choose other sizes.
- How many does the customer want? I must collect a number for quantity of t-shirts and ensure the number is between 1 and 100.
-->
<header>
<h1>T-shirt Order Form</h1>
</header>

<hr />
<label for="name">Full Name</label>
<input
id="name"
name="name"
type="text"
minlength="2"
placeholder="FirstName Surname"
pattern="[\p{L} ]{2,}"
required
/>

<hr />
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
pattern="[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$"
placeholder="Your email"
required
/>

<hr />
<label for="colour">T-shirt Colour:</label>
<select name="colour" id="colour" required>
<option value="">Choose a Colour</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
</select>

<hr />
<label for="Size">T-shirt Size:</label>
<select name="size" id="Size" required>
<option value="">Choose 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>
<hr />

<label for="quantity">Quantity:</label>
<input
id="quantity"
name="quantity"
type="number"
min="1"
max="100"
value="1"
required
/>

<hr />
<button type="submit">Submit</button>

<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>Mahdi Rafiei</p>
</footer>
</body>
</html>
Loading