Back to subject
HTML5/HTML Forms

Read a Form

Practical lesson

Let's build the basic shape of a form and follow the information from the form to its fields.

- <form> is the container for controls that collect or submit user input. - Give important forms a clear purpose and label their controls. - The action attribute tells the browser where the form data is sent when the form is submitted. - The method attribute controls how the browser submits the data, commonly GET or POST. - Inside the form, use controls such as <input>, <select>, <textarea>, and <button>. - A control needs a useful name when its value should be included in submitted form data. - Use <label> so users can understand what each control asks for. - <fieldset> and <legend> can group related controls, especially in longer forms. - A submit button gives the user a clear way to send the form.

The important idea is that a form is not just a box around inputs. Its action, method, names, labels, and controls work together to make the submission meaningful.

Try it yourself
Code

Starter example

Code
<form action="/contact" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required>
  <button type="submit">Send</button>
</form>
Live preview