Forms: We
can retrieve data from the user and send it to the server through forms. We can
create form using <form></form> tag.
<html> <body>
<form>
</form>
</body>
</html>
Attributes of form tag:
(a)method: (get/post) This attribute defines
which method should be called on server when data submitted to server.
When we specify get method data is sent to server through the url.
When we specify post method data is sent to server with headers.
(b) action: This attribute specifies a page on server that will handle
client’s request and process it.
<form action=”DoThis.php” method=”post”>
========
</form>
(c) enctype: This attribute
specify type of data that we are sending through the request.
<form method=”post” action=”a.php” enctype=”text/plain”> </form>
or
<form method=”post” action=”upload.php”
enctype=”multipart/form-data”>
</form>
(d) name: We can give a name
to the form with this attribute.
Form Fields: Form fields
(Text Field, Radio Buttons, Check Boxes and Buttons etc.) are used to take input
from user. <input /> tag is
used to create form fields.
Attributes of <input /> tag:
|
Attribute
|
Description
|
|
Type
|
Type of input field(text ,password,hidden
etc)
|
|
Name
|
Name for the input field.
|
|
Id
|
Unique id for the field
(Used in java script)
|
|
Size
|
Visible amount of field.
|
|
Value
|
Initial value for field.
|
|
Maxlength
|
Maximum no of characters
for input.
|
|
disabled
|
(Property) To disable the
field.
|
|
Readonly
|
To create the field read
only.
|
(1) Text Field (input type=text): This is used to read a single line of text from
user.
Ex:
= <input type="text" name="txtName" value="Initial
Value" size="20" maxlength="16" />
(2) Password Field (input type=password):
It is used to read password from user.
Ex: =
<input type="password" name="pwd"
size="10" />
(3) Hidden Field (input type=hidden):
It is used to pass some hidden information which is not visible to user.
Ex:= <input type="hidden" name="hide"
value="This is Hidden" size="10" />
(4) CheckBox (input type=checkbox):
If we want to select multiple values from user then we can use checkboxes.
EX: <form method=""
action="">
Music : <input type="checkbox" name="ch1"
value="chk1" /> <br />
Games : <input type="checkbox" name="ch2"
value="chk2" /> <br />
Reading: <input type="checkbox" name="ch3"
value="chk3" />
</form>
(5) RadioButton (input type=radio) :
Radio button are used to choose single value from multiple values.
EX: <form method=""
action="">
Male: <input
type="radio" name="r1" value="rb1" /> <br
/>
Female : <input
type="radio" name="r2" value="rb2" /> <br
/>
</form>
By default radio buttons are not mutually exclusive. If we want to make them
mutually exclusive than we should named them with same name.
EX:
<form method="" action="">
Male: <input
type="radio" name="r1" value="rb1" /> <br
/>
Female : <input
type="radio" name="r1" value="rb2" /> <br
/>
</form>
(6) Buttons: We can make push
buttons with input tag.
(a) submit button (input type=submit)
: Submit button is used to send form data to server. Data is submitted
to server when user clicks on a submit button.
<input type=”submit” name=”submitBtn” value=”Submit Form” />
(b) reset Button (input type=reset) :
reset button is used to reset all form fields to their initial state.
<input type=”reset” name=”resetBtn” value=”clear” />
(c) A simple push button (input
type=button):
<input
type=”button” name=”b1” value=”Click me” />
(7) TextArea <textarea>
</textarea>: Text area is used to read multiline text from user.
We use <textarea> </textarea> tag to create a text area.
Attributes of
<textarea> </textarea> tag:
(a) name: specifies name of
text area.
(b) cols: specifies
visibility of textarea in number of coloumns.
(c) rows: specifies number of
visible rows in the text area.
<textarea name=”txtArea”
cols=”20” rows=”3” >
Initial text
………..
</textarea>
Simple
Form Example:
<html>
<head> <title> Input Form
</title> </head>
<body
bgcolor="gray" text="white">
<form
id="form1" name="form1" method="post"
action="">
Name :
<input name="name" type="text"
id="name" /> <br />
Age :
<input name="age" type="text" id="age"
size="4" maxlength="2" /> <br />
Password : <input name="pwd"
type="password" id="pwd" /> <br />
Address : <textarea
name="address" cols="50" rows="3"
id="address"></textarea> <br />
Gender : <br /> Male : <input name="radiobutton"
type="radio" value="Male" />
Female
<input name="radiobutton" type="radio"
value="Female" /> <br />
Hobbies : <br /> Games : <input
name="cb1" type="checkbox" id="cb1"
value="games" />
Music :
<input name="cb2" type="checkbox" id="cb2"
value="music" />
Dance :
<input name="c3" type="checkbox" id="c3"
value="dance" /> <br />
<input type="submit"
value="Send" />
<input
type="reset" value="Clear All" />
</form>
</body>
</html>
(8) Drop Down List: It is
used to provide drop and select functionality to user. Two tags are used to
create a drop down list.
(a) <select></select>
(b)<option> </option>
Example:
<select name="sel_op">
<option value="a">
aaa </option>
<option value="b">
bbb </option>
<option value="c"
selected> ccc </option>
<option value="d">
ddd </option>
</select>
attributes of <select>
</select> tag:
(a) name: specifies name for
drop down list.
(b) size: specifies number of
visible rows for drop down list.
(c) multiple: This is a
property it is used for multiple selection.
Example:
<select name="sel_op" size="4" multiple>
<option value="a">
aaa </option>
<option value="b">
bbb </option>
<option value="c"
selected> ccc </option>
<option value="d">
ddd </option>
<option value="e">
eee </option>
<option value="f">
fff </option>
</select>
(9) File Browser Dialog: It
is used to select files for uploading. <input /> tag is used to create
file browser dialog with type attribute assigned value ‘file’.
<input type=”file”
name=”upload_file” />
Note: We can use image in
place of a submit button by specifying type attribute as image in input tag.
<input type=”image”
src=”path” />
All <img /> attributes can be used with this input type.
Ex: <input type=”image” src=”c:\a.gif” width=”100” height=”50” border=”0”
alt=”submit” />
====================*************===================
<marquee>
</marquee>:- Scrolling messages and images can be created through marquee tag.
<marquee> Scrolling Text </marquee>
Attributes of marquee tag:
(1). bgcolor: specify
background color for scrolling text.
(2). behavior: this attribute
specifies scrolling behavior of text.
|
Values
|
Effect
|
|
alternate
|
Go
to one side and come again
|
|
scroll
|
Text
goes only in one direction
|
|
slide
|
Text
goes in one direction and stops.
|
(3). direction: Specifies scrolling direction. Possible values
for this attribute are down, left,
right, up.
EX:
<marquee bgcolor="green" behavior="alternate"
direction="right">
Scrolling Text </marquee>
(4). height/width: Specifies
height and width of scrollable area for scrolling message.
(5). scrollamount: Specifies
scroll amount (speed) for text.
Ex: <marquee
scrollamount="20">
Scrolling Text </marquee>
(6). scrolldelay: specifies
scrolling delay for text. (in milliseconds.)
Ex: <marquee
bgcolor="#00ff33" scrolldelay="1000"> Scrolling Text </marquee>
Example:
<html> <body>
<marquee
bgcolor="#FF99FF" height="600" width="600"
direction="up" behavior="alternate">
<marquee
behavior="alternate" direction="left">
<h1
style="color:#0000CC"> Bodacious
IT Hub Pvt. Ltd. </h1>
</marquee>
</marquee>
</body></html>
Background Sound
(<bgsound />) tag: We can play sounds in background of our web page
using <bgsound /> tag.
Attributes:
(a) src: Specifies source for
background sound file.
(b) loop: This attribute
specifies how many times music should be played and -1 specifies an infinite
loop.
<html>
<head>
<bgsound src="a.mp3"
loop="-1" />
</head>
</html>
