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

 <form method="post" action="mailto:someone@someone.com"></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:

• Text Input Controls
  • Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
  • 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.
  • Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
• Checkboxes Controls
• Radio Box Controls
• Hidden Controls
• File Select boxes
• Select Box Controls
• Submit and Reset Button

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

• 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.

• 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

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

• 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.

• 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

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.

Example

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

Output

message
 
Hello World !

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.

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

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.

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

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.

• 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 

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.

Example

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

Output

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.

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

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

Example

        <select name=”Intro”>
            <option>HTML</option>
            <option>CSS</option>
            <option>JAVASCRIPT</option>
        </select>

HTMLCSSJAVASCRIPT

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

HTMLCSSJAVAJAVASCRIPTVISUAL BASIC 

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:

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