📋 Forms & User Input

The <form> Element

All form controls live inside a <form> element. The action attribute sets the URL that receives the data when submitted. The method attribute is either GET (data in the URL) or POST (data in the request body — used for sensitive data).

Input Types

• <input type="text"> — single-line text
• <input type="email"> — validates email format
• <input type="number"> — numeric input with up/down arrows
• <input type="password"> — hides characters
• <input type="checkbox"> — yes/no toggle
• <input type="radio"> — pick one from a group (share the same name attribute)
• <select><option> — dropdown menu
• <textarea> — multi-line text area
• <input type="submit"> or <button type="submit"> — submits the form

Labels and Accessibility

Always pair every input with a <label>. Either wrap the input inside the label, or use the for attribute matching the input's id. This tells screen readers what each field is for and also makes the label clickable to focus the input.