Nessa parte do nosso tutorial, vamos falar sobre as novidades do HTML 5, na parte dos formulários:
1º) Campo deve ser preenchido!!
Você pode testar o código abaixo, para quem já conhecia o html, sabe que para fazer validação de campo, usava javascritp ou jquery, hoje com o HTML 5, esse problema é resolvido rapidamente com required.
<!DOCTYPE html>
<html>
<head><title>VALIDAÇÃO DE FORMULÁRIO</title></head>
<body>
<form>
Nome: <input type="text" required="required">
<input type="submit" value="Cadastrar">
</form>
</body>
</html>
2º) Campo deve aceitar somente número:
Repito mais uma vez, para quem já conhecia o HTML , quando precisava de fazer uma validação no formulário e um campo input só deveria aceitar número, mais uma vez o programador recorria a alguma função em javascript ou jquery.
Com o html 5, podemos colocar o type do input como number. Observe também as propriedades min e max, essas duas permite você setar o valor minimo e máximo que poderá aparecer no campo.
<!DOCTYPE html>
<html>
<head><title>Campo number</title></head>
<body>
<form>
Idade: <input type="number" required="required" min='20' max='70'>/
<input type="submit" value="Cadastrar">
</form>
</body>
</html>
2º) Validando o campo de url.
Lembrando que na época do HTML 4, para fazermos essa validação, usariamos javascritp ou jquery, hoje como o nosso novo HTML, ele faz essa validação,declarando type="url", a medida que o usuário vai digitando.
<!DOCTYPE html>
<html>
<head><title>Primeira Página Html</title></head>
<body>
<form>
site: <input type="url" required="required">
<input type="submit" value="Cadastrar">
</form>
</body>
</html>
3º) Validação do campo data:
<html>
<head><title>Primeira Página Html</title></head>
<body>
<form>
Data: <input type="date" required="required">
<input type="submit" value="Cadastrar">
</form>
</body>
</html>
4º) Validação do campo busca:
A funcionalidade desse campo é mostrar o x na caixinha para apagar o que estava escrito, inicialmente isto é muito util principamente em celulares.
<!DOCTYPE html>
<html>
<head><title>Primeira Página Html</title></head>
<body>
<form>
Buscar: <input type="search" required="required">
<input type="submit" value="Cadastrar">
</form>
</body>
</html>
5º) Campo color:
Criando caixinha de seleção de cor.
<!DOCTYPE html>
<html>
<head><title>Primeira Página Html</title></head>
<body>
<form>
Buscar: <input type="color" required="required">
<input type="submit" value="Cadastrar">
</form>
</body>
</html>
6º) Auto focus:
Ao entrar na página, o input já vem com focus
<!DOCTYPE html>
<html>
<head><title>Primeira Página Html</title></head>
<body>
<form>
site: <input type="url" autofocus='autofocus' required="required">
<input type="submit" value="Cadastrar">
</form>
</body>
</html>.
Nenhum comentário:
Postar um comentário