HTML Input Summary
HTML inputs are interactive elements that allow users to enter data or make choices on a website. The data received by an input can be sent to the website or used to make real-time changes to the website.
<label for="firstname">First Name:</label>
<input id="firstname" name="firstname" type="text">Input Types
A long list of input types is available; however, just a few are the most commonly used. Note that inputs do not use a closing tag.
Text
The most common input type allows users to enter text. This is the input field you see used for contact forms.
<input name="input-name" type="text">Textarea
The textarea input type is like the text input except that it displays more than one line of entered text. This allows users to enter and review more text at a time.
<textarea name="input-name">Checkbox
Checkbox inputs allow users to choose multiple options from a list. This input might be used to ask visitors which condiments they want on a sandwich.
<input type="checkbox" name="katchup" value="katchup">
<label name="katchup">Katchup</label>
<input type="checkbox" name="mustard" value="mustard">
<label name="mustard">Mustard</label>Radio
Radio inputs allow users to choose only one option from a list. This input might be used for a multiple-choice question on a test.
<input type="radio" name="yes" value="yes">
<label name="yes">Yes</label>
<input type="radio" name="no" value="no">
<label name="no">No</label>Select
Select inputs allow users to choose one option from a drop-down list that only appears when the input is clicked. This saves space on the page.
<select name="state" id="state">
<option value="idaho">Idaho</option>
<option value="utah">Utah</option>
</select>Button
One of the most common inputs is the button. The input button is most commonly used with web forms to submit user input.
<input type="button" value="Submit">Using Inputs
Utilizing HTML inputs is an intermediate to advanced skill for web developers. Here, we focus more on understanding basic implementation and styling than using Javascript to make them do stuff.
Labels
Labels are an important part of using inputs. They tell the user what information they are supposed to enter and are also an important part of accessibility. Without labels, placeholders can be used.
<label for="firstname">First Name:</label>
<input id="firstname" name="firstname" type="text">Placeholders
Text-based inputs like <input> and <textarea> allow you to have placeholder text inside the input to suggest to the user the expected input. When the user starts typing, the placeholder text disappears.
<textarea placeholder="Enter Answer Here">