Forms
Forms send data from the user to a server for processing. They allow the user to pass on a small or large amount of information in a controlled and standardised way.
Forms can be short like requesting the name and email address of a user or longer such as an online bank loan application.
All forms should be designed and written to be easy to understand, simple to complete and also give the user predictable feedback.
Simple Forms
Each form contains form elements. Each element has an information request <label> and an <input> area for the user to respond. More simply, the label is the question and the input is where user answers the question.
This example shows a basic contact form which has two input fields with labels and a submit button.
Note: this website applies CSS styling to the results area, so most form elements will render differently from the default views.
<form> <label for="name">Name</label> <input name="name" type="text"/> <label for="email">Email</label> <input name="email" type="email"/> <input type="submit"/> </form>Form
Form defines a group of form elements and how information inputted from the form elements is transferred to a server.
The <form> tag is used as a wrapper to define all the form elements nested inside as part of the form. Forms must be closed with the </form> end tag.
Label
The <label> is a text information request which is associated with a form input or control.
Each label should relate to the information being gathered, so <label> should be followed by for (which field does it belong to), followed by the Label text (what text appears above the label) and then the closing </label> tag.
<label for="input-field">Label text</label>Input
The <input> is where the user responds to a request for information.
The <input> element defines the form interaction area, inside this is are added the form attributes such as the type (control), name and value.
<input type="text">Input type
Forms inputs have a selection of controls for collecting and sending data. In HTML these define the input types as either text input, checkboxes, radio buttons, menus, file selection and buttons.
<input type="control-goes-here">A full list of input types can be found below.
Naming the input
The name attribute is used as a reference for the data collected in the input and it must be added for information to be passed to a server.
<input type="text" name="name-goes-here">More attributes
Additional attributes can be applied to define the input functionality. This includes autocomplete, autofocus, checked, disabled, placeholder, required and value.
For a complete list of attribute visit Mozilla.org
Form elements
So far we have looked at simple text forms, but HTML allows for many more ways to define how form elements function. Here are a few examples of the most common ones.
Placeholder
Placeholder text enables temporary information to be displayed in the input text field, this can provide additional instructions to help the user enter the correct type of content or format the content correctly.
<form>
<label>This is text field:</label>
<input name="your_name" type="text" placeholder="Enter your text" />
</form>Placeholders should never be used instead of labels as this can lead to the user being confused as information entered replaces the placeholder.
Password
Passwords included sensitive information and should be obscured. To define a password input we use <input type="password" /> this changes any text, number or symbol typed into an input field to either a * or • characters.
<form>
<label>Password:</label>
<input name="password" type="password" />
</form>Submit and Reset Buttons
Adding a button to a form requires the use of <input type="button">. This will add a clickable button to a form but if we want to reset inputted form data to its initial values or submit information from the form to a server we should use <input type="reset"> and <input type="submit">.
<form>Enter your text:
<input name="your_name" type="text" />
<input name="submit" type="reset" value="Reset" /> <input name="submit" type="submit" value="Submit" />
</form>The text displayed on the input button can be changing by altering the text in the value attribute.
Dropdown
Dropdown menus offer the user a list of options to select from.
The <select> element defines the input menu, <option> is used to define each choice in the list. Setting a list item to disabled will display the list item in a subdued way, usually grey and this list item will be unselectable.
<form><label for="options-list">A list of options:</label><select name="options-list"><option disabled="disabled" selected="selected" value="options">Select an option</option><option value="options">Option 1</option><option value="options">Option 2</option><option value="options">Option 3</option></select></form>Additional settings include selected for pre-selecting an option, size to display more than one item, multiple for selecting more than one item from a list.
Radio buttons
Radio buttons are used to define an ‘on’ or ‘off’ option in a list of items.
To define a radio button control we use <input type="radio"> .
Labels are generally added after these radio choices and are defined using <label> These labels should be defined to each input type using the for="" attribute.
To display pre-selected radio buttons we use the checked attribute.
<form>
<label for="radio-buttons">Select Button:</label>
<input checked="checked" name="radio" type="radio" value="one" /><label for="radio-one"> Option 1 </label>
<input name="radio" type="radio" value="two" /><label for="radio-two"> Option 2 </label>
<input name="radio" type="radio" value="three" /><label for="radio-three"> Option 3 </label>
</form>Checkbox
Checkboxes allow for one or more listed items to be selected. By default these are displayed as square boxes which use checks to indicate a selection.
To define a checkbox the <input type="checkbox"> is used.
Checkboxes can be pre-selected using the checked attribute.
<form>
<label for="checkbox">Pick an option</label>
<input name="checkbox" type="checkbox" value="One" /> <label for="check-one"> Option 1 </label>
<input name="checkbox" type="checkbox" value="Two" /> <label for="check-two"> Option 2 </label>
</form>Text Area
Text area is expandable text input element. <textarea> allows the user to add text in a multi-line text input area. The intial size of this area can be defined using row and col attributes. The rows attribute specifies the visible number of lines in a text area and cols specifies the width of a text area.
<form>
<textarea name="message" rows="6" cols="20"> Type your message
</textarea>
</form>Date
The date input type allows the user to define a specific date, this can display a date picker by default depending on the browser used.
To define a date input we use <input type="date">.
<form>Enter date:
<input name="your_name" type="date" />
</form>Attaching files
To select files to be uploaded and submitted with a form input type type="file" is used. This creates a default button and text, which appears unstyled in this css. Please note the default look of this button varies between browsers.
<form>
<label>Select a file to upload:</label>
<input name="selectedfile" type="file" />
</form>
Range Input
The <input type="range" allows the user to specify a numeric value typically displayed with a slider or dial control. Default range for a slider is 0 to 100, numbers and steps can be adjusted using min, max and step attribute.
<form>
<label>Select range:</label>
<input name="range" type="range" min="0" max="10" step="1"/>
</form>
Fieldset
To define a group of several related labels and controls we use the <fieldset> tag. This is used to wraps the group of form elements and must always appears inside the <form> </form> tags. Form elements inside the <fieldset> element are displayed within a grouped area as shown below.
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<input id="option1" checked="checked" name="contact" type="radio" value="email" /><label for="option1">Email</label>
<input id="option2" name="contact" type="radio" value="phone" /><label for="option2">Phone</label>
<input id="option3" name="contact" type="radio" value="mail" /><label for="option3">Mail</label>
<button type="submit">Submit</button>
</fieldset>
</form>
List of input types (controls)
This list below shows the available input types <input type="">, for example <input type="button"> which add a clickable button to a form.
| button | A clickable button | |
| checkbox | Checkbox with selected or deselected option | |
| color | A control to specify colour | |
| date | Control for entering a date | |
| datetime-local | Control for entering local date and time | |
| Field for adding an email address | ||
| file | Control to let the user select a file | |
| hidden | A control to place a hidden value submitted with the form | |
| image | A graphical submit button | |
| month | Control for entering a month and year | |
| number | Control for entering a number | |
| password | Text field with characters obscured. | |
| radio | Radio buttons for selecting a single value or multiple choices | |
| range | Control for entering a number whose exact value is not important | |
| reset | Button to reset the form to default values | |
| search | Text field for entering search strings | |
| submit | Button to submit the form | |
| tel | Control for entering a telephone number | |
| text | Single line text field. Line breaks are automatically removed | |
| time | Control for entering a time value | |
| url | Field for entering a URL | |
| week | Control for entering week number | |
Sending forms
Form use action attribute to define where information in the form inputs should be sent once it has been submitted and the method by which the information should be sent.
<form action="/filename.php" method="POST">
For example, in the above code, the information collected from the form will be sent to a PHP document called filename.php using the POST method.
POST and GET are the two method types POST is used for sensitive information and GET is used for none sensitive information.
When using the POST method information in the from can be encyrpted using enctype="value" attribute, the value of encryption can be set application/x-www-form-urlencoded (default), multipart/form-data or text/plain. Forms with <input type=""> should use multipart/form-data .
<form action="/filename.php" method="POST" enctype="multipart/form-data">
For a more detailed explanation visit Mozilla.org
Next step
HTML – 7 – Divs, Spans, Classes, Ids