HTML Forms
HTML Forms
e.g.
<html>
<head>
<title>My first Form</title>
</head>
<body>
<form name=form>
Enter your Name <input type=text name=t1 value="enter your name" size=20> <br>
Age <input type=text name=t1 size=2> <br>
Address <textarea rows=6 cols=6> </textarea><br>
Password <input type=password name=p1 size=10>
Repassowrd <input type=password name=p2 size=10><br>
Sex <input type=radio name=r1> Male
<input type=radio name=r1> Female
<br>
Hobbies<br>
<input type=checkbox name=c1> Music
<input type=checkbox name=c1> Computer Game
<input type=checkbox name=c1> Study
<input type=checkbox name=c1> Cricket
Date of birth <br>
Date
<select name=s1 size="1" multiple="yes">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Month
<select name=s1 size="1" multiple="yes">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
</select>
year
<select name=s1 size="1" multiple="yes">
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
<br>
<input type=submit name=submit value="submit">
<input type=reset submit name=reset value="reset">
</form>
</html>
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<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 "/action_page.php".</p>
</body>
</html>
THE <FORM> ELEMENT
The HTML <form> element defines a form that is used to collect user input:
THE <INPUT> ELEMENT
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type
Description
-----------------------
<input type="text">
Defines a one-line text input field
<input type="radio">
Defines a radio button (for selecting one of many choices)
<input type="submit">
Defines a submit button (for submitting the form)
TEXT INPUT
<input type="text"> defines a one-line input field for text input:
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text
input field is 20 characters.</p>
</body>
</html>
RADIO BUTTON INPUT
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
THE SUBMIT BUTTON
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<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 "/action_page.php".</p>
</body>
</html>
THE ACTION ATTRIBUTE
The action attribute defines the action to be performed
when the form is submitted.
Normally, the form data is sent to a web page on
the server when the user clicks on the submit button.
In the example above, the form data is sent to a
page on the server called "/action_page.php".
This page contains a server-side script that
handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.
THE TARGET ATTRIBUTE
The target attribute specifies if the submitted
result will open in a new browser tab, a frame, or
in the current window.
The default value is "_self" which means the form
will be submitted in the current window.
To make the form result open in a new browser tab,
use the value "_blank":
<!DOCTYPE html>
<html>
<body>
<p>When submitting this form, the result will be
opened in a new browser tab:</p>
<form action="/action_page.php" target="_blank">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
THE METHOD ATTRIBUTE
The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the form data:
<!DOCTYPE html>
<html>
<body>
<p>This form will be submitted using the GET method:</p>
<form action="/action_page.php" target="_blank" method="GET">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>After you submit, notice that the form
values is visible in the address bar of the new browser tab.</p>
</body>
</html>
WHEN TO USE GET?
The default method when submitting form data is GET.
However, when GET is used, the submitted form data
will be visible in the page address field:
WHEN TO USE POST?
Always use POST if the form data contains
sensitive or personal information. The POST method
does not display the submitted form data in the page address field.
Notes on POST:
- POST has no size limitations, and can be used to
- send large amounts of data.
- Form submissions with POST cannot be bookmarked
THE NAME ATTRIBUTE
Each input field must have a name attribute
to be submitted.
If the name attribute is omitted, the data of that input field
will not be sent at all.
This example will only submit the "Last name" input field:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<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 "/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be
submitted, because the input element does not have a name attribute.</p>
</body>
</html>
GROUPING FORM DATA WITH <FIELDSET>
The <fieldset> element is used to group
related data in a form.
The <legend> element defines a caption
for the <fieldset> element.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
No comments:
Post a Comment