Code Studio: Build a Contact Form
Put HTML Forms: User Input and Interaction into practice by finishing a contact form. The page has a heading and an empty form; you build the fields.
- Add a Name field: a
<label for="name">and an<input id="name" name="name" type="text">. - Add an Email field using
type="email", with its own label. - Add a Message field using
<textarea>, with its own label. - Add a submit button:
<button type="submit">Send</button>. - Make the email field required with the
requiredattribute, then press Run and try submitting the form empty to see the browser stop you.
Check your work: click each label in the preview. If the cursor jumps into the matching field, your for and id values match.
This form doesn't send anything anywhere; it stays on the page. As the reading says, connecting a form to a server is for another course.
Put HTML Forms: User Input and Interaction into practice by finishing a contact form. The page has a heading and an empty form; you build the fields.
- Add a Name field: a
<label for="name">and an<input id="name" name="name" type="text">. - Add an Email field using
type="email", with its own label. - Add a Message field using
<textarea>, with its own label. - Add a submit button:
<button type="submit">Send</button>. - Make the email field required with the
requiredattribute, then press Run and try submitting the form empty to see the browser stop you.
Check your work: click each label in the preview. If the cursor jumps into the matching field, your for and id values match.
This form doesn't send anything anywhere; it stays on the page. As the reading says, connecting a form to a server is for another course.