What HTML forms are and how to use them?

JavascriptWeb DevelopmentFront 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.
raja
Published on 07-Feb-2018 11:25:37
Advertisements