How To Create Text and Password Fields in HTML

This is descriptive note about how to create text field and password field in HTML form. This note contains description of all attributes of text field and password field.

HTML Form's Text and Password Fields Example

First I am telling you about text field and then after about password field.

1. <input type="text" />

This HTML tag creates one textbox. In textbox you can type anything and it is visible to us.

Syntax of text field:


<form>
 <input type="text" />
</form>

Text field contains following most common used attributes:

name
maxlength
readonly
size
value

Let's begin with first attribute:

name attribute:

This is common attribute for all HTML tags. This attribute just defines name of text field in the form.

For example:


<form>
 <input type="text" name="username" />
</form>

maxlength attribute:

This attribute defines maximum length of text field. For example, if you give maxlength=10 then you can type only maximum 10 characters.

For example:


<form>
 <input type="text" maxlength="10" />
</form>

readonly attribute:

This readonly attribute defines read only behaviour of textbox. i.e. you can not type anything in the textbox which has readonly="readonly" attribute set.

For example:


<form>
 <input type="text" readonly="readonly" />
</form>

size attribute:

This attribute defines size of textbox. This attribute is similar to width.

For example:


<form>
 <input type="text" size="30" />
</form>

value attribute:

Value attribute sets value to the textbox. If you set text/string to value attribute then it is displayed in the textbox.

For example:


<form>
 <input type="text" value="Username" />
</form>

2. <input type="password" />

This HTML element creates one textbox. If you type any text in the textbox then it is not visible. It is displayed as disc or star character.

Syntax of password field:


<form>
 <input type="password" />
</form>

Password field has following most common attributes:

name
maxlength
size

These attributes are already discussed in above text field tutorial.

Example of text and password fields:

   
<html>
 <body>
  <form>
  Username:
  <input type="text" maxlength="10" name="uname" size="20" 
   value="Username" /><br /><br />
  Password:
  <input type="password" maxlength="10" name="pwd"  size="30" />
  </form>
  </body>
</html>

OUTPUT:

Video Tutorial:

Saturday 1 March 2014