Form in HTML

Form in HTML

HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form:

<form method="post" name="frm1"> 
	<label>User Name</label>
	<input type="text" name="uname"/>
	<input type="submit" value="Submit"/>
</form>

Attributes of <form> element

1. action :- It defines the process to be performed when the form is submitted.

Ex:

<form action=“login_validate.php”>

2. target :- It specifies where to open result after submitting the form. It can have value:

• _self :- The result will be displayed in same tab. It is default value.
• _blank :- in new tab.
• _top :- in the entire browser window i.e. “breaks out of all frames”.
• _parent :- in the parent of the current frame.

Ex:

<form target=“_blank”>

3. method :- It specifies the HTTP method to be used when submitting the form data. It can have value:

• get :- It is default value. It is not secure method because the submitted form’s data will be visible in the address field of the browser.
• post :- We must use post method when form contains sensitive or personal information because it does not display the submitted form data in the address field of the browser. 

Ex:

<form method=“post”>

HTML Forms – Controls/Elements

The most important form element is the input element. The input element is used to select 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. The most used input types are described below.

<label> element

This element is used to define label or naming of form elements. It provide a usability improvement for mouse users i.e. if a users clicks on the text within the <label> element, it toggles the control associated with it.

Text Fields

<input type="text" /> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

Password Field

<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>

Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="sex" value="male" />
Male<br /><input type="radio" name="sex" value="female" /> Female
</form>

Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

Submit Button

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get"> 
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Textarea

Textarea: How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.

<textarea> text</textarea>

Attribute of <textarea> tag:

• Rows to set the how many no. of rows display
• Cols to set the how many no. of column display

Example:

<textarea rows=”6” cols=”20”></textarea>