Forms
If you have registered for ANYTHING online, you have signed up using a form. Forms allow us to sign up to things, leave feedback or reviews, or post comments on a thread.
At Higher, your form must only work visually. It does not need to submit any data.
Form Elements
Every part of a form is an ‘element’ and a single form can be made up of a variety of elements of ‘elements’. At Higher, there are four elements that you must know about and be able to add to a website.
- Labels – Add text before an element.
- Inputs – Allows a user to enter a variety of data into a form.
- Text Areas – Allows a user to enter a large amount of text into a form.
- Selects – Allows a user to choose a single option or multiple options from a list.
Getting Started
Every form requires a <form> tag to declare a form. All form elements will be added between these two form tags.
<form>
<!-- All Form elements will be added here -->
</form>
A page can have multiple forms, as long as they are seperated by different <form> tags.
Labels
Labels are the text before or after an element. Labels let the user know what data they need to enter.
<form>
<label>Name:</label>
</form>
Inputs
Inputs are the main element usedwithin forms and as the namesuggests, allows for users to ‘input’data including:
- Text
- Numbers
- Address
- Dates
The format for an input is the same each time. Within type, we enter the type of data that element will recieve. Additional properties can be added to make the element better.
<form>
<label>Name: <input type="text"></label>
<label>Age: <input type="number"></label>
<label>Address: <input type="address"></label>
<label>Date: <input type="date"></label>
</form>
Radio Inputs
Radio inputs allow users to select from a number of different options. In this scenario, the user can pick either Red, Blue, or Green. If the user changes their answer, the original answer is unticked.
Each input must have the same ‘name’ property to make them a part of the same group.
Each input must also have a ‘value’.
<form>
<label><input type="radio" name="colour-group" value="red">Red</label>
<label><input type="radio" name="colour-group" value="blue">Blue</label>
<label><input type="radio" name="colour-group" value="green">Green</label>
</form>
Submit Input
Submit buttons will check the form and then ‘submit’ it to the server.
Submit buttons do not require a label, but instead, the text on the button can be changed by setting the ‘value’ property.
Every form requires a submit button.
<form>
<input type="submit" value="Click to Submit">
</form>
Select
Select, or more commonly known as a dropdown box, allows a user to select one item from a list of items.
<form>
<select name="colour">
<option value="red">Red</option>
<option value="red">Blue</option>
<option value="red">Green</option>
</select>
</form>
In this example, the select tag creates a list with a name. Inside the select tag is three options. Each option also has its own value.
The “multiple” property can be applied to the select tag which allows users to select more than one option.
<form>
<select name="colour" multiple>
<option value="red">Red</option>
<option value="red">Blue</option>
<option value="red">Green</option>
</select>
</form>