Chapter No. 1 Web Publishing
FORMS
Forms are used to
accept or input the data from user. The form consists of objects called form
elements.
E.g. Text box,
Password box, Radio button, List box, Command button, submit button, Drop list
box, Check box, etc.
To create forms,
<form> tag is used. All the elements are placed within <form> </form>
tags.
<input> tag:
Used to create the form fields.
Textbox or Text
input field
Used to input text
in a single line.
E.g. <input
type=text name="fname">
Password field
Used to type
password (displays * or . )
E.g. <input
type=password name="pwd">
Submit button
Creates submit
button, used to send form data to server for processing.
E.g. <input
type=submit value="submit">
Example - Simple
LOGIN form
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1> User Login</h1>
User ID: <input type=text name="loginid" size=15>
<br><br>
Password: <input type=password name="pwd">
<br><br>
<input type=submit value="login">
</body>
</html>
Radio button
It's a toggle
button and only one option can be selected from a group of radio buttons.
E.g. <input
type=radio name=gender value="M">
<input
type=radio name=gender value="F">
Check box
Used to select one
or more options from number of choices
E.g. <input
type=checkbox name=hobby value="Cri">
<input
type=checkbox name=hobby value="Bas">
Button field
It is used to
display a command button to which we can assign a function (task).
Clicking the
button will activate a function.
E.g. <input
type=button name=button1 onclick="function();">
Attributes of
<input> tag:
Name -
assigns a name
to form field.
Size -
specifies the
display size of a text box
Maxlength
-
limits the number of character that a user can enter in a text field.
Value
- It is used
to assign a default value to text box.
Type
- It indicates
the type of form objects like text (default), radio, submit, reset, checkbox,
etc.
Checked
- It is used
to specify default selection for radio button and check box.
id
- used to provide
a id to the field (used in CSS)
Select list
box or Drop down list box
The <select> tag
is used to select an option from menu kind of drop-down list or scrolling list
box.
E.g.
<select name=city>
<option
value=mum>Mumbai</option>
<option
value=thn>Thane</option>
<option
value=kyn>Kalyan</option>
</select>
Attributes of
<select>:
Name
- It is used to specify a name to the select box. Assigns a label to selection.
Size
- Specifies the number of list items to be displayed at one time.
Multiple
- Allows the user to select multiple options.
<textarea> tag
It is used to
create multiline textbox or large editable area.
E.g.
<textarea rows=3
cols=40>
</textarea>
Attributes of
<textarea> tag:
Name
- assigns a
name to the text area
Rows
- specifies
the height of the text area in number of lines.
Cols
- specifies
the width of the text area in no. of columns /characters.
Hidden field
The purpose of the
hidden field is to store the value that need to be sent to server along with
form. The browser does not display these values.
E.g. <input
type=hidden name=xyz value=256>
Attributes of
<form> tag:
Method
- It
specifies the method of sending form data to the server.
There are two
methods:
GET
- It appends the
data to the URL in name/value pairs.
POST
- sends the
form data hidden in HTTP headers not visible on the screen.
Action -
It specifies
the location/path or URL of the server where the form data is to be submitted.
Name
- assigns a name to the form.
E.g.
<form method=post
name=form1 action="http://www.exza.in/getdata.php">
No comments:
Post a Comment