Different questions need different input types. type selects the control, name names the submitted field and id connects its label. Keep a visible label for every field.
Select a type by the content
text suits single-line names. email can check basic address syntax. password usually masks characters but does not encrypt them. number suits quantities with numeric limits. date provides date input whose appearance depends on the browser and system. Phone numbers and postal codes are identifiers, not quantities; leading zeros and symbols may matter. tel suits phone entry but does not itself validate a phone-number format.
Hints, values and constraints
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="[email protected]" required>placeholder is a temporary example that disappears when typing; it cannot replace a label. value supplies an actual initial field value.
required is a boolean attribute: its presence enables it. Even required="false" still requires a value. Remove the attribute to make the field optional.
<label for="guests">Guests (1 to 6)</label>
<input id="guests" name="guests" type="number" min="1" max="6" step="1" value="1">min and max limit the number; step="1" specifies increments of one. Some controls allow temporarily invalid typing and report the problem at submission. maxlength limits text length on supported text fields; it is not a numeric maximum.
Multiple lines
textarea accepts longer messages and has a closing tag. Its initial text goes between the tags, not in a value attribute. rows sets its initial visible line count. Associate it with a label too.
In the Lab, leave the email empty or enter a@, then submit to see native validation. The preview permits validation but sends no data. Browser checks give early feedback; a real receiving service must validate independently.
Page experiment: Input elements
Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.
Try an empty email, a@ and 7 guests. Native messages vary by browser and locale. No registration is submitted.
The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.
KNOWLEDGE QUIZ
Build it yourself: Input elements
Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.
- Create a required email and an integer quantity from 1 to 4, each with a visible label and name.
- Add a four-row message textarea and a submit button; try invalid input and distinguish validation from saving.