HTML Form


A form is simply an area that can contain form fields.

Form fields are objects that allow the visitor to enter information – for example text boxes, drop-down menus or radio buttons.

When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server. However, there are exceptions.

The HTML of a form consists of a form tag enclosing tags for various form controls, including text entry fields, various buttons, a file selection control, and menus. (You are probably familiar with all of these from pages you have visited.) The user types in the text fields, clicks on the buttons and selects items from the menus. Finally, the user submits the form, usually by clicking on a special submit button.

*openging <form> and closeing </form> tag.

Form Attributes

List of <form> tag’s attributes
method Sends the information out mainly used for posting purposes.
action Giving the form a direction of where to go. It can be an email, a html-page (on your or another site), a PHP or ASP Script etc.
name Giving the form a name, requires for work with the form from scripts.
enctype This item is mainly used when performing the mailto action. It determines the type of email to send. It can send it in the format of a text/plain style. It’s optional attribute.
target Name of window of frame where result of form data processing will be loaded. May have a values:_blank – new page will be loaded in new window._self – new page will be loaded in current window (default value).
 <form method="post" action="mailto:[email protected]"></form>

This example above is the minimum and just using the mailto part as if you are sending an email. It can be used in other ways like for search engines or you can have it within the form send out an email directly to whomever you wish to have it sent off to. Look below and I will show you a brief sample as far as how it will work using PHP as part of the tool and then one with CGI. Keep in mind the urls are not real so do not look for them.

 <form method="post" action="www.fastlearning.in" name="newform" target="_blank">
    Form Data here
   </form>

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form:


Single-line text input controls

You can put in a single line of words into this. Mainly the input style is needed. Believe it or not, outside of the <form> tag, this is probably one of the most important aspects of it.

Attributes

Required
  • Input – the key tag in getting it started. Most tags require an end tag but in HTML, it isn’t needed.
  • Type – Indicates the type of input control and for text input control it will be set to text.
  • Name – Used to give a name to the control which is sent to the server to be recognized and get the value.
  • Value – This can be used to provide an initial value inside the control.
Optional
  • Maxlength – Allows to specify the maximum number of characters a user can enter into the text box.
  • Size – Allows to specify the width of the text-input control in terms of characters.

Example of Single-line text input controls

<input type="text" name="text2" size="50" value="Enter Name">
<input type="text" name="text2"  maxlength="10" size="30" placeholder="Enter Name">
Output



Top

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.

Attributes

Required
  • Input – the key tag in getting it started. Most tags require an end tag but in HTML, it isn’t needed.
  • Type – Indicates the type of input control and for password input control it will be set to password.
  • Name – Used to give a name to the control which is sent to the server to be recognized and get the value.
  • Value – This can be used to provide an initial value inside the control.
Optional
  • Maxlength – Allows to specify the maximum number of characters a user can enter into the text box.
  • Size – Allows to specify the width of the text-input control in terms of characters.

Example

 <input type="password" name="password">
 <input type="password"  maxlength="5" name="password" size="10">
Output



Top

Multiple-Line Text Input Controls

The main purpose of the <textarea tag is to create a window that can be adjusted. It can be adjusted by not height and width. This tag is really not overly complex to figure out and there really isn’t a lot to say about it. This in my honest opinion is one of the easiest items to learn as far as creating forms go.

List of <textarea> tag attributes
Textarea Basic tag needed for this format. Close tag is needed.
name Used for the header of the form.
cols Mainly used for width purposes. Width in symbols.
rows Mainly used for height purposes. Height in symbols.
readonly Text area can not change by user.

Example

<form>
message
<textarea name="message" cols="30" rows="5" > 
Hello World !
</textarea>
<form>
Output
message

Top

Checkboxes Controls

Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.
OR
The checkbox mainly is used for selecting multiple options at one time. It’s used in surveys online and can be used for any type of form. If you have interests of course, fill free to make them and have them filled out.

