The text fields or text areas are form fields with <input type=”text”/ > for small fields or <textarea></textarea> for larger fields (text boxes).

The text type uses size, value, maxlength attributes which define the size of text fied, default value of text box and maximum length of characters which can be added to text box respectively. The textarea is a multiline text box which takes multiple lines such as address, etc... It uses rows and cols attributes which define the size of the textarea.

Syntax for text boxes

<!--- Creates text box with size of 25 characters to which 100 characters can be added to a maximum. Default value is Enter name ----->
<input type=”text” size=25 maxlength=”100” value=”Enter name” />

<!--- Creates  textarea with 5 rows and 50 columns with default vale as Enter address --->
<textarea rows=”5” cols=”50”>content</textarea>

Data validation of text field

JavaScript in combination with the HTML5 new input types can be useful for input data validation.

Text fields basically accept number and string inputs that are used in forms for getting data like name, password, date, email address, etc... The validity of the data entered in the form fields can be checked at the browser level by using JavaScript. This requires less time and is more effective than checking it at the server. The typical checks that can be done on fields are: verifying if a field is left empty, the email id is valid, password is strong or not, the fields such as date are valid or contains string , etc...

The HTML 5 has introduced many input types that helps in text field validation at browser level. Through they are not widely supported in all browsers yet, glimpse of them are given below:

  • color : This input type shows a set of color for the user to pick.

<input type=”color” name=”dress”>

  • date : Input should contain date.

<input type=”date” name=”birthday” min=”1980-05-01”>

  • datetime: Allows user to select date and time with time zone.

<input type=”datetime” name=”birthday”>

  • email : Allows user to input valid email address.

<input type=”email” name=”email”>

  • month : Allows user to select month and year.

<input type=”month” name=”bdayMonth”>

  • number : Takes number input. When defined with min and max range, it will show an alert to user if the validity check fails, and does not send data to server.

<input type=”number” min=”1” max=”100” step=”2”>

  • range : This type gives a range for the input fields.

<input type=”range” min=”1” max=”100” >

  • search: Used for search fields. It behaves like regular text fields.

<input type=”search” name=”find”>

  • tel : Accepts telephone numbers

<input type=”tel” name=”phNo”>

  • time : Allows user to select time without time zone

<input type=”time” name=”schooltime”>

  • url : Accepts url address.

<input type=”url” name=”homePage”>

  • week: Selects week number and year.

<input type=”week” name=”weekNum”>

For browsers such as IE 9 and previous versions where the above functionality is not completely supported, user can add handlers for events such as focus, blur …etc and can validate the fields.

In the below example, the telephone number should contain only numbers. Any other input triggers an alert saying input is invalid. When the input field changes the event checkNum is triggered. It checks against d if the input is number it returns true. Else, background color of the field is changed and alert is popped.

Basic example of input types and JavaScript

 

›› go to examples ››