Olá galera! Tudo bem?

Irei mostrar alguns inputs que usamos no dia-a-dia para vocês. Espero que gostem:

Então vamos lá!

Input de Hora no formato XX:XX, exemplo 15:30.

<input id="hora_ini" name="hora_ini" type="text" maxlength="5" pattern="\d{1,2}:\d{1,2}" placeholder="00:00">

<label for="hora_ini">Hora:</label>

Input de Telefone no formato (xx)xxxx-xxxx, exemplo (11)3333-4444

<input id="adm_telenome" name="adm_telenome" type="text"  title="(xx)xxxx-xxxx" pattern="\([0-9]{2}\)[0-9]{4,6}-[0-9]{4}$">

<label for="adm_telenome">Telefone</label>

Input de e-mail no formato xxxx@xxxxx.xxx, exemplo contato@rghitech.com

<input id="adm_email" name="adm_email" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required="">

<label for="adm_email">E-mail*</label>

Os inputs estão com restrições pelo HTML5, usando a expressão regular!

Para validação do lado do servidor, usaremos o PHP para tal, mas isso é assunto para outro post!

Por enquanto é isso!
Caso eu encontrar mais formatos edito este post!
Até o próximo post !

Obrigado pela visita!
Autor: Guilherme Pedrazzi