E 'possibile fare un input = "testo" per richiedere una e-mail o un tel?

Question

Ho creato uno <input type="text" placeholder="phone or email" required="required" /> e mi stavo chiedendo se posso farlo in modo che sia necessaria una e-mail valida o un numero?

Answer 1

È possibile implementare la convalida dei dati solo HTML su input s utilizzando l'attributo pattern: http://jsfiddle.net/887saeeg/. Accoppiato con le pseudo-classi :valid e :invalid, è possibile avere una discreta funzionalità di controllo degli errori utilizzando solo le tecnologie di presentazione. Certo, è necessario un browser moderno. (Tratterò la convalida del browser in modo più dettagliato nell'ultimo volume della mia serie di libri Funzionali CSS [disponibile su Amazon]).

HTML:

<form> 
    <input type = "text" placeholder = "Phone or Email" required pattern = "^([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3})|(\d{3}-\d{3}-\d{4})$"/> 
    <input type = "submit" value = "Send" /> 
</form> 

EDIT: Esempio di utilizzo di CSS pseudo-classi: http://jsfiddle.net/292pp5gk/.

HTML:

<form> 
    <label> 
     <input type = "text" placeholder = "Phone or Email" required pattern = "^([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3})|(\d{3}-\d{3}-\d{4})$"/> 
     <span class = "error">Please provide a valid telephone or email</span> 
    </label> 
    <input type = "submit" value = "Send" /> 
</form> 

CSS:

label { 
    position: relative; 
} 

.error { 
    position: absolute; 
    white-space: nowrap; 
    bottom: -8px; 
    left: 0; 
    transform: translateY(100%); 
    display: none; 
    background-color: hsla(0, 50%, 70%, 1); 
    padding: 5px 10px; 
    border-radius: 5px; 
    font: normal 12px/1 Sans-Serif; 
} 

.error:before { 
    content: ""; 
    position: absolute; 
    border-style: solid; 
    border-color: transparent transparent hsla(0, 50%, 70%, 1) transparent; 
    border-width: 0 5px 5px 5px; 
    left: 15px; 
    top: -5px; 
} 

input { 
    outline: 0; 
} 

input:invalid + .error { 
    display: block; 
}