Computer >> Computer tutorials >  >> Programming >> Javascript

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.

What HTML forms are and how to use them?

As shown above, we have used some attributes. Here are the form attributes

HTML Form Attributes

Here are the attributes of HTML form,

S.NoAttribute & Description
1ActionBackend script ready to process your passed data.
2MethodMethod to be used to upload data. The most frequently used are GET and POST methods.
3TargetSpecify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
4EnctypeYou 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
1typeIndicates the type of input control and for text input control it will be set to text.
2nameUsed to give a name to the control which is sent to the server to be recognized and get the value
3valueThis can be used to provide an initial value inside the control.
4sizeAllows specifying the width of the text-input control in terms of characters
5maxlength
Allows specifying the maximum number of characters a user can enter into the text box.