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
- 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.