Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa

Transcrição

1 Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa

2 Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato no site, com um formulário. Na página inicial encontramos um link para a página de contato: Ao entrarmos na página, vemos que ainda está vazia de conteúdo. Possui apenas a estrutura básica. O primeiro passo para criarmos um formulário em HTML é usar a tag "form". <div class="container">... </div> Vamos aos poucos implementando-a. Começando pelos espaços onde o usuário colocará seu nome, seu Nome: <input> <input> Até agora nosso formulário está assim:

3 O usuário também poderá escolher o assunto do qual se trata a mensagem. Isso será feito por meio de botões: Nome: <input> <input> <input type"radio"> Antes de continuarmos, note que o navegador não saberá a que campo se referem os inputs. Para isso a tag "label" deve possuir o atributo"for" e o input o atributo "id", exatamente para identificar a qual campo ele se refere. <label for="nome">nome: <input id="nome"> <label for=" "> <input id=" "> <input type"radio" id="consultoria"> <label for="consultoria"> Visualmente nada muda, porém muda-se a semântica e a acessibilidade, o que ajuda o usuário a selecionar os campos. Se quisermos, também podemos deixar o input dentro do label: <input type"radio"> Vamos acrescentar os outros assuntos: <label for="nome">nome: <input id="nome"> <label for=" "> <input id=" "> <input type"radio"> <input type"radio"> <input type"radio">

4 Nesse momento nosso formulário está assim: Perceba que conseguimos selecionar mais de um assunto. Isto acontece porque o navegador não sabe que existe uma relação entre eles. Para arrumar, precisamos adicionar mais um atributo a esses assuntos, que é o "name". Ele manda a informação para o servidor. Ou seja, todos os labels precisam dele. <label for="nome">nome: <input id="nome" name="nome"> <label for=" "> <input id=" " name=" "> <input type"radio" name="assunto"> <input type"radio" name="assunto"> <input type"radio" name="assunto"> Agora apenas um assunto poderá ser selecionado de cada vez. Os nomes que demos para cada assunto são apenas rótulos que aparecem na página. O navegador ainda não os associa com o valor que eles devem ter e, por sua vez, não os envia para o servidor. Então precisamos do atributo "value": <label for="nome">nome: <input id="nome" name="nome"> <label for=" "> <input id=" " name=" ">

5 <input type"radio" name="assunto" value="consult"> <input type"radio" name="assunto" value="blog"> <input type"radio" name="assunto" value="outro"> Também poderíamos passar os valores para os campos "Nome" e " ", porém existe um atributo específico para eles, o "placeholder": <label for="nome">nome: <input id="nome" name="nome" placeholder="seu nome aqui"> <label for=" "> <input id=" " name=" " placeholder="seu@ .com"> <input type"radio" name="assunto" value="consult"> <input type"radio" name="assunto" value="blog"> <input type"radio" name="assunto" value="outro"> O placeholder permite que as frases escritas no HTML ("Seu nome aqui", por exemplo) apareçam nos campos do formulário. Quando clicamos elas não impedem a escrita e apagam-se quando começamos a escrever. Falta ainda a parte mais importante do formulário: o lugar onde o usuário irá digitar sua mensagem. Usamos a tag"textarea". Ela pode ser configurada para ter o tamanho que queiramos usando "cols" (colunas) e "rows" (linhas): <label for="nome">nome: <input id="nome" name="nome" placeholder="seu nome aqui"> <label for=" ">

6 <input id=" " name=" " <input type"radio" name="assunto" value="consult"> <input type"radio" name="assunto" value="blog"> <input type"radio" name="assunto" value="outro"> <label for="msg">mensagem: <textarea id="msg" name="mensagem" cols="30" rows="6"> Nesse momento o formulário está com essa configuração: Falta agora uma coisa muito importante: o usuário enviar o formulário. Para isso vamos criar um botão. O jeito tradicional de fazer isso é <input type="submit" value="enviar">

7 A tag input é limitada para fazermos botões, pois não conseguimos colocar uma imagem ou sublinhar o texto, etc. Então usamos a tag "button". Com ela podemos formatar o texto do botão. <button type="submit">enviar <strong>para mim</strong></button> Vamos trabalhar um pouco mais em cima da semântica desses elementos que criamos para o fomulário. Para os botões de assuntos, a área do texto da mensagem e o botão de Enviar nós declaramos seus tipos. Façamos o mesmo com o Nome e o . O nome poderá ser qualquer texto, porém o tem uma característica diferente da do nome. Para diferenciá-lo, então, vamos acrescentar um type: <label for=" "> <input id=" " name=" " placeholder="seu@ .com" type=" "required> Visualmente, a tela de formulário não muda. Mas se tentarmos escrever um e-amil falos, sem "@" por exemplo, aparecerá uma mensagem de erro e o formulário não será enviado. Essa validação de formulários é algo novo trazido pelo HTML5. O "required" também faz com que o campo seja obrigatório o preenchimento. atributo interessante para inserirmos no formulário é o "autofocus". Ele faz com que toda vez que a página é recarregada o ponteiro de escrita apareça no campo indicado <label for="nome">nome: <input id="nome" name="nome" placeholder="seu nome aqui" autofocus> Para melhorar ainda mais a semântica do formulário, vamos agrupar os campos em dois conjuntos: dados pessoais e assunto. Utilizamos para tal as tags "fieldset" e "legend"

