Part 3.3HTML forms
A form is a way of collecting information. In fact, a form could be the most crucial part of a website as it provides multiple ways of collecting information.
Like a paper form, for instance a survey or a contract, a HTML form has specific functionalities and inputs. This article will discuss these.
Below is a sample form and the code used to generate it.
<form action="" method="post"> <label>Name: </label><input name="t1" type="text"><br> <label>Favourite Colour: </label><input name="t2" type="color"><br> <label>Age: </label><input name="t3" type="number"><br> <label>Email: </label><input name="t4" type="email"><br> <label>Password: </label><input name="t5" type="password"><br> </form>
This form will likely display differently per browser, as a lot of the elements are not supported in all of the browsers.
action attribute is used to specify a page to
navigate and pass the information to.
action attribute should point to some page that
uses some server side language, such as PHP, to perform some tasks
on the information, such as inserting it into a MySQL database.
In order for a form action to occur, the form must have a way of submitting the form such as submit button.
The method attribute is used to specify the way that the form will submit the information to the page or script that the form is submitting to.
By using the
post method, the client will not see
what variables are being passed to the page when it is done, whereas
get method will show these parameters in the URL.
Elements in the form all need a
name attribute in order for their data to be passed to a server
side script. Giving this attribute to the element allows the script to then obtain the value
the user has given to the input or whatever.
label element is used alongside some other element to describe
that element. This is particularly useful for checkboxes or radio buttons because they are generally
quite small unless they have text attached to them.
label element binds text to another element by surrounding it:
<label><input type="radio" name="opt1" value="1"> Use default settings </label>
input element is perhaps the most used of all.
This is because it offers a wide variety of different options. Specifying
information about what type of input to receive is done through
The default for the input element is text. This implies that
type attribute is text, although it need not be
specified. However, for strictness it is advised that a
Declaring a text input is defined below:
<!--Strict definition--> <input type="text"> <!--Non-strict definition--> <input>
There are a range of special types that can be applied to an input element that in turn restrict the text that is inserted. In theory, these are all elements inherited from the basic text input element described before. This can be seen as an advantage because they appear in the same way. The vast majority of these types are being introduced with HTML5 and so not all browsers support these correctly.
A numeric value can be checked using an input that accepts only numeric values. By defining the type to accept only numeric values, the system will prevent characters from the alphabet and symbols.
The telephone input allows the input of telephone numbers. This ensures that input follows the structure of a valid telephone number.
A date input element will allow the selection of a date.
This element is very badly supported as of early 2014, but intends to be improved for cross browser support. The element's purpose is to make a single way of collecting a date from the user, as jQuery solutions are inadequate due to their lack of integrated support (albeit they are cross browser compatible).
A screenshot of its use in Google Chrome is pictured:
An element similar to the date element. This will allow users to insert a time in the form of hours and minutes.
There are two inputs that are buttons.
<input type="button" value="Button" onclick="alert('Test');">
what to do when clicked. The
input where the
type is equal to
button does not do anything
on its own, it must have some event handler attached to it.
type works very differently to the
type. The difference is that if this type of
button is given to an input and placed within a form element, the
button will act as the submit method for the form. Such an example
is shown below:
<form action="test.php" method="post"> <label>Name: <input type="text" name="name"><br> </label> <input type="submit" value="Submit"> </form>
<form> <label>Name: <input type="text" name="name" value="Jamie"><br> </label> <input type="reset" value="Reset values"> </form>
Further input types
Another way of obtaining an input, such as a number within a range is using the range input type.
<form> <label>Range: <input type="range" name="value" max="150"> </label> </form>
<form enctype="multipart/form-data"> <label>File: <input type="file" name="file"> </label> </form>
Files can be uploaded using the file
type for the
Take note of the fact that the form has
These files will need processing on the server.
Hidden inputs are input boxes that users cannot set the value for (unless they edit the HTML). Technically speaking, these are an unsecure way of storing temporary information, and so information can be passed around the pages quite easily, although certain information should not be passed this way such as a password.
Advanced input types
There are a collection of special input types. These types are used perhaps the most as they offer the end user the cleaniest and easiest ways of selecting information.
Check boxes are an interesting way of getting a Boolean (true or false) input. A check box can be seen as a switch.
<form> <label>Use advanced settings <input type="checkbox" name="adv"> </label> </form>
One of the most important features of the checkbox input type is that it works alone. If a second checkbox is required, it cannot be directly associated to the first checkbox without special code, unlike radio buttons.
A radio button is a standard way of choosing between multiple options.
It also provides a value, but it can be a range of different
values. Giving multiple radio button inputs the same name means
that they work as an array. Giving them a
means that they have different values.
<form> <label>Use advanced settings <input type="radio" name="opt1" value="2"></label><br/> <label>Use default settings <input type="radio" name="opt1" value="1"></label><br/> <label>Use basic settings <input type="radio" name="opt1" value="0"></label><br/> </form>
textarea is a totally different input. It's
structure is in no way similar to the input element. The
element is used to collect a larger amount of text than just a standard
text input field. In some ways, it can be seen as being a text editor
field somewhat similar to an application on a desktop PC such as
Notepad. It is not a rich text editor, so RTL/RTF are not allowed
Text areas can be useful for collecting information such as email content for instance in a contact form, but as with any input, verification and validation absolutely should be applied to the input to prevent attacks. One of the most notable features of the text area field over the input field is that it supports multiline by default. Not only that, but it convert the multiline to the correct format so that if it is stored in a database, the information can be retrieved including the line breaks.
One of the most important features is that unlike an input field, the textarea field is given a default value by simply inserting it between the opening and closing tags.
<form> <textarea name="textarea1">This is a text area</textarea> </form>
Drop down boxes
A drop down box or option box is one of the more advanced form inputs that exists to offer an alternative to radio buttons for multiple choice. As such, the option field allows the choice of an option from a list.
Drop down lists are limited in some ways, but when it comes to larger lists, such as a country selector, radio buttons struggle to compete. The following quotations are from this website here.
When drop-down lists grow larger than 15 options they become difficult to scan and navigate. Some users will have to start scrolling inside the drop-down list which is a slow and painful experience.
When drop-down lists have less than 7 options they suffer from a lack of up-front information. The user has to click in order to see the available options.
A drop down menu must be correctly implemented with at least
a required minimum and at most a maximum number of choices so that
it does not look bare or cluttered. According to the aforementioned
website, if a drop down list
has less than 7 options, consider
using radio buttons instead.
In web development, a drop down menu is referred to by it's tag name of select.
<form> <select name="age"> <option value="18">18 - 25</option> <option value="26">26 - 32</option> <option value="32">32+</option> </select> </form>
Further to dropdown lists, the
<select> element can
be used to create a selection list in which the user may choose multiple items.
Creating a 'selection list' is easy and very similar to that of the ordinary dropdown box, and allows the user to pick multiple items.
To change a select element from a standard dropdown to a list, simply add the
multiple to the tag:
<form> <select name="subjects" multiple> <option value="Business Education">Business Education</option> <option value="Computer Science">Computer Science</option> <option value="Egnlish">English</option> <option value="French">French</option> <option value="History">History</option> <option value="Mathematics">Mathematics</option> <option value="Modern Studies">Modern Studies</option> </select> </form>
Holding down the Control key on the keyboard allows the user to pick multiple individual options and holding down the shift key allows the user to pick multiple options at once.