FORM FIELDS:
These
fields can be added to your forms:
1. Text
field
2. Password
field
3. Hidden
field
4. Text
area
5. Check
box
6. Radio
button
7. Drop-down
menu
8. Submit
button
9. Reset
button
10. Image button
HTML Forms:
HTML forms are used to pass data to a server.
An HTML form can contain input elements like text
fields, checkboxes, radio-buttons, submit buttons and more. A form can also
contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
HTML Forms - The Input Element:
The most
important form element is the <input> element.
The
<input> element is used to select user information.
An
<input> element can vary in many ways, depending on the type attribute.
An <input> element can be of type text field, checkbox, password, radio
button, submit button, and more.
The most
common input types are described below.
TEXT AREA:
Text
areas are text fields that can span several lines.
Ulike most other form fields,
text areas are not defined with an <input> tag. Instead
you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want
the area to end. Everything
written between these tags will be presented in the text area box.
Settings:
Below
is a listing of valid settings for text areas:
HTML
|
EXPLANATION
|
textarea
rows= cols= name= tabindex= wrap= off virtual
physical
|
Text area - several lines
Rows in the field. Columns in the field. Name of the field. Tab order of the field. Turns off linebreaking Shows linebreaking, but sends text as entered.
Inserts linebreaks
when
needed and even sends it. |
An example:
Look at this HTML example:
<html>
<head>
<title>My
Page</title>
</head>
<form
name="myform" action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div
align="center">
This is outside the
area<br><br>
<textarea
cols="40" rows="5" name="myname">
Now we are inside the
area - which is nice.
</textarea>
<br><br>
And now we are outside
the area again.
</div>
</form>
</body>
</html>
Text Fields:
<input type="text"> defines a
one-line input field that a user can enter text into:
<form>
First
name: <input type="text" name="firstname"><br>
Last
name: <input type="text" name="lastname">
</form>
How the HTML code above looks in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the
default width of a text field is 20 characters.
Password Field:
<input type="password"> defines a
password field:
<form>
Password:
<input type="password" name="pwd">
</form>
How the HTML code above looks in a browser:
Password:
Note: The characters in a password field are masked (shown
as asterisks or circles).
Radio Buttons:
<input type="radio"> defines a radio
button. Radio buttons let a user select ONLY 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 the
HTML code above looks in a browser:
If you
type some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called
"html_form_action.asp". The page will show you the received input.
Reset button:
When a visitor clicks a reset button, the entries are
reset to the default values.
Settings:
Settings:
Below is a listing of valid
settings for reset buttons:
HTML
|
EXPLANATION
|
reset
name= value= align= tabindex= |
Reset button
Name of the button. Text written on the button. Alignment of the button. Tab order of the button. |
The value setting
defines what is written on the button.
The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
An example:
Look at this HTML example:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"> <input type="reset" value="Reset!"><br>
</div>
</form>
</body>
</html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"> <input type="reset" value="Reset!"><br>
</div>
</form>
</body>
</html>
And
the resulting output from it:
|
How
to create radio buttons source Code:
<!DOCTYPE
html>
<html>
<body>
<form
action="">
<input
type="radio" name="sex"
value="male">Male<br>
<input
type="radio" name="sex" value="female">Female
</form>
<p><b>Note:</b>
When a user clicks on a radio-button, it becomes checked, and all other
radio-buttons with equal name become unchecked.</p>
</body>
</html>
How
to create radio buttons result:
Note: When a user clicks on a radio-button, it becomes
checked, and all other radio-buttons with equal name become unchecked.
How
to create checkboxes. A user can select or unselect a checkbox source code:
<!DOCTYPE
html>
<html>
<body>
<form
action="">
<input
type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input
type="checkbox" name="vehicle" value="Car">I
have a car
</form>
</body>
</html>
I
have a bike
I have a car
I have a car
<!DOCTYPE
html>
<html>
<body>
<form
action="">
<select
name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
</form>
</body>
</html>
How
to create a drop-down list with a pre-selected value source code:
<!DOCTYPE
html>
<html>
<body>
<form
action="">
<select
name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat" selected>Fiat</option>
<option
value="audi">Audi</option>
</select>
</form>
</body>
</html>
How
to create a multi-line text input control. In a text-area the user can write an
unlimited number of characters source code:
<!DOCTYPE
html>
<html>
<body>
<textarea
rows="10" cols="30">
The
cat was playing in the garden.
</textarea>
</body>
</html>
How
to create a button source code:
<!DOCTYPE
html>
<html>
<body>
<form
action="">
<input
type="button" value="Hello world!">
</form>
</body>
</html>
How
to create a border around elements in a form source code:
<!DOCTYPE
html>
<html>
<body>
<form
action="">
<fieldset>
<legend>Personal
information:</legend>
Name:
<input type="text" size="30"><br>
E-mail:
<input type="text" size="30"><br>
Date
of birth: <input type="text" size="10">
</fieldset>
</form>
</body>
</html>
How
to create a border around elements in a form result:
Personal
information:Name:
E-mail:
Date of birth:
E-mail:
Date of birth:
How
to create a form with two text fields and a submit buttons source code:
<!DOCTYPE
html>
<html>
<body>
<form
name="input" action="html_form_action.asp"
method="get">
First
name: <input type="text" name="FirstName"
value="Mickey"><br>
Last
name: <input type="text" name="LastName" value="Mouse"><br>
<input
type="submit" value="Submit">
</form>
<p>If
you click the "Submit" button, the form-data will be sent to a page
called "html_form_action.asp".</p>
</body>
</html>
How
to create a form with two text fields and a submit button result:
If you click the "Submit" button,
the form-data will be sent to a page called "html_form_action.asp".
How
to create a form with two checkboxes and a submit button:
<!DOCTYPE
html>
<html>
<body>
<input
type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input
type="checkbox" name="vehicle" value="Car">I
have a car
<br><br>
<input
type="submit" value="Submit">
</form>
</html>
How
to create a form with two checkboxes and a submit button result:
If you click the "Submit" button,
the form-data will be sent to a page called "html_form_action.asp".
How
to create a form with two radio buttons, and a submit button:
<!DOCTYPE
html>
<html>
<body>
<form
name="input" action="html_form_action.asp"
method="get">
<input
type="radio" name="sex" value="male">Male<br>
<input
type="radio" name="sex"
value="female">Female<br>
<input
type="submit" value="Submit">
</form>
<p>If
you click the "Submit" button, the form-data will be sent to a page
called "html_form_action.asp".</p>
</html>
How
to create a form with two radio buttons, and a submit button result:
If you click the "Submit" button,
the form-data will be sent to a page called "html_form_action.asp".
How
to send e-mail from a form:
<!DOCTYPE
html>
<html>
<body>
<h3>Send
e-mail to someone@example.com:</h3>
<form
action="MAILTO:someone@example.com" method="post"
enctype="text/plain">
Name:<br>
<input
type="text" name="name" value="your
name"><br>
E-mail:<br>
<input
type="text" name="mail" value="your
email"><br>
Comment:<br>
<input
type="text" name="comment" value="your comment"
size="50"><br><br>
<input
type="submit" value="Send">
<input
type="reset" value="Reset">
</form>
</body>
</html>
How
to send e-mail from a form result:
Send e-mail to
someone@example.com:
Note: The form itself is not visible. Also note that the
default width of a text field is 20 characters.
Note: The characters in a password field are masked (shown
as asterisks or circles).
3Checkboxes
<!DOCTYPE html>
<html>
<body>
<form
action="">
<input
type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input
type="checkbox" name="vehicle" value="Car">I
have a car
</form>
</body>
</html>
Result
I
have a bike
I have a car
I have a car
4.Radio buttons
<!DOCTYPE html>
<html>
<body>
<form
action="">
<input
type="radio" name="sex"
value="male">Male<br>
<input
type="radio" name="sex" value="female">Female
</form>
<p><b>Note:</b>
When a user clicks on a radio-button, it becomes checked, and all other
radio-buttons with equal name become unchecked.</p>
</body>
</html>
Result
Note: When a user clicks on a radio-button, it becomes
checked, and all other radio-buttons with equal name become unchecked.
5.Simple drop-down list
<!DOCTYPE html>
<html>
<body>
<form
action="">
<select
name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
6.Drop-down list with a pre-selected value
<!DOCTYPE html>
<html>
<body>
<form
action="">
<select
name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat" selected>Fiat</option>
<option
value="audi">Audi</option>
</select>
</form>
</body>
</html>
7Textarea (a multi-line text input field)
<!DOCTYPE html>
<html>
<body>
<textarea
rows="10" cols="30">
The cat was playing in
the garden.
</textarea>
</body>
</html>
8Create a button
<!DOCTYPE html>
<html>
<body>
<form
action="">
<input
type="button" value="Hello world!">
</form>
</body>
</html>
9Draw a border around form-data
<!DOCTYPE html>
<html>
<body>
<form
action="">
<fieldset>
<legend>Personal
information:</legend>
Name: <input
type="text" size="30"><br>
E-mail: <input
type="text" size="30"><br>
Date of birth: <input
type="text" size="10">
</fieldset>
</form>
</body>
</html>
Result
Personal
information:Name:
E-mail:
Date of birth:
E-mail:
Date of birth:
10Form with text fields and a submit button
<!DOCTYPE html>
<html>
<body>
First name: <input
type="text" name="FirstName"
value="Mickey"><br>
Last name: <input
type="text" name="LastName"
value="Mouse"><br>
<input
type="submit" value="Submit">
</form>
<p>If you click the
"Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Result
If you click the "Submit" button,
the form-data will be sent to a page called "html_form_action.asp".
11Form with checkboxes and a submit button
<!DOCTYPE html>
<html>
<body>
<input
type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input type="checkbox"
name="vehicle" value="Car">I have a car
<br><br>
<input
type="submit" value="Submit">
</form>
<p>If you click the
"Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Result
If you click the "Submit" button,
the form-data will be sent to a page called "html_form_action.asp".
12Form with radiobuttons and a submit button
<!DOCTYPE html>
<html>
<body>
<input
type="radio" name="sex"
value="male">Male<br>
<input
type="radio" name="sex"
value="female">Female<br>
<input
type="submit" value="Submit">
</form>
<p>If you click the
"Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Result
If you click the "Submit" button,
the form-data will be sent to a page called "html_form_action.asp".
13Send e-mail from a form
<!DOCTYPE html>
<html>
<body>
<h3>Send e-mail to
someone@example.com:</h3>
Name:<br>
<input
type="text" name="name" value="your
name"><br>
E-mail:<br>
<input
type="text" name="mail" value="your
email"><br>
Comment:<br>
<input
type="text" name="comment" value="your comment"
size="50"><br><br>
<input
type="submit" value="Send">
<input
type="reset" value="Reset">
</form>
</body>
</html>
Result
No comments:
Post a Comment