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 | ActionBackend script ready to process your passed data. |
2 | MethodMethod to be used to upload data. The most frequently used are GET and POST methods. |
3 | TargetSpecify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. |
4 | EnctypeYou 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
<!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 | typeIndicates the type of input control and for text input control it will be set to text. |
2 | nameUsed to give a name to the control which is sent to the server to be recognized and get the value |
3 | valueThis can be used to provide an initial value inside the control. |
4 | sizeAllows 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. |