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.
Forms
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
The action
attribute is used to specify a page to
navigate and pass the information to.
The 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.
Method
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
the get
method will show these parameters in the URL.
Names
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
The 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.
The label
element binds text to another element by surrounding it:
<label><input type="radio" name="opt1" value="1"> Use default settings </label>
Input
The 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 type
attribute.
Text
The default for the input element is text. This implies that
the type
attribute is text, although it need not be
specified. However, for strictness it is advised that a type
is given.
Declaring a text input is defined below:
<!--Strict definition--> <input type="text"> <!--Non-strict definition--> <input>
Special types
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.
The email input validates an email address as the user types it, ensuring it has a valid structure. It checks for the @ character in particular. This is a particularly useful input type because it saves on writting a JavaScript function to perform this task. This is validated on the submission of the form and not when the user is inputting their information.
<input type="email">
Number
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.
<input type="number">
Telephone
The telephone input allows the input of telephone numbers. This ensures that input follows the structure of a valid telephone number.
<input type="tel">
Date
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:

<input type="date">
Time
An element similar to the date element. This will allow users to insert a time in the form of hours and minutes.

<input type="time">
Input Buttons
There are two inputs that are buttons.
Button
<input type="button" value="Button" onclick="alert('Test');">
The onclick
is a JavaScript function that specifies
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.
Submit
The submit type
works very differently to the
button 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>
Reset
<form> <label>Name: <input type="text" name="name" value="Jamie"><br> </label> <input type="reset" value="Reset values"> </form>
Further input types
Range input
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>
File input
<form enctype="multipart/form-data"> <label>File: <input type="file" name="file"> </label> </form>
Files can be uploaded using the file type
for the input
.
Take note of the fact that the form has enctype="multipart/form-data"
as well.
These files will need processing on the server.
Hidden inputs
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.
The following sample use some JavaScript, although the purpose of this sample is not to show the JavaScript but to show how hidden elements can be addressed.
<form> <input type="hidden" name="hidden" id="hidden" value="Hidden element"> <button onclick="getHidden();">Get value of hidden element</button> </form> <script type="text/javascript"> function getHidden(){ alert(document.getElementById('hidden').value); } </script>
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.
Checkboxes
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.
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 value
attribute
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>
Text areas
The textarea
is a totally different input. It's
structure is in no way similar to the input element. The textarea
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
as content.
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>
Selection lists
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
attribute 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.