Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
4 minutos de leitura
Autor(a)
Alex é instrutor e desenvolvedor e possui experiência em Java, Kotlin, Android. Atualmente cria conteúdo no canal https://www.youtube.com/@AlexFelipeDev.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Estou desenvolvendo um sistema web que armazenará todos os livros que comprei para poder realizar consultas e verificar se já tenho um livro ou não. Porém, preciso criar um formulário de cadastro em HTML para enviar esses livros para o servidor. Para fazer um formulário precisamos utilizar a tag form:
<form>
</form>
Já indicamos que estamos criando um formulário, agora vamos adicionar os campos necessários para fazer o cadastro de um livro! Preciso do nome do livro, nome do autor, data da compra, valor e ISBN. Mas como adicionamos esses campos no HTML? Para adicionar campos de texto, podemos utilizar a tag ```input``
<form> <input/> </form>
Verificando nosso primeiro resultado:
Ótimo, criamos o primeiro campo! Mas tem alguma coisa muito estranha nesse campo...esse campo refere-se a que? Que informação ele vai guardar? É o nome do livro? Nome do autor? Não dá pra saber que tipo de informação precisamos enviar! Para indicar a que se refere o campo, utilizamos a tag label:
<form> <label>Livro</label> <input/> </form>
Veja nosso primeiro campo:
Livro
Já está ficando melhor! Então agora vamos adicionar os demais campos também!
<form>
<label>Livro</label>
<input/>
<label>Autor</label>
<input/>
<label>Valor</label>
<input/>
<label>Data da compra</label>
<input/>
</form>
Já podemos preencher nosso formulário:
Livro Autor ISBN Valor Data da compra
Ótimo! Temos todos os campos que precisamos, mas ainda tem alguma coisa que está faltando: eu preciso enviar esses dados para o servidor. Mas quando eu vou enviar para o servidor? Que tal utilizarmos um elemento que ao clicarmos nele os dados são enviados? Um botão seria apropriado para isso! Usaremos então a tag button:
<form>
<label>Livro</label>
<input/>
<label>Autor</label>
<input/>
<label>Valor</label>
<input/>
<label>Data da compra</label>
<input/>
<button>Cadastrar</button>
</form>
Agora podemos até clicar no botão do formulário:
Livro Autor ISBN Valor Data da compra
Cadastrar
Maravilha! Criamos o nosso formulário, vamos preenchê-lo e verificar se está funcionando como o esperado:
Livro Autor ISBN Valor Data da compra
Cadastrar
Opa, calma aí! No sistema que estou desenvolvendo o valor precisar ser apenas um número e a data precisa utilizar o formato dia/mês/ano...mas como podemos fazer com que o campo nos informe que precisa ser preenchido dessa forma? A partir do HTML5 as tags input podem ser validadas através de um recurso chamado form validation. Cada input já permite por padrão a validação de dados e, no nosso caso, validaremos os campos de Valor e Data da compra. Vamos adicionar esses validadores nos nossos inputs adicionando o parâmetro type:
<label>Livro</label>
<input type="text" value="HTML5 e CSS3"/>
<label>Autor</label>
<input type="text" value="Lucas Mazza"/>
<label>ISBN</label>
<input type="text" value="978-85-66250-05-3"/>
<label>Valor</label>
<input type="number" />
<label>Data da compra</label>
<input type="date" />
Teste os campos de Valor e Data da compra e veja o resultado:
Livro Autor ISBN Valor Data da compra
Cadastrar
Além de validar nossos dados, o form validation fornece uma outra grande vantagem para os usuários de smartphones: quando você acessa, por exemplo, o campo Valor, ao invés de abrir um teclado de texto comum, abrirá um teclado de números facilitando a vida do usuário na hora de digitar um valor.
Por fim, vamos adicionar um container para o nosso formulário utilizando a tag fieldset e usaremos a tag legend do fieldset para descrever a que o formulário se refere:
<fieldset>
<legend>Formulário de cadastro de livros</legend>
<form>
<label>Livro</label>
<input type="text" value="HTML5 e CSS3"/>
<label>Autor</label>
<input type="text" value="Lucas Mazza"/>
<label>ISBN</label>
<input type="text" value="978-85-66250-05-3"/>
<label>Valor</label> <input type="number" />
<label>Data da compra</label>
<input type="date" />
<button>Cadastrar</button>
</form>
</fieldset>
Veja o resultado final do nosso formulário:
Vimos que para criarmos formulário em HTML precisamos utilizar a tag form que indica a criação de um formulário. Vimos também que podemos utilizar a tag input para indicar os campos que queremos no nosso formulário. Além disso, vimos também que podemos utilizar alguns validadores nos nossos inputs a partir do HTML5, como por exemplo, validar data e números. Por fim, vimos como podemos adicionar um container no nosso formulário para descrever o seu objetivo utilizando a tag fieldset
E aí, gostou do formulário? Quer aprender mais sobre HTML e as novidades do HTML5? No Alura, temos um curso para quem está começando agora com HTML e Front End e outros cursos com que abordam muitos assuntos sobre HTML, CSS e Javascript permitindo que você aprenda de vez e domine o Front End!
Avalie este artigo
