Wednesday, November 13, 2013

Text Input Controls in HTML Forms

There are actually three types of text input used on forms:
  1. Single-line text input controls: Used for items that require only one line of user input, such as search boxes or names. They are created using the <input> element.
  2. Password input controls: Single-line text input that mask the characters a user enters.
  3. Multi-line text input controls: Used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created with the <text area> element.
Single-line text input controls:
Single-line text input controls are created using an <input> element whose type attribute has a value of text.
Here is a basic example of a single-line text input used to take first name and last name:

<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" />
</form>

This code will produce the following output:
First name:
Last name:
Submit button
Following is the list of attributes for <input> tag.

type: Indicates the type of input control you want to create. This element is also used to create other form controls such as radio buttons and checkboxes.

name: Used 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.

value: Provides an initial value for the text input control that the user will see when the form loads.

size: Allows you to specify the width of the text-input control in terms of characters.

maxlength: Allows you to specify the maximum number of characters a user can enter into the text box.

No comments:

Post a Comment