HTML Forms

<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
	<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
		<label>Name:
			<input name="name" maxlength="90">
		</label>
		<input type="submit" value="Submit">
	</form>
</body>
</html>

Above is an example of an HTML form. Forms allow you to add interactivity to your HTML documents. In this example, the user can enter their name into the form. When they submit the form, a server-side script is called which processes the form.

Forms are declared using the <form> element. This element is invisible to the user, but it is used to encapsulate any form elements that are part of the form.

Form associated elements are elements that can be associated with a form (i.e. the form owner). Form associated elements include input fields, checkboxes, radio buttons, submit buttons, textareas etc.

Here's an example of a <textarea> element. This element allows the user to enter multiple lines of text (as opposed to the <input> element above, which only allows for a single line of text).

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
	<label>Comments:
		<textarea name="comments" cols="50" rows="5" maxlength="200"></textarea>
	</label>
	<input type="submit" value="Submit">
</form>

Below is an example some more form associated elements within a form. These include the <fieldset> and <legend> tags which we can use to group related elements and provide a title for them. We also use different values for the type attribute on the <input> element which results in different control types appearing. In this case we've added checkboxes and radio buttons to our text input field.

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
	<label>Name:
		<input type="text" name="name" value="" maxlength="90">
	</label>
	<fieldset>
	<legend>Lunch</legend>
		<label><input type="radio" name="lunch" value="pad-thai"> Pad Thai</label>
		<label><input type="radio" name="lunch" value="tom-yum"> Tom Yum</label>
		<label><input type="radio" name="lunch" value="green-curry"> Green Curry</label>
	<label>Not Spicy<input type="range" min="1" max="10" step="1" value="5" name="spiciness">Very Spicy</label>
	</fieldset>
	<fieldset>
	<legend>Extras</legend>
		<label><input type="checkbox" value="rice" name="rice"> Rice</label>
		<label><input type="checkbox" value="chilli" name="chilli"> Dried Chilli</label>
		<label><input type="checkbox" value="cucumber" name="cucumber"> Cucumber</label>
	</fieldset>
	<input type="submit" value="Submit">
</form>

Each element includes a name attribute. This can be used by a script when the form is submitted. If we didn't give each element a name, the script wouldn't know which elements were submitted, let alone what their values are. We include the value attribute to provide the value that the user selected.

When you submit the above form, the form contents are submitted to the URL listed under the action attribute. In this case, I have written a script that takes the form elements and displays their values. So, when you submit the form, you'll see a list of element names, followed by their respective values.

In the case of checkboxes, you'll only see the element name/value if it has been selected. If it hasn't been selected, it won't be available for the script. This is how checkboxes work. Other elements pass on the element's name whether it's been selected/completed or not. For example, if you leave the Name field blank, you'll still see that element name when you submit the form, but you won't see any value next to it.

Form Validation

Most forms on the web include some sort of validation to ensure that the user has completed the form correctly. Users can make mistakes, and form validation can help alert them to any mistakes they may have made when completing the form.

Form validation can be an important security precaution too. Without good form validation, hackers could easily make a mess of things by submitting malicious data into a form field (particularly text fields).

HTML allows for some basic form validation. It achieves this via attributes. In fact, you might have noticed that our Name input field includes maxlength="90". This ensures that the user doesn't type any more than 90 characters into the Name field. The assumption is that none of our visitors will have a name longer than 90 characters. However, we could change this number to whatever we feel is appropriate.

We could add some more validation to our form though. For example, we could add the required attribute to ensure that the user doesn't leave the field blank.

Required Fields

In the following example we've added required to both the Name input field and the radio buttons. Now, if you try to submit the form without completing those fields, the browser should display a message asking you to complete that field.

So go ahead and click Submit without completing any fields, and see how the browser responds. Different browsers may respond in slightly different ways, but any modern browser should prevent you from submitting the form until you've completed all required fields.

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
	<div>
	<label for="name">Name:</label>
	<input type="text" name="name" value="" maxlength="90" required>
	</div>
	<div>
	<label for="color">Pick a color:</label>
	<input type="radio" name="color" value="red" required> Red
	<input type="radio" name="color" value="green" required> Green
	<input type="radio" name="color" value="blue" required> Blue
	</div>
	<div>
	<input type="submit" value="Submit">
	</div>
</form>

There are other HTML attributes that can provide validation, such as the type, range, pattern attributes.

The `type` Attribute

The <input> field's type attribute can be used to ensure the correct data type is entered, and in the correct format. In fact, that's what we used in some of the above examples.

Here are more values that can be used with the type attribute.

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
	<label>Email:
		<input type="email" name="email">
	</label>
	<label>Phone:
		<input type="tel" name="phone">
	</label>
	<label>Time:
		<input type="time" name="time" min="7:00" max="23:00" step="900">
	</label>
	<label>Number:
		<input type="number" name="number" min="10" max="150">
	</label>	
	<label>Password:
		<input type="password" name="password">
	</label>		
	<label>Date:
		<input type="date" name="date">
	</label>
	<label>Datetime Local:
		<input type="datetime-local" name="datetime-local">
	</label>
	<label>Search:
		<input type="search" name="search">
	</label>
	<label>URL:
		<input type="url" name="URL">
	</label>	
	<label>Range:
		<input type="range" name="range" min="1" max="100" step="10">
	</label>
	<label>Color:
		<input type="color" name="color">
	</label>
	<input type="submit" value="Submit">
</form>
<style scoped>
label {display:block;}
</style>

JavaScript & Server-Side Validation

Many websites include several layers of form validation. You can start with HTML validation (as demonstrated here), but that will only take you so far.

You can also include JavaScript validation, which can enable you to be more specific with your validation. Like HTML, JavaScript can run client-side (i.e. from within the browser, not on the server) so the validation is usually extremely quick and responsive.

Your form handler script should also validate the data once it has been submitted to the server. This is called server-side validation (because it runs on the server). Server-side validation is normally run once the whole form has been completed and submitted. However, it is also possible to run server-side code before the form is submitted (i.e. as the user completes each field). This is often called real-time validation or instant validation.

Server-side validation can be a bit slower than client-side, as it requires a request to be sent to the server, then back to the client/user. However, server-side validation is your best defence against hackers, as it is possible for hackers to bypass your form (i.e. bypass your client-side validation), and call the form handler script directly. For example, they could create their own form then submit it to your form handler. They could also create a URL that contains field names and values that match yours, then send that link as part of a phishing email scam. This is why good, server-side validation is important.

It's beyond the scope of this HTML tutorial to do server-side scripts and validation. However, if you're interested, check out this form to email script and scroll down to The "Send Mail" Script (which is called send_mail.php). This is an example of a form handler script (written in PHP) that contains some server-side validation.

HTML Forms

Form Validation

Required Fields

The type Attribute

JavaScript & Server-Side Validation

The `type` Attribute