What is HTML Form

Forms can be used to send data across the web and are often used as contact form to convert information input by a user into Leads.
HTML forms are used to pass data to the server.
The common elements used in the actual HTML form are form tag, input, textarea,, select, and label.
Form Tag defines the form and within this tag, there is action attribute which tells the form where its contents will be sent to when it is submitted.
An HTML form can contain input elements like text fields, checkbox, radio buttons, submit button and more. A form can also contain select list, textarea, fieldset, legend, and label elements.

Create HTML Form


<form action="" >
	/*Content*/
</form>

Form inside fieldset with legend

Form can also be placed inside fieldset tag. Fieldset tag is used to group form. We can also use legend tag inside fieldset.

Enquiry Form


<fieldset>		
<legend> Enquiry Form</legend>		
<form action="" >
	<input type="text">
</form>
</fieldset>

Fieldset with disable

Fieldset also supports disable attribute. By adding disable attribute, all form controls including submit button are disabled. Thus user cannot fill and submit form data.

Enquiry Form


<fieldset disable>		
<legend> Enquiry Form</legend>		
<form action="" >
	<input type="text">
</form>
</fieldset>

Input Element

The most important form element is the input element.
The input element is used to get user information.
An input element can vary in many ways, depending on the type attribute.
An input element can be of type text field, checkbox,password, radio button, submit button, and more.


Attributes in input element

Attribute Name values Use
type text, password, radio, checkbox, file, button, submit, and reset type defines type of input control.
size default value is 20 change size of input control
tabindex any numeric value used to define a sequence followed by user when he navigate using Tab key
value any possible value set a default value of input control
maxlength n digits set maximum characters length
disabled "" disabled input control, or fieldset tag
checked "" choose checkbox and radio button

Input Type Text

Input type text <input type="text"> is the common input for words, numbers and symbols.
Label is used to write the content just before text field. To Specify particular label, the value of for attribute inside label should match the id value of input.

HTML Input tag


<form>
<label for="fname">First Name:<input type="text" id="fname" </label> >
<label for="lname">Last Name:<input type="text" id="lname" </label> >
</form>

(How a Text field Looks like on browser)



Input Type Text with value




<form>
<label for="fname">First Name:</label> <input type="text" value="First Name" id="fname" >
<label for="lname">Last Name:</label><input type="text" value="Last Name" id="lname" >
</form>

Input Type Text with maxlength


maxlength attribute is used to restrict no of characters in a text field.

Input with maxlength


<form>
<label for="fname">First Name:</label><input type="text" id="fname" maxlength="10">
<label for="lname">Last Name:</label><input type="text" id="lname" maxlength="10">
</form>

(How a Text field Looks like on browser)



Input type Password

The input type password is used to write passwords. But the password is written in encrypt form. i.e. we cannot copy or cut password data.

(How to create a Password field)


<form>
<label for="pwd">Password:</label><input type="password" id="pwd" >
</form>

(How a Password field Looks like on browser)



Radio Buttons

Radio Buttons are used to choose a single element among a group.
To allow window to choose a single radio, use name attribute with same value on both radio inputs.

Create Radio Button group


<form>
<input type="radio" name="gender" value="male" id="m"> <label for="m">Male</label>
<input type="radio" name="gender" value="female" id="f"> <label for="m">Female</label>
</form>

(How Radio Buttons Look like on browser)




Checkbox

Checkbox are used to select multiple selections unlike radio button.

HTML Checkbox


<form>
<label <input type="checkbox" name="vehicle" value="bike"> :Bike</label>
<label <input type="checkbox" name="vehicle" value="car"> :Car</label>
</form>

(How Check Boxes Look like on browser)




Select Dropdown list

select or select dropdown is used to fetch single or multiple field among listed options

Html Select tag


	<form>
		<label for="city">Current City:</label>
		<select id="city">
			<option>--Select City--</option>
			<option>New Delhi</option>
			<option>Kolkata</option>
			<option>Mumbai</option>
			<option>Chennai</option>
		</select>
	</form>

(How Select Looks like on browser)


Select with Optgroup

Select with multiple Optgroup


<form>
	<label for="city">Current City:</label>
	<select id="city">
		<optgroup label="Metros">
			<option>--Select City--</option>
			<option>New Delhi</option>
			<option>Kolkata</option>
			<option>Mumbai</option>
			<option>Chennai</option>
			</optgroup>
		<optgroup label="Others">
			<option>Noida</option>
			<option>Gurgaon</option>
			<option>Faridabad</option>
			<option>Gaziabad</option>					
		</optgroup>
	</select>
</form>

Select with multiple options

Select with multiple Optgroup


<form>
	<label for="city">Current City:</label>
	<select multiple id="city">
		<optgroup label="Metros">
			<option>--Select City--</option>
			<option>New Delhi</option>
			<option>Kolkata</option>
			<option>Mumbai</option>
			<option>Chennai</option>
			</optgroup>
		<optgroup label="Others">
			<option>Noida</option>
			<option>Gurgaon</option>
			<option>Faridabad</option>
			<option>Gaziabad</option>					
		</optgroup>
	</select>
</form>
Press Ctrl for multi selection.

Choose Date Of Birth using SELECT


<form>
<p>DOB</p>
<select>
<option>1990</option><option>1991</option><option>1992</option><option>1993</option>
<option>1994</option><option>1995</option>
</select>
<select>
<option>JAN</option><option>FEB</option><option>MAR</option><option>APR</option><option>MAY</option><option>JUN</option>
<option>JUL</option><option>AUG</option><option>SEP</option><option>OCT</option><option>NOV</option><option>DEC</option>
</select>
<select>
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option>
<option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>
<option>31</option>
</select>
</form>

Date Of Birth


Select:



Textarea

Textarea is used to write multiple line. Like query, address, comments, reviews etc.

(How to create a Query field)


		
<form>
<textarea name="textarea" cols="50" rows="5"></textarea>
</form>

(How a Query field Looks like on browser)


Submit Button

Submit Button or input type submit is used to send information from user to web server. Submit button can be used only once in a form tag.

Create Submit Button


<form>
<input type="submit" value="submit" action="techaltum.asp" method="get"/>
</form>

(How a Submit field Looks like on browser)


Reset Button

Reset Button or input type reset is used to reload form data, without refreshing webpage. Reset is also used once in a form tag.

Create reset Button


<form>
<input type="text">
<input type="reset" >
</form>

(How a Submit field Looks like on browser)


Html5 Form

These form controls are HTML4 Based. To learn HTML5 based Form controls and attributes, click here HTML5 Form