Summary - Feedback form
Combine all form elements into a feedback form.
What we learned in this group
In this group you saw the building blocks of forms:
- Form container:
<form>withactionandmethod - Label and field:
<label>and<input>, bound withforandid - Types:
text,email,password,number,date - Long text and button:
<textarea>and<button> - Selection:
<select>,<option>, checkbox and radio
Now we will combine them into a feedback form.
Exercise Build a feedback form
Add a feedback form to body. Open a <form> with action="/feedback" and method="post". Inside, add a <label for="name"> and <input id="name">, a <label for="email"> and <input type="email" id="email">, a <textarea name="message">, and finally a <button type="submit">.
Show example solution
<body>
<form action="/feedback" method="post">
<label for="name">Your name</label>
<input id="name" name="name">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<textarea name="message" rows="4"></textarea>
<button type="submit">Send</button>
</form>
</body>Test yourself
-
Match each tag to its role
- <form>
- Form container
- <label>
- Field label
- <input>
- Single-line field
- <textarea>
- Multi-line text
- <button>
- Button
-
Which element sends the data to the server in a feedback form?
- <hr>
- <button type="submit">
- <blockquote>
- <figure>
Show answer
<button type="submit"> — Correct. <button type="submit"> sends the form to the action address.
-
Write the submit button
<button type="____">Send</button>Show answer
<button type="submit">Send</button>