Forms in HTML:
HTML forms is used
to collect the information from the user visiting the website. <form> tag
is used to define the FORM in HTML.
Syntax:
<form action="server url" method="get|post">
//forms
element i.e. input controls
</form>
Attribute of Forms tag:
Action
Attribute:
The action attribute of forms points to the URL (address) of the program
on the web server that will process the data captured and sent back. It is used
to defines the action to be performed when the form is submitted.
Eg: <form action="index.php">
The Target
Attribute
The target attributes display the responses. It will
show up the response page.
Ex: <form action="index.php" target="_blank"> (here _blank will open the response in new
browser tab)
Name:
It is the form name used by scripting language.
The Method
Attribute
The method attribute specifies the method used to send
the data captured by various form elements back to the web server.
<form action="indexpage.html" method="get"> : it is
used to display the submitted data in URL.
<form action="indexpage.html" method="post"> : it is used to process the sensitive data. It does not display the submitted
data in URL. It send the captured data to the web server.
A demo form interface
Form elements:
The form elements are used to capture the
data from the user. <INPUT> element is used to display the data in
several ways, depending on the type attributes.
Syntax: <input type = “Element_type”
Name = name id = “value”>
Ex: Name: <input type = “text” Name
= “myName” id = “Name”>
|
Element TYPE = “ ” |
Description |
|
text |
Defines a single-line text input field |
|
TextArea |
Used to defines multiline text entry field |
|
Select Dropdown list/ list box |
Used to define drop down or list box in html |
|
password |
Defines a password input field |
|
submit |
Used to define a submit button |
|
reset |
Used to defines a reset button to reset all values in the form |
|
radio |
Used to defines a radio button which allows select one option. |
|
checkbox |
Used to defines checkboxes which allow select multiple options form. |
|
button |
Defines a simple click-able button, which can be programmed to perform a task
on an event. |
An example of HTML FORM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2> HTML FORMS </h2>
<h2>Registration </h2>
<form>
Name: <input type="text" name = "myName"><br>
Address: <input type="text" name = "myAddress"><br>
Password:<input type="password" name = "myPass"><br>
Gender: <input type="radio" name="mygender" value = "male"> Male
<input type="radio" name="mygender" value = "female">Female
<input type="radio" name="mygender" value = "other">Others
</br>
<h2>
Choose the subjects:</h2> <br>
<input type="checkbox" name="Subject" value = "Computer"> Computer
Science <br>
<input type="checkbox" name="Subject" value = "BStudies">
Business Studeies <br>
<input type="checkbox" name="Subject" value = "BMaths">
Business Maths <br>
<input type="checkbox" name="Subject" value = "Account">
Account <br>
<h3>choose
your stream</h3>
<select name = "stream">
<option value = "Science">
Science</option>
<option value = "Management"> Management</option>
<option value = "Education">
Education</option>
</select><br>
Date: <input type = "date" value = "date"><br>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Reset">
</form>
</body>
</html>