What HTML forms are and how to use them?
HTML Forms are needed to collect some data from the site visitor. For example, collecting information about a student like a name, age, address, marks, etc, while he/she is registering on the college website.
A form takes input from the site visitor and posts it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application performs required processing on the passed data based on defined business logic inside the application.
The HTML <form> tag is used to create a form in HTML.
As shown above, we have used some attributes. Here are the form attributes
HTML Form Attributes
Here are the attributes of HTML form,
S.No | Attribute & Description |
1 | Action Backend script ready to process your passed data.
|
2 | Method Method to be used to upload data. The most frequently used are GET and POST methods.
|
3 | Target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
|
4 | Enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file etc.
|
HTML Form Controls
Different types of form controls are available to collect data such as text input, checkbox, radio box, file select box, submit button, etc.
Let’s see a simple example to get user input with <input> tag in an HTML form:
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form>
Student Name: <input type = "text" name = "sname" /><br>
Student Subject: <input type = "text" name = "ssubject" />
</form>
</body>
</html>
With the above code, get user input for name and subject.
We have used the attributes type and name. Let’s see all other attributes for <input> tag,
Sr.No
| Attribute & Description |
1 | type Indicates the type of input control and for text input control it will be set to text.
|
2 | name Used to give a name to the control which is sent to the server to be recognized and get the value
|
3 | value This can be used to provide an initial value inside the control.
|
4 | size Allows specifying the width of the text-input control in terms of characters
|
5 | maxlength
Allows specifying the maximum number of characters a user can enter into the text box.
|
Published on 07-Feb-2018 11:25:37
