Drop Down Lists
Drop down lists are a perfect way to provide users with a long list of options in a usable manner. Outputting every state within the country on a page with radio buttons would create a rather cluttered and daunting list. Drop down menus provide the perfect venue for a long list of options.
To create a drop down menu the
select and option elements are used. The select element will wrap all of the different menu options marked up using the option element. Then you can apply the name attribute to the selectelement.
Each individual option within the menu needs to be coded using the
option element. The option element will wrap the text to be included within the menu. Additionally, the option element will include the value attribute, specific to each individual option.
As with the
checked Boolean attribute with radio buttons and checkboxes, drop down menus can use the selectedBoolean attribute to preselect an option for users.
<select name="day"><option value="Friday" selected>Friday</option><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option></select>
Drop Down Lists Demo
Multiple Selections
Using the standard drop down list and adding the Boolean attribute
multiple to the select element allows a user to choose more than one option from the menu. Additionally, using the selected Boolean attribute on more than oneoption element within the menu will preselect multiple options.
The height and width of the
select element can be controlled using CSS and should be adjusted appropriately to allow for multiple selections. It may also be worth mentioning to users that to choose multiple options they will need to hold down the shift key while clicking to make their selections.
<select name="day" multiple><option value="Friday" selected>Friday</option><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option></select>
Multiple Selections Demo
Form Buttons
After a user inputs the requested information, buttons allow them to put that information into action. Most commonly, a submit button is used to process the data. A reset button is often used to clear data.
Submit Button
Users click the submit button to process data after filling out a form. The submit button uses the
input element with atype attribute of either submit or image. The submit attribute value is the most common as it is simple to use and provides the most control. The image attribute value is used specifically to set an image as a submit button, however with the use of CSS the need to use an image has greatly diminished.
To determine the verbiage to be used within the button, the
value attribute is used. Using CSS properties such asbackground, border-radius, box-shadow, and others, the button can then be styled to any specific desire.
<input type="submit" name="submit" value="Submit Form">
Submit Button Demo
Reset Button
To take the complete opposite action from submitting a form, users may also reset a form using the reset button. The reset button code works just like that of the submit button, however it uses the
reset value for the type attribute.
Reset buttons are becoming less and less popular because they offer a very strong action, often undesired by both websites and users. Users may spend quite a bit of time filling out a form only to click the reset button accidentally thinking it was the submit button. Chances of a user filling out the form again thereafter are small. Before using a reset button think of any potential consequences.
<input type="reset" name="reset" value="Reset Form">
Reset Button Demo
Other Inputs
Outside all other previously stated choices the
input element does have a few other use cases. Two of which include passing hidden data and attaching filings during form processing.Hidden Input
Hidden inputs provide a way to pass data to the server without displaying it to users. Hidden inputs are typically used for tracking codes, keys, or other information not pertinent to the users but helpful to the website overall. This information is not displayed on the page, however it could be seen by viewing the source code of a page. That said, it should not be used for sensitive or secure information.
To create a hidden input you use the
hidden value for the type attribute. Additionally, you pass along the appropriatename and value.
<input type="hidden" name="tracking_code" value="abc_123">
File Input
To allow users to add a file to a form, much like that of attaching a file to an email, the
file value for the type attribute is used. The file input is most commonly seen to upload pictures or files to social networks or applications.
Unfortunately, stylizing the file input is a tough task with CSS. Each browser has its own default rendering of how the input should look and doesn’t provide much control to override the default styling. JavaScript and other solutions can be built to allow for file input, but they are slightly more difficult to construct.
<input type="file" name="file">
File Input Demo
Organizing Form Elements
Knowing how to capture data with inputs is half the battle. Organizing form elements and controls into a usable manner is the other half. Forms are not worth much unless users understand what is asked of them and how to provide the requested information. Using labels, fieldsets, and legends we can better organize forms and guide users to completing the end task.
Label
Labels provide captions, or headings, for form elements. Created using the
label element, labels should include descriptive text, of which describes the input or control it pertains to. Labels should include a for attribute. The value of the for attribute should be the same as the value of the id attribute included within the form element the labelcorresponds to. Matching up the for and id values ties the two elements together, allowing users to click on the labelto get focused within the proper form element.
<label for="username">Username</label><input type="text" name="username" id="username">
Label Demo
When using labels with radio buttons or checkboxes the
input element can be wrapped within the label element. Doing so allows omission of the for and id attributes.
<label><input type="radio" name="day" value="Friday" checked> Friday</label><label><input type="radio" name="day" value="Saturday"> Saturday</label><label><input type="radio" name="day" value="Sunday"> Sunday</label>
