webdevlinux - logo Web Dev Linux

HTML Forms

HTML Forms can be used to sent user-input-data to the server. There are numbers of form controls as text fields, checkboxes, select options, buttons etc..

HTML forms HTML form element

With HTML & CSS we only design the interface of the form. We use server-side languages as PHP, JSP, ASP to deal with the sent data and get a response from the server. We will see how to make a completed form with PHP in another lesson.

Try the below example to get a simple idea about HTML forms.

FILE : forms.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Forms</title>
</head>
<body>
<form>
	Your Name : <input><br>
	Your Nick Name : <input type="text"><br>
	Your Favorite Color : <input type="color"><br>
	Your Linux Knowledge : Low <input type="range"> High<br>
	Upload Your Photo : <input type="file"><br>
	<input type="submit"> <input type="reset">
</form>
</body>
</html>

Explanation

Take a look at the explanation of elements used in the example.

<form></form>
The form element represents a HTML form
<input>
The input element is a multipurpose element. This represents various input types depending on the type attribute.
<input type="text">
The input element with the type value text represents a single line text input field. Without a type attribute, the input element represents a single line input field. In another words, <input> = <input type="text">
<input type="color">
The input element with the type value color represents a color control.
<input type="range">
The input element with the type value range represents a range control.
<input type="file">
The input element with the type value file represents a file selector. We can use the multiple attribute to select multiple files. Ex : <input type="file" multiple>
<input type="reset">
The input element with the type value reset represents a form reset button. We use this button to reset fields of the form to their default values.
<input type="submit">
The input element with the type value submit represents a form submit button. We use this button to send form data to the server.

You will learn about other form controls and input types in the next chapters.