Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 3.3HTML forms

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.

Forms

Below is a sample form and the code used to generate it.





HTML
<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:

HTML
<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:

HTML
<!--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.

Email

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.

HTML
<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.

HTML
<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.

HTML
<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:

Google Chrome date selector
HTML
<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.

Time selector
HTML
<input type="time">
						

Input Buttons

There are two inputs that are buttons.

Button

HTML
<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:

HTML
<form action="test.php" method="post">
	<label>Name:
		<input type="text" name="name"><br>
	</label>
	<input type="submit" value="Submit">
</form>
						

Reset

HTML
<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.

HTML
<form>
	<label>Range:
		<input type="range" name="value" max="150">
	</label>
</form>
						

The current value is 50

File input

HTML
<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.

HTML
<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.

HTML
<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.

HTML
<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.

HTML
<form>
	<textarea name="textarea1">This is a text area</textarea>
</form>
						

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.

HTML
<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:

HTML
<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.

Feedback 👍
Comments are sent via email to me.