Oi pessoal, tudo bem? Aqui tá 100%, “bora” para mais um post? Vou escrever um pouco sobre as novas opções de tipos de inputs com HTML 5.

Alguns exemplos de tipos que estamos acostumados usar:

Além de outros que não preciso citar. Agora vem as novidades, esses são os tipos inseridos no HTML 5:

Agora vou mostrar como aplicar esses novos campos na prática e depois explico os atributos.

<input type="search" autofocus="autofocus" placeholder="Buscar." />

<input type="number" min="18" max="100" placeholder="Sua Idade." />

<input type="range" min="1" max="100" />

<input type="tel" placeholder="Telefone." />

<input type="email" required="required" placeholder="e-Mail." />

<input type="url" placeholder="Link." />

Significado dos atributos:

autofocus, diz que o elemento deve receber o foco logo após o documento ser carregado.

placeholder, texto que será exibido quando o elemento estiver sem o foco.

min, o limite inferior esperado pelo elemento.

max, o limite superior esperado pelo elemento.

required, diz que o elemento é uma parte necessária do envio do formulário.

É isso, moleza não? A utilidade desses novos atribuitos é infinita, se você quiser ver outros atributos consulte a documentação do HTML 5.

Segue um exemplo do input range :

Atenção, testei os campos no Safari e Chrome, Firefox não funcionou o range e no IE não precisa nem testar. Qualquer outro navegador que não suporte, a culpa não é minha rs…

BÔNUS:

Bom, resolvi colocar esse bônus mostrando como criar um formulário de forma semântica, sem muitas explicações:

<form>			

	<fieldset>
		<legend>Legenda</legend>

		<ol>
			<li>
				<label for="nome">Nome</label>
				<input name="nome" type="text" placeholder="Nome Completo." />
			</li>

			<li>
				<input type="submit" value="Vai!" />
			</li>
		</ol>
	</fieldset>

</form>

Uso dessa forma para formulário simples, mas nada lhe impede de usar outros métodos, incluindo tabelas.

Até a próxima 😀