AluCar: Recebendo inputs do usuário através de formulários
Neste projeto vamos conhecer um exemplo prático que utiliza alguns inputs para construir um formulário de cadastro de uma loja de aluguel de carro.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Introdução
Neste projeto vamos criar uma página que pode ser vista na Animação 1.
![Página que aplica os conceitos aprendidos neste curso](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/anime1.gif)
Conheça a página do exemplo no flow seguinte:
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/27.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/28.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/29.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/30.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/31.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/32.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/33.png)
No Código 1 veja a URL do back-end que disponibilizamos para você inserir na propriedade action da tag form.
https://www.devmedia.com.br/codigos/formularios/aula9/
Entenda no flow abaixo o código usado para criação do formulário:
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/34.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/35.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/36.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/37.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/38.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/39.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/40.png)
Veja no flow seguinte o código utilizado na construção dos fieldsets:
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/41.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/42.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/43.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/44.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/45.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/46.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/47.png)
Agora que vimos a construção dos três fieldsets, veja em detalhes o conteúdo de cada um deles, começando pelo fieldset de dados pessoais:
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/48.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/49.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/50.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/51.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/52.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/53.png)
Veja no flow seguinte o código do fieldset da CNH:
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/54.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/55.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/56.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/57.png)
Para concluir o exemplo, veja a seguir o código do conteúdo do fieldset de carro:
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/58.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/59.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/60.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/61.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/62.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/63.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/64.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/65.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/66.png)
![Exemplo prático Exemplo prático](http://www.devmedia.com.br/arquivos/cursos/html_forms/aula9/67.png)
Confira no link a seguir a execução do exemplo:
Exemplo Prático - Aluguel de CarrosA página de aluguel de carros apresenta de maneira simples o uso de um formulário dentro de uma situação real. Durante o curso e através desta página podemos perceber como o formulário é importante em diversas situações.