input type='tel' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:input

Introduction

The tel type value sets the input element to accept only input that is a valid telephone number.

The type supports the additional attributes shown in the following table.

Attribute
Description
New in HTML5
list

set the id of a datalist element that provides values for the
element.
Yes

maxlength

set the maximum number of characters that the user can enter
into the text box.
No

pattern

set a regular expression pattern for the purposes of input
validation.
Yes

placeholder
set a hint to the user as to the kind of input that you expect.
Yes
readonly

makes the text box read-only, and the user
cannot edit the content.
No

required

set that the user must provide a value for the purposes of input
validation.
Yes

size

set the width of the element, expressed as the number of
characters that are visible in the text box.
No

value
set the initial value for the element.
No

Using the email, tel, and url input Types

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form method="post" action="http://example.com/form"> 
         <p> 
            <label for="name">
                Name: <!--from  w w w  .  java  2 s. c om-->
               <input value="java2s.com" id="name" name="name"> 
            </label> 
         </p> 
         <p> 
            <label for="password">
                Password: 
               <input type="password" placeholder="Min 6 characters" id="password" name="password"> 
            </label> 
         </p> 
         <p> 
            <label for="tel">
                Tel: 
               <input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"> 
            </label> 
         </p> 
         <input type="submit" value="Submit Vote"> 
      </form>  
   </body>
</html>

Related Tutorials