Exercício Prático para construção de formulários em HTML5

Prévia do material em texto

ENGENHARIA DE SOFTWARE 
SASI 2017-2
ESTUDO DIRIGIDO SOBRE CONSTRUÇÃO DE FRONT-ENDS E A TECNOLOGIA HTML5, CSS, JAVASCRIPT E BOOTSTRAP 
Informações Gerais do Trabalho
Entrega dia 09/10/2017 até as 23:55 horas pelo Moodle
Individual
Objetivo
Propiciar a familiarização do aluno com: 
a criação de front-end;
tecnologias utilizadas para a construção de front-ends;
a construção de formulários para entrada de dados de sistemas WEB;
Propiciar ao aluno aplicar na prática a tecnologias de construção de front-end;
O que entregar
Um documento contendo a resposta do questionário e o formulário HTML5 e CSS desenvolvidos. 
Questionário
Responda as perguntas abaixo
Qual a diferença de front-end para back-end?
Cite 4 tecnologias para construção de front-end
Cite 4 tecnologias para construção de back-end
O que é site/pagína responsivo?
O que é a linguagem HTML5?
O que é uma Tag em HTML5?
O que é CSS e para que serve?
O que é Bootstrap?
Qual comando deve ser dado para poder utilizar o bootstrap numa página HTML5?
Qual tag é utilizada para construção de formulários em HTML5?
Qual a diferença entre os métodos GET e POST dos formulário HTML5? Dê exemplo de declaração destes métodos na tag do formulário.
Para que serve o atributo “action” da tag FORM do HTML5? Dê um exemplo.
Enunciado
Aprendizado para o exercício. Se você não sabe o que é HTML5, CSS, não sabe fazer formulários em HTML5, então faça os cursos abaixo:
Os alunos que nunca trabalharam com HTML5, não sabem do que se trata ou nunca construíram um formulário em HTML5, devem fazer o curso disponível em https://www.youtube.com/watch?v=yL4OZwVP6Ro. São vídeos simples e curtos. Após assistí-los você saberá o que é o HTML5 e como separar a formatação usando o CSS.
Os alunos também podem treinar seus conhecimentos no site https://www.freecodecamp.org/ onde exemplos práticos são dados e pequenas tarefas são solicitadas, permitindo o aluno colocar em prática, passo a passo, o que está aprendendo.
Se você já conhece HTML5 então faça o trabalho abaixo. Faça um formulário que atenda os requisitos abaixo. Gerar uma interface HTML5 com CSS independente e os seguintes campos e características:
O autocomplete do formulário deverá estar desligado, ou seja, não mostra os dados já digitados anteriormente no formulário). <form autocomplete = “off”>
O formulário deverá ter os seguintes botões padrões denominados de "ENVIAR", "LIMPAR", "ENVIAR PARA NOVA ABA".
RG (obrigatório)
Nome (terá até 40 caracteres digitados e dentro do campo deverá aparecer escrito "Digite seu nome". Veja o atributo placeholder)
email (o email somente será válido se o usuário digitar algo que contenha @ e um . (ponto) depois do @, havendo caracteres antes e depois do @, antes e depois do .)
Nascimento (será uma data e deverá obedecer o formato dd/mm/yyyy)
Estado (deverá aparecer Botões de rádio com a opções SP, RJ, MG, ES)
Admissão (será uma data e deverá obedecer o formato mm/dd/yy) a data não poderá ser menor do que 01/01/1990 e nem maior do que 01/01/
Depatamento (deverá aparecer "DCC" escrito por default e o campo deverá estar desabilitado em cinza não permitindo edição)
Salário (deverá permitir digitar
Curso (deverá ser uma lista em que o usuário digita os dados e ocorre um filtro da lista mostrando os valores que se enquadram no que já foi digitado. As opções serão "Ciência da Computação", "Sistemas de Informação", "Engenharia de Software", "Engenharia da Computação")
Marca do Veículo (deverá ser um combo box com as opções VolksWagen, FIAT, FORD, CHEVROLET, GM)
Placa do carro (deverá obdecer o formato AAA-9999, isto é, 3 letras um hífen e 4 números.
Quantidade de livros (deverá ser um número com o valor mínimo de 0 e o valor máximo de 6)
Enviar sua foto (veja oa atributo Multiple e type="file". O usuário deverá postar mais de uma foto de si mesmo.)
Quantidade de pares de sapatos (deverá aceitar apenas números positivos e múltiplos de 2. Veja atributo step)
Neste segundo passo, você deverá pegar um template de HTML5 com CSS já pronto na WEB e aplicá-lo no seu formulário. Dentre os links abaixo, há indicações de alguns links onde você pode pegar templates de HTML5 e CSS para aplicar no seu formulário e fazê-lo ficar com uma cara de formulário profissional. Não precisa ser um modelo de um dos links abaixo, caso já tenha habilidade ou prefira, você pode procurar templates em outros sites ou utilizar algum formato ou biblioteca que você já conheça. (Os links passados têm o intuito de dar exemplos. Faça seu melhor.)
LINKS IMPORTANTES:
Conheça cada um dos atributos de formatação como autocomplete, autofocus, form, placeholder, required, min, max,...., no link: https://www.w3schools.com/html/html_form_attributes.asp 
O link abaixo ajudará você a formatar os dados:
http://wbruno.com.br/html/validando-formularios-apenas-com-html5/
Os links abaixo possuem alguns templates prontos de HTML5 com CSS. Alguns templates usam além do HTML5 e CSS o JavaScritp para fazer validação
de campo.
https://www.freshdesignweb.com/css-login-form-templates/ 
https://colorlib.com/wp/free-html5-contact-form-templates/
https://dcrazed.com/css-html-login-form-templates/