Challenge - Form and semantic structure
Write a feedback form page wrapped in semantic landmarks.
Semantic tags and form
Semantic tags divide the page into sections and explain each part's role. <header> holds the top banner, <nav> the menu, <main> the main content, and <footer> the bottom info. This separation boosts accessibility for screen readers and search engines.
Forms live inside a <form> container. Use <input> for single-line text, <textarea> for long text, <select> and <option> for a drop-down list. Each field should have a <label>; matching for and id values bind the pair.
Exercise Write a feedback form wrapped in semantic structure
Add <header>, <nav>, <main> and <footer> to body. Inside main open <form action="/feedback" method="post">; add a <label> + <input type="text"> pair, a <label> + <textarea> pair, and a <button type="submit">.
Show example solution
<body>
<header>
<h1>Feedback</h1>
</header>
<nav>
<a href="/">Home</a>
</nav>
<main>
<form action="/feedback" method="post">
<label for="name">Your name</label>
<input id="name" name="name" type="text">
<label for="message">Your message</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Send</button>
</form>
</main>
<footer>
<p>© 2024 Personal Page</p>
</footer>
</body>Test yourself
-
Match each semantic tag to its role
- <header>
- Top banner
- <nav>
- Menu
- <main>
- Main content
- <footer>
- Bottom info
- <form>
- Data container
-
Write the drop-down list
<label for="topic">Topic</label> <____ id="topic" name="topic"> <option value="suggestion">Suggestion</option> <option value="complaint">Complaint</option> </select>Show answer
<label for="topic">Topic</label> <select id="topic" name="topic"> <option value="suggestion">Suggestion</option> <option value="complaint">Complaint</option> </select> -
Which field suits a long, multi-line user text such as a comment?
- <input type="text">
- <input type="textarea">
- <select>
- <textarea>
Show answer
<textarea> — Correct. <textarea> is for long, multi-line text; an input type="text" allows only one line.