8 <fieldset> <legend>dados pessoais</legend> <label for="nome">nome: <input id="nome" name="nome" placeholder="seu nome aqui" autofocus> <label for=" "> <input id=" " name=" " type=" "required> </fieldset> <fieldset> <legend>assunto:</legend> <input type"radio" name="assunto" value="consult"> <input type"radio" name="assunto" value="blog"> <input type"radio" name="assunto" value="outro"> </fieldset> O formulário fica assim: Apesar de termos criado ferramentas para validar as informações do formulário, não podemos esquecer de validá-las também no servidor. O que vimos foi o básico da construção de formulários: validação, usabilidade, semântica. Existem muitas outras ferramentas para deixá-lo mais rico.

9 Dos tipos com casos de uso mais interessantes, temos: date, usado para que o usuário possa fornecer uma data como seu aniversário ou data de nascimento datetime, para que o usuário possa fornecer, além da data, um horário, útil para que ele forneça um momento para ser lembrado de algo datetime-local, para quando a data e o horário que o usuário fornecer sejam independentes de local ou quando o sistema é feito para trabalhar sempre no mesmo fuso horário, como por exemplo quando o usuário precisa fornecer a data e o horário de nascimento dele no horário de Brasília hidden, usado para enviar informações extra para o servidor além daquelas fornecidas pelo usuário, como um identificador do usuário gerado pelo sistema image, usado para enviar os dados do formulário com um botão gráfico, pode ser usado para não apenas ter um botão mais bonito, como também para fazer uma interação mais dinâmica com o usuário, em que o resultado da ação depende do local onde ele clica na imagem, uma vez que esse tipo de botão envia as coordenadas do clique para o servidor month, usado para que o usuário forneça um mês e um ano, útil para que ele forneça a validade de um cartão de crédito, por exemplo number, para que o usuário forneça um número como sua idade ou a quantidade de um produto num carrinho de compras range, usado para que se possa escolher um valor numérico numa faixa de valores possíveis, normalmente sem muita preocupação com a precisão, como por exemplo quando se deseja que o usuário dê uma nota para um serviço. Quando usamos um tipo mais específico de campo, estamos agregando semântica ao nosso formulário, e isso traz diversas vantagens na prática. Uma primeira vantagem é a validação dos campos. O campo do tipo garante que o usuário deve digitar um válido na hora de enviar o formulário. O campo do tipo number garante que o valor digitado será numérico. Outra grande vantagem é uma usabilidade melhor do formulário, principalmente em dispositivos móveis. Quando usamos um tipo date, por exemplo, o navegador pode mostrar um controle para selecionarmos uma data. Ou, quando usamos um tipo number, o dispositivo móvel pode mostrar um teclado numérico, facilitando a digitação. Além dessas vantagens, temos todas as vantagens de ter uma página mais semântica: mais acessibilidade, melhor indexação pelas ferramentas de busca etc.

10 Seguindo passo a passo os requisitos do enunciado: As legendas dos grupos de campo e do campo "Mensagem" devem estar em negrito e espaçadas do grupo de campos anterior. 1. /* Podemos usar um seletor de atributo para selecionar 2. apenas a legenda desse campo e não dos outros */ 3. legend, 4. label[for="mensagem"] { 5. font-weight: bold; 6. margin-top: 1em; 7. } Deixar os rótulos dos campos sempre em cima deles, exceto para os assuntos 1. /* As tags que têm o atributo "for" são 2. os rótulos dos campos sem ser os assuntos */ 3. label[for] { 4. display: block; 5. } Os campos de texto devem ocupar a largura inteira da tela (exceto o campo para o assunto ""), ter uma borda cinza clara, espaçamento interno e usar a mesma fonte do resto da página 1. /* Selecionamos apenas os campos de texto */ 2. input[type="text"], 3. input[type=" "], 4. textarea { 5. /* Força o navegador a usar a mesma fonte da página */ 6. font-family: inherit; 7. /* Inclusive o tamanho dela */ 8. font-size: 100%; 9. padding:.25em.5em; 10. width: 100%; 11. box-sizing: border-box; 12. border: 1px solid #ccc; 13. } 14. /* alguns ajustes para o campo "": deixar ele na mesma linha dos outros assuntos */ 15. fieldset > fieldset { 16. display: inline; 17. } 18. /* deixar o rótulo dele inline de novo */ 19. label[for="outro"] { 20. display: inline; 21. } 22. /* deixar só esse campo sem ocupar a tela toda */ 23. input[name="outro-assunto"] { 24. width: auto; 25. } O campo de texto que tiver o foco do teclado deve ficar com o fundo levemente amarelo

11 1. input:focus, 2. textarea:focus { 3. background-color: #FFD; 4. } Os campos que estiverem inválidos devem ter uma sombra vermelha 1. input:invalid { 2. box-shadow: 0 0 3px red; 3. } O botão para enviar o formulário deve ficar na parte inferior direita da página, após o formulário, e ter o mesmo esquema de cores da barra lateral com a fonte usada nos títulos e levemente maior do que o texto normal. Além disso, o botão não deve ter borda 1. button { 2. /* Precisamos tirar a borda que o navegador coloca por padrão */ 3. border: 0; 4. padding:.5em 1em; 5. font-family: "Open Sans Condensed", sans-serif; 6. background-color: #3C1D3D; 7. color: white; 8. font-size: 1.2em; 9. /* Faz com que o botão apareça na direita */ 10. margin-left: auto; 11. margin-top: 1em; 12. } Quando o botão for selecionado pelo teclado ou quando o mouse estiver sobre ele, o fundo deve mudar para a cor #8C1D3D 1. button:focus, 2. button:focus { 3. background-color: #8C1D3D; 4. }