HTML Forms

Next Page Previous Page

An HTML form is a section of an HTML document and is used for interactive controls for sharing information on a web page.

HTML forms can be defined and implemented by using <form> tag.

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Form </title>
	</head>
	<body>
		<form>
			<!-- Some for data -->
		</form>
	</body>
</html>

 

The form tag acts as a container for different types of form elements. The following are the basic form elements.

 

Tags

Working

<input>

Input fields in the form.

<output>

Output field in the form.

<textarea>

The text area works as an advanced input field which is used in inserting more than one line. 

<button>

Button fields in the form.

<select>

Drop down selection field. 

<option>

It is an options list field in the form.

<optgroup>

It is a part of the <select> field, it is used to group data in select fields

<fieldset>

Groups related elements in the form.

<label>

Labels are used to define several elements.

Let’s see in how many ways we can use <labe> and other elements in HTML form by writing a program.

  • HTML Input fields
<!DOCTYPE html>
<html>
	<head>
		<title>HTML FORM </title>
	</head>
	<body>
		<form>
		
			<label for="formdata">These are input fields :</label>
			<br>
			<label for="firstname">Your First name:</label>
			<input type="text" id="firstname" name="firstname"><br><br>
			<label for="last name">Your Last name:</label>
			<input type="text" id="lastname" name="lastname"><br><br>
			<input type="button" value="Submit">

		</form>
	</body>
</html>

Text Area fields

<!DOCTYPE html>
<html>
	<head>
		<title>HTML FORM </title>
	</head>
	<body>
		<form>
		
			<label for="formdata">This is a TextArea:</label>
			<textarea id="formdata" name="formdata" rows="4" cols="50">
			Some Data
			</textarea>

			<input type="button" value="Submit">

		</form>
	</body>
</html>

 

Form Buttons

<!DOCTYPE html>
<html>
	<head>
		<title>HTML FORM </title>
	</head>
	<body>
			<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
				<label for="formdata">This is a button:</label>
				<input type="button" value="Submit">
			</form>
	</body>
</html>

Select list

<!DOCTYPE html>
<html>
	<head>
		<title>HTML FORM </title>
	</head>
	<body>
			<form >
				<label for="formdata">Choose an option 'select' tag :</label>
					<select name="form data" id="formdata">
					  <option value="1">Option 1</option>
					  <option value="2">Option 3</option>
					  <option value="3">Option 5</option>
					  <option value="4">Option 4</option>
					</select>
					<input type="button" value="Submit">
			</form>
	</body>
</html>

 

Next Page Previous Page

Treding Tutorial

Popular Tutorials

to Learn now