1.5 Forms

1.
5 FORMS
SIGN UP FORM FOR GMAIL SIGN UP FORM FOR FACEBOOK
FORM FOR PIZZA ORDERING SYSTEM
REGISTRATION FORM FOR
A PARTICULAR APPLICATION
FORMS
A webform, web form or HTML form on a web page allows a user
to enter data that is sent to a server for processing.
Forms are enclosed in the HTML <form> tag.
Forms are made up of standard graphical user
interface(GUI) elements called HTML controls.
The data entered into the form should be submitted to the server
using two methods:
(i) GET
(ii) POST.
The basic purpose of an HTML form is to allow the user to enter
data on one end and then send the data on the other end through the
web server.
It helps the user purchase goods on the Internet and signup for
newsletters and mail accounts.
The HTML controls are the basic parts of an HTML form.
The HTML<form> element defines a form that is used to collect

user input.
The important attributes of <form> tag are:
Attribute Name Possible values Description

Action
Name
method Get, post The default value for method
is “get”.
*************************************************
DIFFERENCE BETWEEN GET AND POST METHOD
*************************************************
(i) Textbox:
 It is a rectangular box which accepts one-line text as input from the

user.
 A text box is created by using a tag <input>.
 The important attribute of <input> tag is:

Attribute Name Possible values Description
type Text, The default value of type attribute is “text”.
Password,
Hidden,
File,
Image,
Checkbox,
Radio,
Button,
Submit
Reset……etc
Example 1:
<input type=“text”> (or)
<input>
Meaning:
Output:
Example 1:
<input type=“password”>
Meaning:
Output:
Example 1:
<input type=“hidden”>
Meaning:
Output:
Example 1:
<input type=“file”>
Meaning:
Output:
Example 1:
<input type=“image”>
Meaning:
Output:
(ii) Checkbox:
 A checkbox is a small box with a check mark in it and a user can

either select or clear it by a click.
 ** Checkboxes allows the user to select ZERO or MORE options

of a limited number of choices.
Example 1:
<form>
In which game are you interested?<br>
<input type="checkbox">Football<br>
<input type="checkbox">Volley ball<br>
<input type="checkbox">Cricket<br>
<input type="checkbox">Tennis<br>
</form>
Example 2:
<form>
In which game are you interested?<br>
<input type="checkbox” checked>Football<br>
<input type="checkbox” checked>Volley ball<br>
<input type="checkbox” checked>Cricket<br>
<input type="checkbox” checked>Tennis<br>
</form>
Example:
<html>
<form>
<input type=“checkbox” disabled>I accept terms and conditions
</form>
</html>
(iii) Radio Button:
 A radio button is a circle which displays a dot in the middle of

circle when selected.
 A radio button allows the user to select only one option from
limited no. of choices.
Example 1:
<form>
Gender:
<input type=“radio” >Male
<input type=“radio” >Female<br>
</form>
Example 2:
<form>
Gender:
<input type=“radio” name=“g” >Male
<input type=“radio” name=“g” >Female<br>
</form>
**** The difference between checkbox and radio buttons are:
(i) Radio buttons work in mutually exclusive groups.(only one option

can be selected at a time.)
(iv) TextArea:
 A textarea is a multi-line text input control and displays text entered
in it.
 A user can write unlimited number of characters in the textarea.

Example:
<form>
Address:<textarea rows=10 cols=10>
</form>
(v) Selection or Drop-down List Or Pop-Down List:
 The <select> tag defines a drop-down list.
 The <option> tag is used to define an option in the list.

Example 1:
<html>
<form>
Select country
<select>
<option> Afghanistan </option>
<option> China </option>
<option> Denmark </option>
<option> India </option>
<option> Iceland </option>
<option> Ireland </option>
<option> Japan </option>
<option> Russia </option>
<option> USA </option>
</select>
</form>
</html>
Example 2:
<html>
<form>
Select country
<select>
<option> Afghanistan </option>
<option> China </option>
<option> Denmark </option>
<option> India </option>
<option> Iceland </option>
<option> Ireland </option>
<option> Japan </option>
<option> Russia </option>
<option selected> USA</option>
</select>
</form>
</html>
Example 3:
DATE OF BIRTH:<select>
<option>DATE<option>1<option>2<option>3<option>4<option>5<option>6
<option>7<option>8<option>9<option>10<option>11<option>12<option>13
<option>28<option>29<option>30<option>31
</select><select>
<option>MONTH
<option>January<option>February<option>March<option>April<option>May
<option>June<option>July<option>August<option>September<option>October
<option>November <option>December
</select>
<select>
<option>YEAR
<option>1980<option>1981<option>1982<option>1983<option>1984<option>1985
<option>2016<option>2017<option>2018<option>2019<option>2020
</select>
(vi) Button or Simple Button or Clickable Button:
 It is a simple button which activates a specific code when clicked.

Example 1:
<form>
<center>
Value1: <input type=“text”><br>

Sum is: <input type=“text”><br>
<input type=“button” value=“add” onClick=“add( )”>
</center>
</form>
(vii) Submit Button:
 It defines a button for submitting the form data to a form-handler.

(e.g server page)
Example 1:
<form action=“login.jsp”>
<center>
User Name: <input type=“text”><br>

Password: <input type=“password”><br>
<input type=“submit” value=“Login” >
</center>
</form>
(viii) Reset Button:
 A reset button resets the form data to its initial values.
 When the user clicks the reset button, all the values in the form
fields are cleared and controls in the form are returned to their
original state.
Example 1:
<form>
<center>
<input type=“text” value=“number1”><br>

<input type=“text” value=“number2”><br>
<input type=“reset” value=“clear” >
</center>
</form>
Example 2:
<form>
<center>
Value 1: <input type=“text”><br>

<input type=“reset” value=“clear” >
</center>
</form>

1.5 Forms

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

1.5 Forms

Încărcat de

Drepturi de autor:

Formate disponibile

1.

The HTML controls are the basic parts of an HTML form.

The HTML<form> element defines a form that is used to collect

Attribute Name Possible values Description

 It is a rectangular box which accepts one-line text as input from the

 A text box is created by using a tag <input>.

 The important attribute of <input> tag is:

<input type=“text”> (or)

 A checkbox is a small box with a check mark in it and a user can

 ** Checkboxes allows the user to select ZERO or MORE options

<input type=“checkbox” disabled>I accept terms and conditions

 A radio button is a circle which displays a dot in the middle of

<input type=“radio” >Female<br>

<input type=“radio” name=“g” >Female<br>

(i) Radio buttons work in mutually exclusive groups.(only one option

 A user can write unlimited number of characters in the textarea.

 The <select> tag defines a drop-down list.

 The <option> tag is used to define an option in the list.

 It is a simple button which activates a specific code when clicked.

Value1: <input type=“text”><br>

 It defines a button for submitting the form data to a form-handler.

User Name: <input type=“text”><br>

<input type=“submit” value=“Login” >

 A reset button resets the form data to its initial values.

<input type=“text” value=“number1”><br>

<input type=“reset” value=“clear” >

Value 1: <input type=“text”><br>

<input type=“reset” value=“clear” >

S-ar putea să vă placă și