---

Text Input Controls

There are three types of text input used on forms −

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

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.

Example

Here is a basic example of a single-line text input used to take first name and last name −

<form>
    First name: <input type = "text" name = "first_name" > <br>
    Last name: <input type = "text" name = "last_name" >
</form>

Live Preview

Attributes

Following is the list of attributes for <input> tag for creating text field.

Attribute	Description
type	This attribute is required, and indicates 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. The attribute is required because the input element is also used to create other form controls such as radio buttons and checkboxes.
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. If you leave this attribute out, the text field begins empty.
size	Allows to specify the width of the text-input control in terms of characters. i.e This attribute determines the number of characters that are displayed.
maxlength	Allows 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.
id	The id attribute creates an identifier for the field. When you use a programming language to extract data from this element, use id to specify which field you're referring to. An id field often begins with a hint phrase to indicate the type of object it is (for instance, nametxt indicates a text box).

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it.

While passwords are hidden on the screen, they are still sent across the Internet as clear text, which is not considered very secure. In order to make them secure you should use an SSL connection between the client and server and encrypt any sensitive data (such as passwords and credit card details).

Example

Here is a basic example of a single-line password input used to take user password −

<form>
    User ID : <input type = "text" name = "user_id" > <br>
    Password: <input type = "password" name = "password" >
</form>

Live Preview

Attribute	Description
type	type attribute 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	value attribute can be used to provide an initial value inside the control.
size	size attribute allows us t to specify the width of the text-input control in terms of characters.
maxlength	Allows to specify the maximum number of characters a user can enter into the text box.

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>
 Description : <br>
 <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
 </textarea>
</form>

Live Preview

Attributes

Following is the list of attributes for the <textarea> tag.

Attribute	& Description
name	Used to give a name to the control which is sent to the server to be recognized and get the value.
rows	Indicates the number of rows of text area box.
cols	Used to specify the size of a <textarea>; it specifies the number of columns of text and therefore corresponds to the width of the box. One column is the average width of a character.

---