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:
<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="">
(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="">
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” />
(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.
<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>
(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 />
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">
(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>
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” />
====================*************===================
(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.
<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:
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.
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> 
No comments:
Post a Comment