List of <input type="checkbox"> tag’s attributes
type="checkbox" Determines the type of <input> element.
name Gives checkbox a name.
value Set a value of a checkbox.
checked Activate a checkbox.
disabled Disable a checkbox

Example

<input type="checkbox" name="sports" value="fl"> FL
<input type="checkbox" name="sports" value="ac"> AC
Output
            FL
            AC

Example( Activated and Disabled checkbox )

 <input type="checkbox" name="check" value="Checkbox 1"> 
  Just the checkbox

 <input type="checkbox" name="check" value="Activated Checkbox" checked> 
  The activated checkbox

 <input type="checkbox" name="check" value="Disabled checkbox" disabled> 
  The disabled checkbox

 <input type="checkbox" name="check" value="Checkbox 1" checked disabled>
 The activated and disabled checkbox
Output
            Just the checkbox
            The activated checkbox
            The disabled checkbox
            The activated and disabled checkbox

Top

Radio Box Controls

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

List of <input type="radio"> tag’s attributes
type="radio" Determines the type of <input> element.
name Gives radio a name.
value Set a value of a radio.
checked Activate a radio.
disabled Disable a radio

Example

           <input type="radio" name="india" value="1958"> 1958
           <input type="radio" name="india" value="1964"> 1964
Output
            1958
            1964

Example( Activated and Disabled Radio )

<input type="radio" name="check" value="Activated radio" checked> 
  The activated radio

<input type="radio" name="check" value="Disabled radio" disabled> 
  The disabled radio
Output
 The activated radio
 The disabled radio

Top

Hidden Controls

This is the part of the form that you can invisible to the viewer but not to you. By that mean, you have that coded in and isn’t visible to the browser at all. This one requires every item used. All the attributes are used and can be useful depending on the purpose you have exactly.

Attribute
  • Input – just something to show that it’s apart of a form and that’s it.
  • Type – tells you the type of input that you are planning to use.
  • Name – sends data and is the information sent through the Internet.
  • Value – it’s purpose is to dictate what type of value it has.

For this purpose, I will show you the hidden value in all of the <input> tags. Much like in all tutorials using the <input>, it has no end tag.

Example of Hidden Data in Forms

           <input type="hidden" name="admin" value="2">Hidden
Output
  Hidden 

Top

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.

AttributeDescription
nameUsed to give a name to the control which is sent to the server to be recognized and get the value.
acceptSpecifies the types of files that the server accepts.

Example

 <input type="file" name="fileupload" accept="image/*">
Output

Top

Select Box Controls

A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options.

Attributes

Following is the list of important attributes of <select> tag:

AttributeDescription
nameUsed to give a name to the control which is sent to the server to be recognized and get the value.
sizeThis can be used to present a scrolling list box.
multipleIf set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of <option> tag:

AttributeDescription
valueThe value that will be used if an option in the select box box is selected.
selectedSpecifies that this option should be the initially selected value when the page loads.
labelAn alternative way of labeling options

Example

        <select name=”Intro”>
            <option>HTML</option>
            <option>CSS</option>
            <option>JAVASCRIPT</option>
        </select>
Output
List with multiple selection
        <select name=”Intro” multiple>
            <option>HTML</option>
            <option>CSS</option>
            <option>JAVA</option>
            <option>JAVASCRIPT</option>
            <option>VISUAL BASIC</option>
        </select>
Output

Top

Submit and Reset Button

There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. The type attribute can take the following values:

TypeDescription
submitThis creates a button that automatically submits a form.
resetThis creates a button that automatically resets form controls to their initial values.
buttonThis creates a button that is used to trigger a client-side script when the user clicks that button.
imageThis creates a clickable button but we can use an image as background of the button.

Example

          <form name="example" >
           <input type="button" name="ok" value="ok">    
           <input type="submit" name="submit" value="Submit" >
           <input type="reset"  name="reset"  value="Reset" >
           <input type="image"  name="imagebutton"  src="./../logo.png" >
          </form>
Output
  

Share this article on