HTML
Forms
An HTML form is a section
of your web page that contains special elements such as checkboxes, radio
buttons,texts, etc called controls or fields.
You can think of a form as a piece of paper where you can add text,
buttons, etc. Many times, when you view
web pages you are looking at a form.
An example of a simple
form would be:
|
<html>
<body>
<form
name= “surveyForm”>
First
name: <input name= “firstname” type=”text”>
Last
name: <input name=”lastname” type = “text”><br>
<input
type=”radio” name=”gender” value=”male”>Male
<input
type=”radio” name=”gender” value=”female”>Female
<input
type=”checkbox” name=”K-12”>K-12<br>
<input
type=”checkbox” name=”College Undergraduate”><br>
<input
type=”checkbox” name=”College Graduate”><br>
<input
type=”checkbox” name=”N/A”>
</form>
</body>
</html>
|
By the end of this
tutorial, you will be able to identify all of the tags in this example and be
able to explain what a control is, and how it works.
A control is an element in
a HTML document that stores information and does something with it. As plain as this definition seems, this is
the best way to describe it. You can store
different types of information in controls or fields so they are very useful,
the one thing is that stores can only be used with forms. There are many different types of controls or
fields:
The most commonly used tag
with a FORM element is the <input> tag.
This tag allows the user of your webpage to enter information that you
may want to store for a later date. In
this tutorial, let’s create our own survey.
For this survey, the first thing that we would like to do is create an
area for the user to enter his/her name.
So let’s create our form area first.
|
<html>
<body>
<form
name= “surveyForm”>
</form>
</body>
</html>
|
Note: Our form has a name because we can have more than one form on a webpage,
so it is important to identify your forms and input boxes.
Now we have created the
skeleton of our webpage. So let’s work
with the <input> tag. There are
many different types of inputs: buttons, checkboxes, radio buttons and text
fields. The easiest of these is the text
field. Let’s use that first.
We want to create this:
|
First
name:
Last name: |
Using a text input. This is used by incorporating these tags into
our web page:
|
First name: <input name=
“firstname” type=”text”>
Last name: <input name=”lastname”
type = “text”>
|
Just like our form, we
also want to name the elements in our webpage so that we are able to
differentiate between them and other elements.
Adding the above text to your webpage will create the above form image.
|
<html>
<body>
<form
name= “surveyForm”>
First
name: <input name= “firstname” type=”text”>
Last
name: <input name=”lastname” type = “text”>
</form>
</body>
</html>
|
Next, we want to determine
whether or not our user is male or female.
To do this we may want to use what are called radio buttons, such as
these:
|
Male
Female |
These buttons
allow the user to select one and only one option. Meaning the user is either male or female,
but cannot select both. These radio
buttons are created by changing the input type option to “radio”. Unlike the text option, both of the radio buttons
will have the same name; this groups them together and ensures that the user
will only be able to select one or the other.
The only way that the browser is able to determine which radio button
has been selected is by using the “value” field. The value of each radio button must be
different so that the browser knows which out of the group has been
selected. For example, if we select
“Female” the browser interprets this as: “The radio button in the “gender” group
with the value of “female” has been selected.”
The HTML looks like this:
|
<input type=”radio” name= ”gender”
value=”male”>Male
<input type=”radio” name=”gender”
value=”female”>Female
|
If we incorporate this
into our survey code we will now have:
|
<html>
<body>
<form
name= “surveyForm”>
First name: <input
name= “firstname” type=”text”>
Last
name: <input name=”lastname” type = “text”><br>
<input
type=”radio” name=”gender” value=”male”>Male
<input
type=”radio” name=”gender” value=”female”>Female
</form>
</body>
</html>
|
Now, let’s say we want to
know what levels of school our user has completed and we want them to be able
to select more than one. Now, we would
use checkboxes. Checkboxes allow the
user to select all that apply to him/her.
|
K-12
College Undergraduate
College Graduate
N/A |
The above looks like this
in HTML:
|
<input type=”checkbox”
name=”K-12”>K-12<br>
<input type=”checkbox” name=”College
Undergraduate”><br>
<input type=”checkbox” name=”College
Graduate”><br>
<input type=”checkbox” name=”N/A”>
|
Now let’s incorporate this
as well into our survey:
|
<html>
<body>
<form
name= “surveyForm”>
First
name: <input name= “firstname” type=”text”>
Last
name: <input name=”lastname” type = “text”><br>
<input
type=”radio” name=”gender” value=”male”>Male
<input
type=”radio” name=”gender” value=”female”>Female
<input
type=”checkbox” name=”K-12”>K-12<br>
<input type=”checkbox” name=”College
Undergraduate”><br>
<input
type=”checkbox” name=”College Graduate”><br>
<input
type=”checkbox” name=”N/A”>
</form>
</body>
</html>
|
These were some of the examples that we gave you.
There are so many in fact every web site have a form like contact us. So how to
use and make HTML interactive forms is very essential in learning HTML
language.
No comments:
Post a Comment