desenvolvimento e design de...
TRANSCRIPT
![Page 1: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/1.jpg)
Formulários – Recursos HTML 5 [9]
Desenvolvimentoe Design de
Prof.: Ari Oliveira
Websites
![Page 2: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/2.jpg)
Formulários – Recursos HTML 5 [9]
2
│ Formulários:
‖ Novos recursos do HTML 5 para formulários
![Page 3: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/3.jpg)
Formulários – Recursos HTML 5 [9]
3
│ Faça um formulário de pesquisa eleitoral (eleições do líder da sala).
│ Esta página deverá conter um formulário para que o voluntário preencha sua intenção de votos para as categorias: líder, vice-líder, secretário, humorista, estiloso, tímido, etc.
│ Além de perguntar a intenção de voto, você deve também perguntar outras informações pessoais sobre o eleitor.
│ Use todos os tipos de campos de formulário
![Page 4: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/4.jpg)
Formulários – Recursos HTML 5 [9]
4
│ Este input abre uma caixa de seleção de cores
│ O resultado é enviado em hexadecimal
Selecione sua cor:<input type="color" name="minhacor">
![Page 5: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/5.jpg)
Formulários – Recursos HTML 5 [9]
5
│ Este controlador vai ajudar a definir e regular datas
Aniversário: <input type="date" name="niver">
![Page 6: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/6.jpg)
Formulários – Recursos HTML 5 [9]
6
│ Esta opção abrirá um controlador de data e hora, com fuso-horário
Horário do evento:
<input type="datetime" name="novoevento">
![Page 7: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/7.jpg)
Formulários – Recursos HTML 5 [9]
7
│ Seleciona data e hora com fuso-horário local
Horário do evento:
<input type="datetime-local" name="novoevento">
![Page 8: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/8.jpg)
Formulários – Recursos HTML 5 [9]
8
│ Este campo é especialmente direcionado para digitar e-mail, sendo automaticamente validado ao enviar o formulário.
E-mail: <input type="email" name="seuemail">
![Page 9: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/9.jpg)
Formulários – Recursos HTML 5 [9]
9
│ Este input pergunta ao usuário que escolha um mês do ano
Mês do Evento (mês e ano):
<input type="month" name="mesevento">
![Page 10: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/10.jpg)
Formulários – Recursos HTML 5 [9]
10
│ Gerencia valores numéricos│ É possível usar os atributos min e max para criar
um limite│ O atributo step define a variação
Quantidade (entre 1 e 9):<input type="number" name="quantidade" min="1"max="9" step="2">
![Page 11: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/11.jpg)
Formulários – Recursos HTML 5 [9]
11
│ Controle de intervalo numérico, quando a precisão não é importante
<input type="range" name="preco" min="1"max="10">
![Page 12: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/12.jpg)
Formulários – Recursos HTML 5 [9]
12
│ Define um campo de busca, assim como o google
Procurar no google:
<input type="search" name="procuragoogle">
![Page 13: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/13.jpg)
Formulários – Recursos HTML 5 [9]
13
Tipo Descrição
week Para definir uma semana e um ano
urlÉ usado para campos de entrada onde você recebee um endereço URL, o valor do campo é validado automaticamente quando o formulário é enviado
time Permite ao usuário selecionar hora
telServe para números de telefone, mas até o momento nenhum dos principais navegadores oferece suporte a esse tipo
![Page 14: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/14.jpg)
Formulários – Recursos HTML 5 [9]
14
Atributo Descrição
Autocomplete ON/OFF. Em caso de estar “on”, os navegadores armazenamo valor, e auto completam quando o visitante digitar o mesmo formulário outra vez
Autofocus Autofocus. O campo é ativado quando a página é carregada
Required Campo obrigatório. Só é possível enviar o formulário com este campo preenchido
<form novalidate> - o que este atributo faz? Teste!
![Page 15: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/15.jpg)
Formulários – Recursos HTML 5 [9]
15
│ Faça uma página de “trabalhe conosco”.
│ Esta página deverá conter um formulário para que o candidato se cadastre
│ Use todos os tipos de campos de formulário
![Page 16: Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://reader036.vdocuments.pub/reader036/viewer/2022071216/6048e06588fbe118e10667fa/html5/thumbnails/16.jpg)
Formulários – Recursos HTML 5 [9]
Desenvolvimentoe Design de
Prof.: Ari Oliveira
Websites