Form at HTML

FORM

Form in html is most important part that provide the attraction between a user and a server, Form elements are elements that allow the user to enter information (like Name, Address, phone No. email address, age, comments, city, country etc. by using input fields, text area, drop-down menus, radio buttons, checkboxes, etc.) It is shown on webpage and there is connectivity between the server and client.

Basic Tag

<form> 1       <input> 2       <input> </form>

Input

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

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

it looks in a browser:

 

                                  First name:
                                  Last name:

Note

• form itself is not visible.
• the width of the text field is 20 characters by default. 

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>                 <input type="radio" name="gender">           Male                                                                                                                        <br>                  <input type="radio" name="gender" >        Female </form>

it looks in a browser:

 

Note

• only one option can be chosen.
• { it is necessary the name must be same in a same group like Male and Female, name is used “sex”, so if you have need more then one places of radio button use other group like Yes or No. use name “y” on both that will tell the browser that these are in a same group.}
• we can use more then one radio. Like agree, disagree, I don’t know. Here only one option can be chosen  by naming a same group.

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>                 <input type="checkbox" >                                                                             I have a bike                                                                                                               <br>                  <input type="checkbox" >                                                                              I have a car </form>

it looks in a browser:

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form> <b>Username:</b>               <input type="text" >                             <input type="submit" value="Submit"> </form>

How it looks in a browser:

                                               

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.

Password fields

<form > <b>Username:</b>               <input type="text" >     <br>               <b>Password</b>               <input type="Password" value="Password"> </form>

Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.

Simple drop-down box (a selectable list)

<form>            <b><i> Select of your Choice:-</i></b>                 <select name="Fruit">                                              <option >Mango                                              <option >Banana                                              <option >Strawberry                                              <option >Apple                  </select> </form>

 For pre selected option

<option value="option1">Mango                             <option value="option2">Banana                             <option value="option3 " selected= “selected”>Strawberry                             <option value="option4">Apple

Textarea (a multi-line text input field)

<form>                     <textarea>                    </textarea>               </form>

<form>                     <textarea name=”TA1” cols=”40” rows=”5”>                      This is text shown in the text area, with 40 columns and 5 rows                    </textarea>               </form>

Example :-

Method  “Get”  or  “Post”…..?

The method attributes specifies how the form should be submitted to the server, there are two standard options: Get and Post .

Primary difference between the two method is that get includes the form information as part of the URL in the address bar. This can be both advantages and disadvantages,

Get Method

• An advantage is that user can bookmark the results of the form submission because the book mark is saved with the entire URL, including form contents.

• Disadvantages is that many people find the form information ugly and distracting. Also, you might want to hide the from information from a user for security reason.

Post Method

The Post value for the Method attributes allow an unlimited amount of data to be sent to the server. If you do this sort of form submission, you will not see the form’s information in the address bar. Post method is useful with larger or more complex forms and with those in which you are trying to implement some level of security.