Come utilizzare questo specifico attributo?
Semplice, come puoi vedere dal form qui sotto non devi fare altro che inserire l'attributo seguito dalle informazioni che vuoi rendere all'utente, in questo caso un numero di telefono con delle specifiche di inserimento:
<form action="contatti.php">
<label for="phone">Inserisci Telefono:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<small>Format: 123-45-678</small><br><br>
<label for="cognome">Inserisci Cognome</label><br><br>
<input type="text" name="cognome" id="cognome" size="70" placeholder="Cognome">
<br><br>
<input type="submit" id="sendBtn">
</form>
Può essere anche utile poter modificare dinamicamente questo attributo utilizzando Jquery, ad esempio in un form di contatti, dove si andrà a verificare il corretto inserimento del nome o del cognome o di un altro testo.
Prendiamo ad esempio il form qui sopra, dove vediamo il campo di testo Cognome con il suo placeholder cosi impostato, quindi se volessimo verificare che il campo cognome non venga inviato vuoto è possibile utilizzate la libreria di jquery per controllare lo stato e informarci visivamente dell'errore direttamente nel form stesso con un messaggio che imposteremo nello script jquery.
Esempio script Jquery da applicare per la verifica di un campo:
if($("#campoInput").val()===''))
{
$("#campoInput").attr("placeholder", "Inserisci il testo");
$("#campoInput").css({"background-color":"#f6f6a4","border": "#bcb488 2px solid"});
return false;
}