HTML Inputs
In your HTML you often will want to collect information from the user. We generally do this through the use of different types of inputs. These might be different kinds of text inputs or some kind of choice inputs. Most of these will be implemented using the <input> tag with a type attribute.
Input Type Text
<input type="text"> Is used for a one-line text input.
<form>
Favorite Food:<br>
<input type="text" name="favoritefood"><br>
Favorite Drink:
<input type="text" name="favoritedrink"><br>
</form>
How this will look on the page:
Input Type Password
<input type="password"> Is used for an obfuscated password input.
<form>
User name:<br>
<input type="text" name="username"><br>
Password:
<input type="password" name="password"><br>
</form>
How this will look on the page:
Input Type Email
<input type="email"> Is used as an email input field.
Some browsers will automatically validate email format on submit.
Some mobile browsers will use a special keyboard for email inputs, that includes a “.com” button etc.
<form>
E-Mail:<br>
<input type="email" name="email"><br>
</form>
How this will look on the page (try it on mobile):
Input Type File
<input type="file"> Is used for a file-select input, with a “Browse” or “Choose file” button for file uploads.
<form>
Select File:<br>
<input type="file" name="file"><br>
</form>
How this will look on the page:
Input Type Range
<input type="range"> Is used as a selector for a number within a certain range. The default range is 0 to 100, but you can define those restrictions
<form>
Order Quantity:<br>
<input type="range" name="qty" min="0" max="10"><br>
</form>
How this will look on the page:
Input Type Hidden
<input type="hidden"> Is used to include data in your form to be submitted, that you don’t want to actually display on the page.
Warning: It will still be in the markup, so don’t store sensitive data here.
<form>
Favorite Food:<br>
<input type="text" name="favoritefood"><br>
Favorite Drink:
<input type="text" name="favoritedrink"><br>
<input type="hidden" id="sessionid" name="sessionid" value="x8ysia7">
<button type="submit">Submit</button>
</form>
How this will look on the page:
Input Placeholder attribute
<input type="text" placeholder="pattern"> Is used as a hint that describes the expected value for the input.
It is allowed on input types: text, search, url, tel, email, and password.
Warning: Do not use the placeholder attribute in place of a <label> element. The label describes the role of the input. The placeholder is just a hint. There are cases that the placeholder will not be shown or not understood correctly for accessibility, so the form must be understandable without it.
<form>
Phone Number:<br>
<input type="tel" name="tel" placeholder="(###) ###-####"><br>
</form>
How this will look on the page:
Input Type Radio
<input type="radio"> Is used as a choice input where only one option may be chosen.
The name attribute is what will group these together as semantically belonging together as a group.
<form>
Gender:<br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
How this will look on the page:
Input Type Checkbox
<input type="radio"> Is used as a choice input where multiple options may be chosen, or there is just an on/off or yes/no state.
The name attribute is what will be the data key if you are using a form submit action. The value for that key will be in the value attribute, if no value is provided, it will default to on. An unchecked checkbox will not send a value on a submit.
You can use the checked attribute to default a checkbox to checked.
<fieldset>
<legend>Choose your interests</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding" checked>
<label for="coding">Coding</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Music</label>
</div>
</fieldset>
How this will look on the page:
Select dropdown input
<select> Is it’s own input type that can have multiple options to choose from a dropdown.
You can provide a selected attribute to set a default. You can also provide a value attribute to specify the value saved when selected.
You can use the multiple attribute to allow for the user to ctrl-click multiple selections. But this can be a difficult interaction for users if they aren’t familiar with that functionality, and even more difficult when considering accessibility and people using only keyboards.
<select name="optionid">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected>Option 3</option>
</select>
How this will look on the page:
You can use the <optgroup> element to break options into sections.
<select>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
How this will look on the page:
Input Type Submit
You use the submit input type for the control, usually a button, that will submit the form data, generally to your back-end.
An input with type submit will be styled as a button, and the value attribute describes what the text on the button will say. If value is omitted, the browser will use it’s default.
<input type="submit" value="Send">You can use your own custom element or button, but be aware that if there is only one <button> element inside a form, it will be treated as the submit action. So, you should get in the habit of always applying the type="submit" attribute.