{"id":110803,"date":"2021-02-25T16:33:59","date_gmt":"2021-02-25T11:03:59","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=110803"},"modified":"2024-04-12T14:31:16","modified_gmt":"2024-04-12T09:01:16","slug":"text-input-control-3","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/text-input-control-3\/","title":{"rendered":"Text Input Control"},"content":{"rendered":"\n

Three types of text input are present in HTML single-line text boxes which are also called as text fields, password input and multiple-line text areas.<\/p>\n\n\n\n

Single-Line Text Fields<\/strong><\/p>\n\n\n\n

It is the basic type of text input control and is a blank space, resembling a box, which can have only a single line of text. Usually, they are preceded by description detailing what to enter in the box as shown<\/p>\n\n\n\n

HTML code<\/strong> <form action=\u201c\/process.php\u201d method=\u201cget\u201d> First name: <input type=”text” \/><br \/> Last name: <input type=”text” \/> <\/form><\/td>Browser output<\/strong> \"Text   <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Usually text fields used in web pages are single-line white spaces that appear slightly indented in the page. The size attribute specifies the amount of characters in text field control and their default value usually is 20 characters. But, it depends on the font size of the browser as text may appear larger or smaller.<\/p>\n\n\n\n

Attributes for Text Fields are<\/p>\n\n\n\n

name<\/strong> – It identifies the control for correct processing and data transfer. It isn\u2019t displayed when the form is viewed in browser. It should be unique and is case-sensitive.<\/p>\n\n\n\n

size<\/strong> It specifies the length of the text field in characters and value is a number.<\/p>\n\n\n\n

maxlength<\/strong> \u2013 It specifies the maximum number of characters that can be entered in the text field by the user and value is a number.<\/p>\n\n\n\n

value<\/strong> It defines what text, if any, should be present within the text field when it\u2019s initially displayed on the page.<\/p>\n\n\n\n

A sample form with input text controls and its attributes is shown<\/p>\n\n\n\n

HTML code<\/strong> <form action=\u201c\/process.php\u201d method=\u201cget\u201d> <input type=”text” name=”FirstName” value=”Enter First Name” \/><br \/> <input type=”text” name=”LastName” value=”Enter Last Name” size=”20″\/> <\/form><\/td>Browser output<\/strong> \"Text <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

When the web page is viewed, user can erase the phrase before entering information.<\/p>\n\n\n\n

Password Text Fields<\/strong><\/p>\n\n\n\n

It is similar to the regular text field but is exclusively used to input passwords as the text entered in it is shown as bullets instead of plain text. It is a form of single-line text input control created using an <input> element whose type attribute has a value of password as shown<\/p>\n\n\n\n

HTML code<\/strong> <form action=\u201c\/process.php\u201d method=\u201cget\u201d> Username: <input type=”text” name=”UserName”><br \/> Password: <input type=”password” name=”Password”> <\/form><\/td>Browser output<\/strong> \"Text <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

This input control prevents others to look over the user\u2019s password. The actual password is not encrypted.<\/p>\n\n\n\n

Multiple-Line Text Areas<\/strong><\/p>\n\n\n\n

It uses <textarea> tag to input more than a single line of text from users. To specify the size of the text area, the tag uses the cols and rows attributes<\/p>\n\n\n\n