Explain about Forms in HTML .

Form is a blank sheet that can have different types of fields (or) elements (text field password field, radio button and check boxes etc). This elements allow the uses to enter some information form data can be written into other files (.text,.jsp) and submitted to the data base.

Thus forms are used as an effective communication between uses and web container
Usually forms are created by inserting <form>- - - - - -</form > in the html code.

Attributes of Form:

Name: It specifies name of the form.

Action: It represents the URL of another file i.e., whenever the user clicks the submit button. The current data gets directed to the program whose path is supplied as URL for further processing.

Method: It represents how the data will be submitted to the server, this attribute has two values ‘get’ (or) ‘post’. If get is used then the data from the current page is seen on the address bar of the web browser. Hence it doesn’t retain privacy. On the other hand using post causes transmission of data from the current html form to the server along with body of request in encrypted form.

If the method attribute is not declared then ‘get’ method will be considered as default.

< form Name = “stu” action = “ xxx. Jsp” method = “ get”>

< Input > tag: It creates form fields. It is empty tag because it always depends on attributes.

Attributes of Input:

Type: It represents one type of field from limited form filed.

Name: It represents name of the field in which input data will be stored.

Value: It produces same text that will act in different ways based on different kinds of fields.

< input type field = “ text “ name = “ “ value = “ “ >

Fields:

Text: Text fields are a small text area that allows the user to enter any type of data up to maximum length.

If you set some value, that string will be used as the default value.It will support a single line of text.

Attributes:

Size: It sets width of the field. By default the user allows to visible the last 20 characters in the text field.

Maximum length: It specifies the number of characters that the text field can have.

Syntax:

Name < input type = “text” name = “sname” Value = “ “ size = “10“ maxlength = “ 30 “ >.

Password: It was exactly like text but the input is not displayed on the screen instead each character is replaced b ‘*’ symbol.

Name :  <input type = “password” name = “sname” value = “ “>.

Radio button: It creates the radio button these are always grouped buttons within group should have same name but different values. Radio buttons allows the user to select one option form the list of limited options.

Checked attribute: If we include this attribute one default option will be selected from the list of options.

Syntax: <input type = “ Radio” name = “ “ value = “ “ checked = “ checked” >

Check box: It provides a simple check box. This field allows the user to select more than one option from the list of choices. In check boxes unlike radio buttons we are giving different names to each field.

Syntax: <input type = “checkbox” name = “ “ value = “ “>

Creating combo box (drop down list): Combo box allows the user to select one option from multiple choices by default the browser allows you to select one option like radio button. But if you want there is an option to select more than one value like checkbox.

Attributes:

           Size: It is used to increase the visibility size of options, by default 1.

       Multiple: For selecting more than one option from the combo box this attribute will be used. We can select more options using ‘ctrl’ key in the key board.


Syntax:<select name = “qualification” size = “1” Multiple = “ true” >
              <option> Bsc </option>
              <option> B.tech </option>
              <option> MCA </option>
              </select>

Text area: It creates a free format text area into which the user can enter anything.

Syntax:<text area name = “ address” rows = “ n” cols = “ n” >- - - - -< /text area >

Submit: It create a button which displays value attribute as its text. It is used to send the data to the server. Value attribute as its text. It is used to send the data to the server.
Syntax: < input type = “ submit” value = “ send” >

Reset: It is also creates a button but this one is used to clear the form data.

Syntax:< input type = “ Rest” value = “ cancel “ >

Ex 1: Create a form for entering student details.

< html>
< head >
      <title > student form </title>
</head>
<body>
     < form name = “stu” action = “ “ method = “get” >
     < h1 align = “center” > student form </h1> enter student name: <input type = “text”
            Name = “sname” value = “ “ size = “ 10”  Maxlength = “ 30” > enter student Id:               <input type = “ text” name = “ID” value
 Gender : < input type = “radio” name = “ gem” value = “Male”
            Checked = “ checked “ > Male
<input type = “radio” name = “gem” value = “female”>
Female.
Courses offered < input type = “Checkbox” name = “C1”>
Value = “ c” > language
< input type = “ checkbox” name = “C2” value = “ c++” > c++
<input type = “checkbox” name = “C3” value = “Java”> java
Qualification:         <select name = “qua”>
                                 < option> B.tec </option>
                                 < option > B.sc </option>
                                 </select>
Address: <text area name = “ add” cols = “ 10” rows = “10 “ rows = “ 10 “ </text area >
< input type = “submit” value = “send”>
< input type = “reset” value = “clear”>
</form>
</body>
</html>

form


Ex 2: Create a form for taking feedback of the visitor.

< html>
< head >
< title > forms< /title>
</head>
<body>
< form name = “visitor” action = “  “ method = “get” >
< h1 align = “ center” > visitor feedback </h1>
Your name: <input type = “text” name = “visit”
Value = “  “ size = “ 30 “ max length = “ 30 “>
Email Id < input type = “ text” name = “ Id “ value = “  “ >.
Select your location: <select name = “area” >
                                <option> India </option>
                                <option> USA </option>
                                < option > UK </option>
                                < /select>
Comments: < text area name = “ com” cols = “ 10” rows = “ 10” > - - - - - </text area >
< input type = “ submit “ value = “ submit” >
< input type = “ reset “ value = “ cancel “>
</form>
</body>
</html>

form1

Related

Explain Data Validation in DHTML ?

DHTML :  Dynamic  HTML Validation   is  simply  the  process  of  ensuring  that  some  data  might be  correct  &n...

Explain Perl and Mod Perl?

Perl: CGI scripts can be developed  in  most  programming languages,  the only  restriction  is the web server  must  be  abl...

Explain HTTP ( Hyper Text transfer protocol )?

The top layer in network protocol is application layer. Logically data transfer happens b/w applications and uses services from the other layers. The World Wide Web has its...

Post a Comment

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

item