What HTML forms are and how to use them?

Javascript Web Development Front End Scripts

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.