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>


Programs

Create a webpage divide the webpage into six frames In one frame create five links that will display different HTML forms in the remaining five frames respectively

View Solution


Write a HTML program to create a form for the subscription of a magazine

View Solution


html table for Indian Tourist Spots

View Solution


Create html web page for Gateway of India

View Solution


Create a page with two frames using HTML

View Solution


CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad Sarkari Exam Quiz