HTML5 FORMS CHAPTER 25
25TH TUTORIAL ON HTML FORMS
HTML Forms
An HTML form is used to collect user input. The user input
can then be sent to a server for processing.
The <form>
Element
The HTML <form> element defines a form that
is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input
elements, like: text fields, checkboxes, radio buttons, submit buttons, and
more
The <input> Element
The <input> element is the most
important form element.
The <input> element is displayed
in several ways, depending on the type attribute.
Here are some examples:
|
Type |
Description |
|
<input
type="text"> |
Defines
a single-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 Fields
<input type="text"> defines a
single-line input field for text input.
Example
A
form with two text input fields:
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label
for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value=""><br>
<label
for="lname">Last name:</label><br>
<input type="text"
id="lname" name="lname" value="">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20
characters.</p>
</body>
</html>
OUTPUT
Text input fields
First name:
Last name:
Bottom of Form
Note that the form itself is not visible.
Also note that the default width of text input
fields is 20 characters.
The <label> Element
Notice the use of
the <label> element in the example above.
The <label> tag defines a label
for many form elements.
The <label> element is useful
for screen-reader users, because the screen-reader will read out loud the label
when the user is focused on the input element.
Radio Buttons
<input
type="radio"> defines a radio button.
Radio buttons let a user select ONE of a
limited number of choices.
Example
A
form with radio buttons:
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" id="male"
name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female"
name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other"
name="gender" value="other">
<label for="other">Other</label>
</form>
</body>
</html>
OUTPUT
Radio Buttons
Male
Female
Other
The Submit Button
<input
type="submit"> defines a button for submitting the
form data to a form-handler.
The
form-handler is typically a page on the server with a script for processing
input data.
The
form-handler is specified in the form's action attribute.
Example
A form with a submit button:
<!DOCTYPE html>
<html>
<body>
<h2>HTML
Forms</h2>
<form
action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text"
id="fname" name="fname" value=""><br>
<label for="lname">Last
name:</label><br>
<input type="text"
id="lname" name="lname"
value=""><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>
OUTPUT
HTML Forms
First name:
Last name:
If you click the "Submit" button, the
form-data will be sent to a page called "/action_page.php"
Comments
Post a Comment