TutorialLab
html form

HTML Form

HTML Form:

HTML Form are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax:

<form>
Form Element Like text,radio,checkbox,textarea etc.
</form>

Form Attribute:

Apart from common attributes, following is a list of the most frequently used form attributes:

AttributesDescription
actionBackend script ready to process your passed data.
methodMethod to be used to upload data. The most frequently used are GET and POST methods.
enctypemutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc.

HTML Forms Controls

There are different types of form controls that you can use to collect data using HTML form:

  • Text Input Controls
  • Checkboxes Controls
  • Radio Box Controls
  • Select Box Controls
  • File Select boxes
  • Hidden Controls
  • Clickable Buttons
  • Submit and Reset Button

Input Field Attributes

Following is the list of attributes for <input> tag for creating text field.

AttributesDescription
typeIndicates the type of input control and for text input control it will be set to text.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
valueThis can be used to provide an initial value inside the control.
sizeAllows to specify the width of the text-input control in terms of characters.
maxlength Allows to specify the maximum number of characters a user can enter into the text box.

 

This is Complete form Example Copy the Code and paste it into your web page then check the result if any question then ask from me.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Form</title>
	</head>
<body>
	<h2>HTML Form</h2>
	<form method="" action="" enctype="multipart/form-data">
		<p>
			<label>Name</label>
			<input type="text">
		</p>
		<p>
			<label>Password</label>
			<input type="password">
		</p>
		<p>
			<label>Date of Borth</label>
			<input type="date">
		</p>
		<p>
			<label>Email</label>
			<input type="email">
		</p>
		<p>
			<label>Choose Color</label>
			<input type="color">
		</p>
		<p>
			<label>Gender</label>
			<input type="radio" name="gender">Male
			<input type="radio" name="gender">Female
		</p>
		<p>
			<label>Courses</label>
			<input type="checkbox">Maths
			<input type="checkbox">Eng
			<input type="checkbox">Urdu
			<input type="checkbox">Biology
		</p>
		<p>
			<label>Upload Image</label>
			<input type="file">
		</p>
		<p>
			<label>Country</label>
			<select>
				<option>Choose Country</option>
				<option>Pakistan</option>
				<option>UAE</option>
				<option>China</option>
				<option>Canada</option>
			</select>
		</p>
		<p>
			<label>Your Message</label><br>
			<textarea rows="10" cols="60"></textarea>
		</p>
		<p>
			<input type="submit" value="Create Account">
			<input type="reset" value="Clear Form">
		</p>
	</form>
</body>
</html>

Previous Lecture Next Lecture

Aizaz Ali

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.