Let's build labeled input controls and check what each part does.
- Start with <label for="email">Email</label>. The for value must match the input's id. - Add <input id="email" name="email" type="email">. - id connects the label to the exact control on the page. - name gives the submitted data a key when the form is sent. - type="email" tells the browser what kind of value is expected and can enable useful built-in validation. - type="text" is a general text field. - type="password" hides typed characters visually in most browsers. - type="number", type="date", type="file", type="checkbox", and type="radio" provide different input controls for different kinds of data. - placeholder can show a short example, but it should not replace a real label. - required can tell the browser that the user must provide a value before submission.
Read the example by matching each label's for value with the input's id. That connection is one of the most important form habits to learn.