Form Controls - How to create a website
Create a website RSS feed

Form Controls

Form Controls

Last update on: 07-12-2008
This section covers the different types of form controls that you can use to collect data from a visitor to your site. You will see:

Text Inputs:
the equivalent of a text input is a box or line that you are allowed to write a response in or on. There are actually three types of text input used on forms:

Single-Line Text Input Controls:

Single-line text input controls are created using an <input> element whose type attribute has a value of text.


AttributePurpose
typeIndicates the type of input control you want to create. The value for this attribute should be text when you want to create a single-line text input control. This is required because the <input> element is also used to create other form controls such as radio buttons and checkboxes.
nameUsed to give the name part of the name/value pair that is sent to the server, representing each form control and the value the user entered. Each control needs to have a name so that the associated value (supplied or chosen by the user) can be retrieved individually at the other end.
valueProvides an initial value for the text input control that the user will see when the form loads. You need to use this attribute only if you want something to be written in the text input when the page loads (such as a cue for what the user should be entering); more often you are likely to leave it blank.
sizeAllows you to specify the width of the text-input control in terms of characters so that the search box in the earlier example is 20 characters wide. The user is allowed to enter more characters than specified as the value of the length attribute (so in this case the user could search on words with more than 20 characters), in which case the browser should allow some way for the user to scroll along their entry; this is commonly done through the use of arrow keys.
maxlengthAllows you to specify the maximum number of characters a user can enter into the text box. Usually after the maximum number of characters has been entered, even if the user keeps pressing more keys, no new characters will be added.
When an <input> element's type attribute has a value of text, it can also carry the following attributes:
  • All of the universal attributes
  • disabled, readonly, tabindex, and accesskey.

Password Input Controls:

If you want to collect sensitive data such as passwords and credit card information, you should use the password input. The password input masks the characters the user types on the screen by replacing them with either a dot or asterisk.
Password input controls are created almost identically to the single-line text input controls, except that the type attribute on the <input> element is given a value of password.


While passwords are hidden on the screen, they are still sent across the Internet as clear text. In order to make them secure you should use an SSL connection between the client and server.

Multiple-Line Text Input Controls:

If you want to allow a visitor to your site to enter more than one line of text, you should create a multiple-line text input control using the <textarea> element. 
<form action="http://www.example.org/feedback.php" method="post">
Please tell us what you think of the site and then click submit:<br />
<textarea name="txtFeedback" rows="20" cols="50">

Enter your feedback here.
</textarea>
<br />
<input type="submit" value="Submit" />

</form>

Note that the text inside the <textarea> element is not indented. Anything written between the opening and closing <textarea> tags is treated as if it were written inside a <pre> element and formatting of the source document is preserved. If the words “Enter your feedback here” were indented in the code, they would also be indented in the resulting multi-line text input on the browser.
AttributePurpose
nameThe name of the control. This is used in the name/value pair that is sent to the server.
rowsUsed to specify the size of a textarea, it indicates the number of rows of text a textarea element should have and therefore corresponds to its height.
colsUsed to specify the size of a textarea; here it specifies the width of the box and refers to the number of columns. One column is the average width of a character.

Buttons:

Buttons are most commonly used to submit a form, although they are sometimes used to clear or reset a form and even to trigger client-side scripts.


Using Images for Buttons:
<input type="image" src="submit.jpg" alt="Submit" name="btnImageMap" />

Creating Buttons Using the <button> Element:


Checkboxes:
Checkboxes are just like the little boxes that you have to check on paper forms. Like light switches, they can be either on or off. When they are checked they are on and the user can simply toggle between on and off positions by clicking the checkbox.


Radio Buttons:
Radio buttons are similar to checkboxes in that they can be either on or off, but there are two key differences:


Select Boxes:
A drop-down select box allows users to select one item from a drop down menu. Drop-down select boxes can take up far less space than a group of radio buttons.


Grouping Options with the <optgroup> Element:
If you have a very long list of items in a select box, you can group them together using the <optgroup> element, which acts just like a container element for all the elements you want within a group.


Hidden Controls:
Sometimes you will want to pass information between pages without the user seeing it. Hidden form controls remain part of any form, but the user cannot see them in the Web browser. They should not, however, be used for any sensitive information you do not want the user to see because the user could see this data if she looked in the source of the page.


Designing Forms's lessons:

Understanding Forms
Form Controls
Form Design Templates

Banner Home |  Services | Contact |  ©2009 http://www.iteachweb.net/