Formulário de registro online
Este projeto é o terceiro projeto do curso de desenvolvimento de front -end da Team Treehouse.
Neste projeto, você criará um formulário de registro responsivo e amigável para dispositivos móveis usando uma ampla variedade de tipos e atributos de entrada de formulários HTML. Usando os arquivos de maquete fornecidos, você criará uma versão móvel e de desktop do formulário usando consultas de mídia e uma abordagem "Mobile-primeiro".
Link ao vivo para este projeto pode ser encontrado aqui
Captura de tela
Instruções
- Crie o layout usando o primeiro design móvel :
- Verifique se o arquivo HTML inclui a meta tag de viewport na cabeça do documento, consulte Configurando a viewport para entender o porquê e como adicionar esta tag.
- Veja o Mockup fornecido (Mobile-Form.png) e adicione o mesmo conteúdo ao seu arquivo index.html.
- Crie a estrutura do formulário: use apenas uma tag
<form> . A tag <form> deve conter todos os elementos do formulário. Adicione um fieldset e legend para cada uma das seções a seguir:
- Seção "Informações de contato" da página e
- A seção "Newsletter" da página
- Certifique -se de incluir os seguintes tipos de campo de formulário:
- entrada de texto
- entrada de e -mail
- entrada de telefone
- Selecione o menu
- caixas de seleção
- botões de rádio
- Textarea
- Botão Enviar
- Os campos de formulário devem incluir os seguintes atributos:
-
input : deve incluir atributos de id , type e name . -
select e textarea : deve incluir atributos id e name .
- Adicione rótulos a cada elemento de formulário usando a tag HTML
<label> . O texto dentro dos rótulos deve corresponder aos nomes dos campos de formulário nos modelos.
- Certifique -se de emparelhar corretamente cada elemento
<label> com seu controle de formulário correspondente através do atributo for . Veja o link acima para um exemplo. E não se esqueça do elemento textarea. Isso também precisa de um rótulo em funcionamento.
- Use o atributo
placeholder do campo de entrada para adicionar o texto "necessário" a:
- o campo de nome completo
- o campo de endereço de e -mail
- Depois de ter tudo no lugar para o layout móvel, use uma consulta de mídia para adicionar um ponto de interrupção para ajustar o layout para telas mais largas para tablet e desktop.
- Combine o design, pois deve procurar em um tablet ou desktop com 768px de largura usando o MockUp da área de trabalho.
- Use uma abordagem móvel pela primeira vez escrevendo suas consultas de mídia usando a propriedade de
min-width em seu CSS.
- Depois que todos os seus pontos de interrupção estiverem no lugar, verifique duas vezes o layout corresponde aos dois modelos.
- Verifique se a posição do texto da etiqueta corresponde a ambos os modelos:
- Mobile : o texto deve estar acima do campo do formulário.
- Desktop : O texto deve estar no lado esquerdo do campo de formulário.
Use uma fonte do Google para o texto
Adicionar :focus estados ao formulário para quando um usuário clica ou guias em um campo de texto.
Verifique se o seu código é válido executando -o através de um validador HTML e CSS.
- Os links para os validadores podem ser encontrados nos recursos do projeto. Isso o ajudará a identificar quaisquer erros que possam estar no seu código.
- Existem algumas exceções que você não precisa consertar:
- Não se preocupe com nenhum aviso, só precisamos que você verifique qualquer erro que possa estar lá.
- Se os sinalizadores do validador CSS usam o calc, prefixos de fornecedores ou pseudo-elementos/pseudo-classes, esses erros devem ser ignorados.
- Se os sinalizadores do Validador HTML usam o Pipe ('|') nos links/URLs do Google Font, esse erro também poderá ser ignorado.
