Lesson 6:- Using Input and Form Boxes
(372 reads)
Using Forms
When using Forms, form elements are elements that allow the user to enter information,
these include(like text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
<input>
<input>
</form>
Using Input
In HTML the most used form tag is the <input> tag. The type of input is
specified with the type attribute. The most commonly used input types are explained
below.
Using Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in
a form.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
How it looks in a browser:
Note that the form itself is not visible. Also note that in most browsers, the
width of the text field is 20 characters by default.
Using Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number
of choices.
<form>
<input type="radio" name="sex" value="male">
Male
<br>
<input type="radio" name="sex" value="female">
Female
</form>
How it looks in a browser:
Note that only one option can be chosen.
Using Checkboxes
Checkboxes are used when you want the user to select one or more options of
a limited number of choices.
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
How it looks in a browser:
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form
is sent to another file. The form's action attribute defines the name of the file
to send the content to. The file defined in the action attribute usually does
something with the received input.
<form name="input" action="#"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
How it looks in a browser:
If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.
| 
