Forms
By using the <form> tag we can send the data to the corresponding
server side program.
Forms are
used to create GUIs interface on Web pages
The main
purpose of form is to get the information from user
Then this information is sent back to the server
A form is
an area that can contain form elements
The syntax
is: <form
parameters> ...form elements... </form>
Form
elements include: buttons, checkboxes, text fields, radio buttons, drop-down
menus, etc
Other kinds
of tags can be mixed in with the form elements
A form
usually contains a Submit button to send the information in he
form elements to the server
The form’s parameters tell JavaScript how to send the
information to the server (there are two different ways it could be sent)
Forms can
be used for other things, such as a GUI for simple programs
The
<form> tag
The <form
arguments> ... </form> tag encloses form elements (and
probably other elements as well)
The
arguments to form tell what to do with the user input
action="url" (required)
Specifies
where to send the data when the Submit
button is clicked
method="get" (default)
Form data
is sent as a URL with ?form_data info appended to the end
Can be used
only if data is all ASCII and not more than 100 characters
method="post"
Form data
is sent in the body of the URL request
Cannot be
bookmarked by most browsers
target="target"
Tells where
to open the page sent as a result of the request
target= _blank
means open in a new window
target= _top means
use the same window
The
<input> tag
By using this tag we can create the input controls on the
browser window, different input controls are textbox, password, field, radio
button, checkbox, …….
<input
type = “input control type (text, radio button, checkbox)”>
In place of the input control we can give the following
values.
(1)
Text
(2)
Password
(3)
Radio
(4)
Checkbox
(5)
Button
(6)
Submit
(7)
Reset
<html><body><form>Enter uname <input type = 'text' name = 'textbox'> <br>Enter pwd <input type = 'password' name = 'pqr'> <br><input type = 'submit' value = 'send'></form></body></html>
Example
<html><body><form><table border = '4' bgcolor = 'yellow'><tr> <td>Enter uname </td> <td> <input type = 'text' name = 'textbox'> </td></tr><tr><td>Enter pwd </td> <td> <input type = 'password' name = 'pqr'> </td> </tr><tr> <td></td><td><input type = 'submit' value = 'send'><input type = 'reset' value = 'cancle'> </td></tr></td> </tr></table></form></body></html>
Types of
button
We can create the three types of button in html by using
input tag.
(1) Normal button: whenever we create the
normal button than value can not be forward to the server side program if we
write button in side in form whenever we click on particular button.
<input type = “button” value = “send/click”>
(2) Submit button: by using submit button
we can forward the data to the server side program whenever we write that
button in side the form tag.
<input type = “submit” value = “send”>
(3) Reset button: By using this button we
can’t forward the data to the server side program and clear the currently
available data in the input controls
<input type = “reset” value = “clear”>
(4) Radio button: Radio button are used for
selecting one option from a number of options
<input type="radio" name="radiobutton" value="myValue1" /> male<br><input type="radio" name="radiobutton" value="myValue2”checked="checked" />female
If two or
more radio buttons have the same name, the user can only select one of them at
a time
This is how
you make a radio button “group”
If you ask
for the value of that name, you will get the value specified for the selected
radio button
As with
checkboxes, radio buttons do not contain any text
(5) Checkbox: Checkbox are used for
selecting a multiple option.
<input type="checkbox" name="checkbox"value="checkbox" checked="checked">
type:
"checkbox"
name: used
to reference this form element from JavaScript
value:
value to be returned when element is checked
Note that
there is no text associated with the checkbox
Unless you
use a label tag, only clicking on the box itself has any effect
Select
By using this tag we can display the drop down list on the
browsers window if we want to add the groups to that select tag we are going to
use uptgroup tag if we want to add the groups to that select tag we are going
to use uptgroup tag if we want to add the items to the drop down list we use
option tag.
Example:
<html><body>Select the item:<select><option>computer</option><option>phone </option><option>Tv </option><selected option>Item</option></select></body></html>
uptgroup
Example:
<html><body><select><optgroup label = 'pg'><option>Mca</option><option>M.Tech</option></optgroup><optgroup label = 'ug'><option>Bca</option><option>B.Tech</option><selected option>Degree</option></optgroup></select></body></html>
n Most, but
not all, form elements use the input tag, with a type="..." argument to
tell which kind of element it is
n type can be
text, checkbox, radio, password, hidden, submit, reset, button, file, or image
n Other
common input tag arguments include:
n name: the name of the element
n id: a unique identifier for the
element
n value: the “value” of the element; used
in different ways for different values of type
n readonly: the value cannot be
changed
n disabled: the user can’t do anything
with this element
n Other
arguments are defined for the input tag but have meaning only for certain
values of type
Text input
A text field:
<input type="text" name="textfield" value="with an initial value" />
A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret" />
• Note that two of these use the input tag, but one uses
textarea
Labels
In many
cases, the labels for controls are not part of the control
<input type="radio" name="gender" value="m" />male
In this
case, clicking on the word “male” has no effect
A label tag
will bind the text to the control
<label><input type="radio" name="gender" value="m" />male</label>
Clicking on
the word “male” now clicks the radio button
w3schools
says that you should use the for attribute:
<label for="lname">Last Name:</label>
<input type="text" name="lastname" id="lname" />
In my
testing (Firefox and Opera), this isn’t necessary, but it may be for some
browsers
n Labels also
help page readers read the page correctly
Some
browsers may render labels differently
No comments:
Post a Comment