1. Multiple-choice and Lists
HTML forms offer tons of ways for users to interact with a web page. Apart from text fields and buttons, forms support multiple-choice and list elements, which let you create more flexible and convenient interfaces for data input. Today, we'll dive into these.
In HTML, forms provide several ways to create elements for selecting options from a list. The most common ones are <select> and <option>, as well as checkboxes and radio buttons.
Dropdown List: <select> and <option>
The <select> tag creates a dropdown list, and the <option> tag is used to add items within that list. Users can pick one or multiple options from the list.
Single Selection: By default, <select> allows choosing only one option.
<label for="country">Select a country:</label>
<select id="country" name="country">
<option value="ru">Russia</option>
<option value="us">USA</option>
<option value="de">Germany</option>
</select>
<label for="country">Select a country:</label>
<select id="country" name="country">
<option value="ru">Russia</option>
<option value="us">USA</option>
<option value="de">Germany</option>
</select>
Multiple Selection: If you add the multiple attribute, users can select multiple options by holding down Ctrl (on Windows) or Cmd (on Mac) while clicking.
<label for="languages">Select languages:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russian</option>
<option value="en">English</option>
<option value="de">German</option>
</select>
<label for="languages">Select languages:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russian</option>
<option value="en">English</option>
<option value="de">German</option>
</select>
In this case, the data of multiple selected elements is sent to the server as an array of values.
Checkboxes: <input type="checkbox">
Checkboxes let users pick one or more options from a given list. Each checkbox is created with the <input type="checkbox"> tag.
<label><input type="checkbox" name="interests" value="sports"> Sports</label>
<label><input type="checkbox" name="interests" value="music"> Music</label>
<label><input type="checkbox" name="interests" value="travel"> Travel</label>
<label><input type="checkbox" name="interests" value="sports"> Sports</label>
<label><input type="checkbox" name="interests" value="music"> Music</label>
<label><input type="checkbox" name="interests" value="travel"> Travel</label>
If all checkboxes have the same name attribute, the data from each checked checkbox will be sent as an array.
Radio Buttons: <input type="radio">
Radio buttons allow users to select just one option from a group. Radio buttons with the same name attribute value are grouped together, and the user can pick only one option in that group.
<p>Select Gender:</p>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<p>Select Gender:</p>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
Radio buttons are handy for selecting one out of several fixed options like "Yes" or "No," gender, age group, etc.
2. Different Input Types in Forms
HTML offers a bunch of <input> types that give different ways for users to input data. In addition to the ones we've looked at, here are a few cool input types to make forms more user-friendly and precise.
Phone (type="tel")
A field for entering phone numbers. On mobile devices, it can trigger a number keypad based on the user's device.
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (123) 456-7890">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (123) 456-7890">
Search (type="search")
A text field optimized for search. Depending on the browser, it might include a clear text button or unique styles.
GO TO FULL VERSION