Login
Password

Forgot your password?

How to Create Your Form Using HTML

By Edited Nov 13, 2013 0 0

How to use HTML Form

Form is a feature of HTML (Hyper Text Markup Language) that allows the user to input data through HTML documents. HTML offers this mechanism to send information by uploading it to a web server. However, for a form to be processed, a program called Common Gateway Interface (CGI) script must be running on the Web server. CGI is a script program that allows the users to interact with a Web server. This script can be written in most computer languages.

 To create a form, the <FORM> tag is used. It is a non-empty tag and has two attributes associated with it.

Method:    Can be specified as GET (default) or POST (preferred)
                     GET – attaches the input to the ACTION URL
                     POST – sends the in   put in a data body separately

Action:      Specifies the path of the CGI script used to process the form.

 

The <INPUT> tag is used to specify which input fields are available in the form <INPUT> tag is an empty tag with three attributes.


TYPE:          This is set to TEXT, indicating a single text input fields. There are other types like RADIO for radio button, CHECKBOX for checkbox, BUTTON for button etc.

 

NAME:       This is a variable name for the text field that the author must specify.

SIZE:           This is the width of the TEXT field.

Let us create a basic form using the <FORM> and the <INPUT> tag.

Codes:
<html>

<head>

<title>Forms</title>

</head>

<body>

<h3>Simple Form</h3>

<form method="post">

Enter the name

<input name="name" type="text" size="50" />

Enter the e-mail

<input name="email" type="text" size="50" />

</form>

</body>

</html>

The various values available for the <INPUT> tag are listed below.

TEXT:                          Specifies a text-entry field.
SIZE:                           Specifies the width of a text field in characters.

MAXLENGTH:          Specifies the maximum number of characters to be accepted.

CHECKBOX:              Specifies a single toggle on or off

RADIO:                      Specifies a single toggle on or off

CHECKED:                 Specifies the element checked

VALUE:                      Indicates the user entered value

NAME:                       Specifies the name of the field

SUBMIT:                    Uploads the form to the server

RESET:                       Resets form fields to defaults


The <SELECT> tag is used for creating lists and formatting the text fields. There are four attributes associated with the <SELECT> tag.

 

MULTIPLE:                Indicates the number of elements in a list that can be displayed.

SIZE:                           Determines the number if items to be displayed in a list

OPTION:                   Defines each value within <SELECT> tag

NAME:                       Indicates the name of the field.

 

The <TEXTAREA> tag is used as a text entry field with multiple rows. There are three attributes associated with the <TEXTAREA> tag.

 

ROWS:                       Specifies the height of the text field in characters.

COLS:                                      Specifies the width of the text field in characters.

NAME:                       Specifies the name of the field.

Now let us create a form involving all the above tags.

 

Codes:

<html>

<head>

<title>Forms</title>

</head>

<body>

<h3>Admission Form</h3>

<form method="post">

<p><strong>First Name</strong>

<input name="Fname" type="text" size="50" />

</p>

<p><strong>Last Name</strong>

<input name="Lname" type="text" size="50" />

</p>

<p><strong>Address</strong>

<input name="address" type="text" size="100" />

</p>

<p><strong>Sex:</strong> Male

  <input name="sex" type="radio" value="male">

  Female

  <input name="sex" type="radio" value="male">

</p>

<p><strong>Interest (Select more than one if applicable) </strong></p>

<blockquote><blockquote>

  <label>

  <input type="checkbox" name="music">Music<br>

  </label>

    <label>

  <input type="checkbox" name="sports">Sports<br>

  </label>

    <label>

  <input type="checkbox" name="science">Science<br>

  </label>

    <label>

  <input type="checkbox" name="others">Others<br>

  <br>

  </label>

</blockquote></blockquote>

<p><strong>Designation</strong>

    <select name="designation">

      <option>Executive

      <option>Manager

      <option>Director

      <option>Programmer

    </select>

</p>

<p><strong>Select Software which you are using</strong></p>

<select  multiple="multiple" name="software" size="5">

     <option>Windows NT

     <option>Windows 95/98

     <option>PHP

     <option>Sql Server

     <option>Office 2010

     <option>Adobe Photoshop

     <option>C++

     <option>Front Page

  </select>

</form>

</body>

</html>

 


Advertisement

Comments

Add a new comment - No HTML
You must be logged in and verified to post a comment. Please log in or sign up to comment.

Explore InfoBarrel

Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
© Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

Follow IB Technology