4.3 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78af367417b2b2512b03 | Criar um formulário de pesquisa | 3 | 301145 | build-a-survey-form |
--description--
Objetivo: criar uma aplicação no CodePen.io que tenha função semelhante a esta: https://codepen.io/freeCodeCamp/full/VPaoNP.
Atenda às especificações de usuário abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
Especificação de usuário nº 1: deve haver um título com id="title" que possua o tamanho de uma tag h1.
Especificação de usuário nº 2: deve haver uma descrição curta com id="description" que possua o tamanho de uma tag p.
Especificação de usuário nº 3: deve haver um formulário (form) com id="survey-form".
Especificação de usuário nº 4: dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com id="name".
Especificação de usuário nº 5: dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com id="email".
Especificação de usuário nº 6: se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado.
Especificação de usuário nº 7: dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com id="number".
Especificação de usuário nº 8: se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado.
Especificação de usuário nº 9: se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos min e max, um erro de validação de HTML5 deve ser mostrado.
Especificação de usuário nº 10: para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: id="name-label", id="email-label", e id="number-label".
Especificação de usuário nº 11: para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (text ilustrativo) que forneça uma descrição ou instruções para cada campo.
Especificação de usuário nº 12: dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um id="dropdown".
Especificação de usuário nº 13: dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo name.
Especificação de usuário nº 14: dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo value.
Especificação de usuário nº 15: dentro do elemento de formulário, deve haver um campo textarea no final para comentários adicionais.
Especificação de usuário nº 16: dentro do elemento de formulário, deve haver um botão com id="submit" para enviar todas as informações.
Você pode fazer o seu projeto usando este modelo da CodePen e, logo após, clicar em Save para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
--solutions--
// solution required