codescracker


html

HTML Forms



« Previous Tutorial Next Tutorial »


Here you will learn all about HTML form handling with examples. HTML form provides user interaction with websites.

Sometimes, you need to develop a website that require user interaction. For example, you need to develop a railway website that allows users to check the arrival or departure status of trains on the Internet. This website uses a registration or login form to collect the user information and submits the information to the server for further processing. These types of forms provides the medium of interaction between a website and its users on the Internet.

A form is an area of a Web page that allows the users to provide their information in a variety of ways, such as by entering the text field or by selecting one or more available options from the provided list.

HTML enables you to add a form in a Web page by using the FORM tag. After adding the form on the Web page, you can add various controls, such as buttons and text fields, on the form by using a variety of tags. Some examples of these elements are INPUT, BUTTON, TEXTAREA, and DATALIST.

The INPUT tag allows you to enter different types of values, such as date, time, and e-mail address. The BUTTON tag enables you to add buttons, such as submit and cancel buttons on the form to submit or cancel form's detail. The TEXTAREA tag enables you to enter text in the provided area. The DATALIST tag allows you to enter the text in a text field by providing a set of predefined values.

You will learn all about form handling in separate tutorials:

HTML Form Examples

Here are some examples on form handling in HTML.

HTML Form Example 1

Here is an example on HTML forms:

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

starting of form
<form>
	form
</form>
ending of form

</body>
</html>

Here is the output of the above HTML form example:

html forms

Here is the live demo output produced by the above HTML form example code.

starting of form
form
ending of form

HTML Form Example 2

Here is another HTML form example.

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

<form>
	Enter Name: <input>
</form>

</body>
</html>

Here is the output of the above HTML form example:

html form

Below is the live demo output of the above example on HTML form.

Enter Name:

HTML Form Example 3

Following is one more example on HTML form:

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

<form>
	Enter Name: <input type="text" name="name">
</form>

</body>
</html>

Here is the output of the above HTML form example:

form handling html

Here is the live demo output of the above form handling example in HTML:

Enter Name:

HTML Form Example 4

Below is one more form handling example in HTML:

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

<form>
	Enter 2 Digit Code Number: <input type="text" name="code" size="2" maxlength="2">
</form>

</body>
</html>

The above HTML form handling example code will produce the following output:

html form tutorial

Here is the live demo output of above form handling example code.

Enter 2 Digit Code Number:

HTML Form Example 5

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

<form>
	Enter Password: <input type="password">
</form>

</body>
</html>

This is the output of the above HTML form example:

html forms tutorial

Here is the demo output of above form example code.

Enter Password:

HTML Form Example 6

Let's take another example on form handling.

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

<form>
	Enter Password: <input type="password" name="passw" size="12" maxlength="12">
</form>

</body>
</html>

The above form handling example code will produce the following output:

form example html

Below is the demo output produced by the above HTML form example:

Enter Password:

HTML Form Example 7

Below is one more example on form handling.

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

<form>
	Enter Name: <input type="text" id="name" /><br/>
	<input type="hidden" id="country" value="codescracker.com" /><br/>
	<input type="submit" onclick="alert('Hello ' + 
	document.getElementById('name').value + ', Welcome to ' + 
	document.getElementById('country').value)" value="Submit">
</form>

</body>
</html>

Here is the output of the above HTML form example:

html form example

Now, enter your name. Here i am going to enter the name, Deepak. After entering the name, press ENTER key or click on Submit button. Then you will watch the following output:

html form handling

Here is the live demo output of above form example code in HTML:

Enter Name:

HTML Form Example 8

Following is another example on form handling in HTML.

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Form Example</title>
</head>
<body>

<form>
	<fieldset>
		<legend>Login Panel</legend>
		<label>
			Username: <input type="text">
		</label>
		<br/>
		<label>
			Password: <input type="password">
		</label>
		<br/>
		<label>
			<input type="submit" name="submit" value="LogIn">
		</label>
	</fieldset>
</form>

</body>
</html>

Below is the output produced by the above example on form handling in HTML:

form html

Here is the live demo output of above form example code.

Login Panel


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test