Telefono e posta elettronica di input di testo

Descrizione

tel type input consente all'utente di inserire il numero di telefono.

email typel'attributo in input accetta solo il valore dell'email. Questo tipo viene utilizzato per i campi di input che dovrebbero contenere un indirizzo e-mail.

Esempio

L'esempio seguente mostra l'uso del telefono e dell'input e-mail in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <form>
         <h2>Telephone Input Example</h2>
         <label for = "src">Telphone Input</label>
         <input type = "tel" id = "src" data-clear-btn = "false">
         
         <label for = "src1">Clear the Telephone Field</label>
         <input type = "tel" data-clear-btn = "true" id = "src1">

         <h2>Email Input Example</h2>
         <label for = "src2">Email Input</label>
         <input type = "email" id = "src2" data-clear-btn = "false">
         
         <label for = "src3">Clear the Email Field</label>
         <input type = "email" data-clear-btn = "true" id = "src3">
      </form>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come textinput_telephone_email.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/textinput_telephone_email.html e verrà visualizzato il seguente output.