HTML
Project final - Contact form
Add validation, submit button and accessibility attributes, finalize and document.
Final touches: button, autocomplete, pattern and comments
Three things finish the form: <button type='submit'> sends it, autocomplete lets the browser pre-fill fields like name or email, pattern enforces a format rule on fields like phone.
Finally, a short <!-- comment --> at the top of body tells anyone reading the file what the form is for. Comments don't render but stay in the source and make maintenance easier.
Adding comments
An HTML comment starts with <!-- and ends with -->. Comments don't render but stay in the source. Adding one at the top of a file or before a section gives context to anyone reading.
For example <!-- Contact form: Cafe Dem --> tells whoever opens the file right away what the page is for.
Exercise Finish the form
Add a short comment right after <body> at the top (example <!-- Contact form: Cafe Dem -->). Add autocomplete='name' to the name input. Add pattern='[0-9+ ]{10,}' to the phone input. Add <button type='submit'>Send</button> at the end of the form.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cafe Dem - Contact</title>
</head>
<body>
<!-- Contact form: Cafe Dem -->
<form action="/contact" method="post">
<fieldset>
<legend>Contact details</legend>
<label for="name">Your name</label>
<input type="text" id="name" name="name" autocomplete="name">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="name.surname@example.com" required>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="+1 555 123 4567" pattern="[0-9+ ]{10,}">
</fieldset>
<fieldset>
<legend>Subject</legend>
<label for="subject">Subject</label>
<select id="subject" name="subject">
<optgroup label="Orders">
<option value="delivery">Delivery</option>
</optgroup>
<optgroup label="Other">
<option value="suggestion">Suggestion</option>
</optgroup>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" maxlength="500" placeholder="Write your message here..."></textarea>
</fieldset>
<button type="submit">Send</button>
</form>
</body>
</html>
Project complete
At the end of five lessons you have a complete contact form: document skeleton, personal fields, a dropdown subject, a message box and a submit button. We added each piece in order and the final result is a single HTML file.
In the next groups we'll strengthen this form with accessibility and semantic structure. For now, open your form in a browser and try filling it in.
Test yourself
-
What is the correct type for a button that submits the form?
<button type="?">Send</button>
Show answer
submit — Correct! type='submit' makes the button send the form.
-
Fill in: complete the submit button
<button ____>Send</button>
Show answer
<button type="submit">Send</button>
-
Match elements to their role
- form
- Collects the data
- select
- Dropdown menu
- textarea
- Multi-line text
- button
- Submits the form
Next lesson: Header structure
