HTML Form Textbox Control

The textbox control is used to take information from the user. The textbox control can be placed in the form by setting the form type attribute value to text as mentioned below.

<input type=”TEXT” name=”username” value=”default”>

Size

The default width of textbox is 20 characters which the user can see without using any arrows keys but the user can enter as many characters as many as he or she wants to enter in it.

   1:  <html>
   2:  <head>
   3:  <title>
   4:  The form textbox control 
   5:  </title>
   6:  </head>
   7:  <body>
   8:  <form name="form1">
   9:  Text box defautlt size
  10:  <input type="TEXT"><br>
  11:  Text box with size of 15 characters
  12:  <input type="TEXT" size="15">
  13:  </form>
  14:  </body>
  15:  </html>

image

Maxlength

As discussed earlier, there is no restriction on user input in the textbox but it can be handled using the maxlength attribute. The maxlength attribute take numeric value which specifies the maximum number of charters user is allowed to enter in the textbox.

   1:  <html>
   2:  <head>
   3:  <title>
   4:  The form textbox control 
   5:  </title>
   6:  </head>
   7:  <body>
   8:  <form name="form1">
   9:  Text box defautlt size
  10:  <input type="TEXT"><br>
  11:  Text box with size of 15 characters
  12:  <input type="TEXT" size="15"><br>
  13:  FIrst Name ( Maxlength - 9 )
  14:  <input type="TEXT" size="15" maxlength="9">
  15:  </form>
  16:  </body>
  17:  </html>

image

As you can see in the last example, the size of the last textbox is 15 in size but user can input maximum value of 9 characters which could be number, characters symbols because we haven’t applied any validation criteria on it.

Value

The value attribute is used to set the default value in the textbox. The value attribute take the input value and display the same in the textbox when the browser loads the form.

   1:  <html>
   2:  <head>
   3:  <title>
   4:  The form textbox control 
   5:  </title>
   6:  </head>
   7:  <body>
   8:  <form name="form1">
   9:  FIrst Name
  10:  <input type="TEXT" size="15" maxlength="9" Value="Adam Khan">
  11:  </form>
  12:  </body>
  13:  </html>

image

Tags: , , , , , , ,

Author: Revo

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *

17 − 3 =

 

Pin It on Pinterest

Shares
Share This