What a form does
An HTML form collects values from a visitor and gives the browser a way to submit them. A form might ask for a search term, a contact preference, or answers to a short survey. The form element groups the controls involved in that task. Inside it, you can place text inputs, checkboxes, radio buttons, select menus, and a button that starts submission.
To follow along, you need a plain-text editor and a modern web browser; no library or special tool version is required. Save an HTML file, open it in the browser, and edit and reload it as you experiment. You can inspect how controls behave without a server, although processing a submission requires somewhere for the data to go.
Choose controls that fit the question
A text input accepts a short answer, while a textarea is better for a longer message. A checkbox represents an independent choice, such as whether a visitor wants a copy of a message. Radio buttons work for a choice among alternatives: buttons in the same group share a name, so selecting one deselects the others. A select menu offers another way to present a defined set of choices.
The type of an input affects its behavior. For example, an email input signals that an email address is expected and can trigger basic browser validation. A required control can stop ordinary submission when it is empty. These features help visitors catch mistakes, but they do not guarantee that submitted data is accurate. Any application receiving form data must still check it.
Give every control a useful label and name
A label tells visitors what a control is for. For a text input, give the input an id and give its label a matching for value. That connection lets someone click the label to focus the input and helps assistive technology identify it. A checkbox or radio button can also be placed inside its label. Whichever pattern you use, make the wording specific: “Email address” is clearer than “Enter here.” Placeholder text may provide a hint, but it should not replace a visible label because it can disappear as someone types.
A name has a different job. It is the key used to identify a control’s value in submitted form data. For a search field named query containing the value garden, the submitted data associates query with garden. An id connects a control to a label; it does not, by itself, make that control’s value part of the submission. Give controls that should submit values meaningful names, and avoid using the same name for unrelated questions.
Some controls need extra care. Radio buttons that answer one question share a name but have distinct values, such as email and phone. A checked checkbox submits its value; an unchecked checkbox is usually omitted from the submitted data. A disabled control is also generally omitted. If your application needs to distinguish between “no” and “no answer,” plan how it will interpret missing values.
Understand what happens on submission
A form’s action identifies where the browser sends its data, and its method describes how. With GET, form values are added to the destination URL as query parameters. That makes GET suitable for actions such as search, where a result can be bookmarked or shared. Avoid putting sensitive information in a GET form because URLs can remain visible in browser history and other places.
With POST, the browser sends the values in the request body rather than adding them to the URL. POST is commonly used when a submission creates or changes something, such as sending a message. Neither method makes an application secure on its own; handling sensitive data also depends on the connection and the receiving application. A submit button starts the browser’s normal submission process. Without a working destination, you can still test labels and controls locally, but you should not expect the form to save or process responses.
Try a small contact-preference form
Make a form with a labeled name field, a labeled email field, two radio buttons for a preferred reply method, and a Submit button. Give the text fields names such as person_name and email. Give both radio buttons the name reply_method, but assign each a different value. Add a label to each control, save the file, and open it in your browser.
Before connecting the form to an application, check its behavior. Click each label: does it focus or select the intended control? Can you select only one reply method at a time? Does the email field respond when you enter an obviously incomplete address and try to submit? Finally, review every control that should provide data and confirm it has a name. These checks catch many beginner mistakes while keeping the form’s purpose clear to visitors.
