Customising Input Fields

The <input /> tag has more than three attributes. It allows you to check the visitor's input. In this way, you can specify whether the field is mandatory, the types of characters permitted, and even the exact number of characters to be entered.

Here is an overview of all the attributes that can be assigned to input fields:

• value: This is the field's default value, which is automatically displayed when the visitor reaches the page.
  
  
• size: This is the length of the displayed field. You can limit it to a few characters while still allowing visitors to enter more data.
  
  
• maxlength: This is not to be confused with the size attribute. It specifies the maximum number of characters that a visitor can enter in the field.
  
  
• format: This defines the character types allowed in the field. The codes are used to define each character type in the field:
  
  
. X: capital letters only.

. x: small letters only.

. A: capital letters and punctuation marks.

. a: small letters and punctuation marks.

. M: capital letters, digits and punctuation marks.

. m: small letters, digits and punctuation marks.

. N: digits.


• emptyok: This defines whether or not the field is mandatory. To make it mandatory, assign to the attribute the value TRUE. To make it non mandatory, assign the value FALSE.
  
  

By using a few of these attributes, you can, for instance, create an area for password input. Here, we have created an eight-character field to receive a password made up of four digits and four letters:

<p>
Password:<br/>
<input type="password" maxlength="8" title="Password" name="Password" format="XXXXNNNN"/>
</p>

This is what the result will look like on a mobile screen:



Figure 2: Password input