Forms in HTML


HTML forms are that part of a web page that allow to exchange the information between the user and a website .There by ,helping in greating the interactive environment ,using visiting a particular website. The information from the user and either processed or started for later use. In html form is created by using the form element.

                                <Form>

input element

</Form>

 The form are used to get information to the user .A form is define with <form> tag and </form> tag. Using forms we can design a web page on which a user can communicate his/ her wish. The form element provides various control such as a push button ,text filed, checkbox etc.

Through which the information is provided from element may contain text and other html element likes table etc.There are various attributes of form element.

  1. Action attributes
  2. Method attributes
  3. Enctype attributes

1 Action attributes Form has one required attribute, action specifying the URL of a CGI script, which process the form and sends back feedback ,when the user clicks on the ‘submit’ button, the content of the form is send to the sever. The action attribute inform the browser the location of the server program to which the form input has to be submit.

  1. Method:- it has two values

Method =”get”

Method =”post”

These two values refers to the standard HTTP method that define how data will be passed on to web server.

(i) Get method :- It is default method used by browser for submitting the data ,Requesting a URL to retrieve  the HTML document from a web server. This send the form information include the URL.It send the information to the server in one step by using it, information is not secure (as it can be seen in URL). e.g.

< form method=”GET”>

(ii) Post Method:-This sends the form information in the HTTP environment. is small more secure, That reader can not see it directly. It sends the data into two steps First the browser contacts the server and after the contact is made, it send the information. It is best used when you have a lot of information to passes e.g.

<form method=”post “>

(iii)Enctype:- This attribute is used to inform the server the way to handle the encryption process. It determine how the form data is encoded .Whenever data transmitted from one place to another, there needs to be an agreed upon means of representing the data.e.g.

<form action =”fom.html” method =”get” enctype=”text/plain”>

 Elements which are used in the form are:-

1 .SelectionListbox

2. Input box

3. Password

4. Text field

5. Text area

6. Checkbox

7. Radio Button

8. Button

1 .SelectionListbox:-

Selection list present a list of option to the user .User can select option of his choice from the list<selection > tag has three attribute:

1. Name   2. Size    3. Multiple

<HTML>

<Body>

<Center>

<br><br>

<select name=” name box”>

<Option>apple</Option>

<Option>mango</Option>

<Option>orange</Option>

<Option>banana</Option>

</select></center></Body>

</HTML>

2. Input box :-   User use the input box to enter the information. user can use any of following

1. Text field

Text field is used to enter the input from user

<input type =”text” name=”A”>

2.Radiobutton:- is used to choose  only one option

<input type =”Radio” name=”A”>

3. Checkbox:- is used to choose multiple option

<input type =”Checkbox” name=”A”>

4. Button: is used to submit any input.

<input type =”Submit” value=”O.K.” name=”A”>

5.Password Fields

HTML password fields are designed to capture user input, but disguise each character with an asterisk (*) instead of displaying the entered digits. They offer a user on-screen privacy while he or she is entering a password.Password fields are placed on a website using the <input> tag and specify a value of “password” for the type attribute.

Example

<form name="Form1” method="post">
Password: <input type="password" title="Please Enter Your Password" size="7" /><br />
<input type="submit" value="SUBMIT" />
</form>
OUTPUT:

 

 

 

 

 

 

 

 

 

6.Text area

Text areas are text fields that can span several lines.Unlike most other form fields, text areas are not defined with an <input> tag.Instead you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want the area to end.Everything written between these tags will be presented in the text area box. The <text area> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font.e.g

<textarea name="myFirstTextArea" cols="10" rows="10">
Please limit your response to 100 characters.
 </textarea><br />
<textarea name="myFirstTextArea" cols="30" rows="2">
Please limit your response to 200 characters.
</textarea><br />
<textarea name="myFirstTextArea" cols="40" rows="5">
Please limit your response to 500 characters.
</textarea><br />
OUTPUT:

Comments are closed.