Internet I
Unidade 6 – Formulários, fielsets, labels e inputs
QI ESCOLAS E FACULDADES
SUMÁRIO
FORMULÁRIOS, FIELDSETS, LABELS E INPUTS ... 3
1 REVISÃO ... 3 2 HTML ... 3 2.1 Formulário ... 3 2.2 Elementos input ... 4 2.2.1 Campo texto ... 4 2.2.2 (Elemento label) ... 5 2.2.3 Campo senha ... 5 2.2.4 Campo radio... 6 2.2.5 Campo checkbox ... 6
2.2.6 Campo de upload de arquivo ... 7
2.2.7 Campo oculto ... 7 2.2.8 Botão limpar ... 8 2.2.9 Botão enviar ... 8 2.3 Elemento textarea ... 9 2.4 Elemento select ... 9 2.5 Fieldset ... 10 3 CSS ... 12 3.1 Bordas arredondadas ... 12
3.2 Cor de fundo com foco ... 13
3.3 Margem interna ... 13
3.4 Outros estilos ... 14
FORMULÁRIOS, FIELDSETS, LABELS E INPUTS
1 REVISÃO
A Unidade 5 apresentou as tabelas, divs e spans do HTML, bem como os estilos CSS apropriados desses três elementos. Nas tabelas, foram mostrados o título, as seções de cabeçalho, corpo e rodapé, suas linhas e células. Também foram formatadas as bordas e as margens internas para tornar sua aparência melhor.
Já sobre as divs e spans, foi visto que ambas são tags que não possuem um significado próprio, são apenas agrupadores de outros elementos HTML. E a principal diferença entre a div e a span é que as divs são elementos block (quebram uma linha) enquanto as spans são elementos inline (mostrados lado a lado).
Essa Unidade 6, por sua vez, apresenta os elementos fundamentais para a criação de formulários em uma página HTML, abordando as tags form, fieldset, label, input, entre outras, e seus principais atributos e estilos.
Os exemplos de formulários vistos nessa Unidade não irão enviar informações a um servidor ainda. Essa comunicação é objeto de estudo das disciplinas que tratam de desenvolvimento Web.
2 HTML
2.1 Formulário
Os formulários são usados para passar dados de uma página para um servidor. Um formulário HTML pode conter elementos de entrada, chamados input, como campos de texto, checkboxes, botões de seleção única (radio), botões de envio e muito mais. Ele também pode ter listas de seleção, áreas de texto, fieldsets para agrupar campos, legendas e labels. Para criar um formulário, utiliza-se a tag <form>.
<form> </form>
Todos os elementos que compõem um formulário devem estar dentro da tag <form>. Somente assim o funcionamento fica correto, e o navegador é capaz de identificar que nessa região há campos a serem enviados para outra página.
Dois atributos do formulário são de grande importância: action e method. O primeiro serve para informar para onde o formulário será enviado ao submeter. Já o segundo pode receber os valores “post” ou “get”, informando o método de envio.
<form action=”cadastrar.php” method=”post”>
<!-- Elementos do formulário vão aqui -->
</form>
No exemplo acima, ao submeter o formulário, os dados dos campos dentro dele seriam enviados para uma página PHP chamada “cadastrar.php” utilizando o método de envio “post”. Na prática, essa página iria receber os dados e processá-los, cadastrando os valores em um banco de dados, por exemplo. E o método “post” quer dizer que as informações enviadas não ficarão expostas na URL da página, diferentemente do método “get” que envia todos os valores concatenados ao endereço do site.
O elemento <form> não fica visível na página, mas é importantíssimo para criar formulários. Os elementos vistos a seguir ficarão sempre dentro de um elemento <form>.
2.2 Elementos input
O mais importante elemento dos formulários é o elemento input. Ele é utilizado para capturar a informação do usuário. Um input pode variar de muitas formas, dependendo de seu atributo type. Os tipos que um input pode assumir são: texto,
checkbox, senha, botão radio, botão de envio, entre outros.
2.2.1 Campo texto
O elemento <input> com o atributo type=”text” define um campo de uma linha em que o usuário pode digitar texto. Também é sempre importante informar um valor ao atributo name, que identificará o dado que está sendo enviado.
<form>
<input type="text" name="nome"> <input type="text" name="sobrenome"> </form>
Os dois campos acima serão apresentados na página como mostra a Figura 1.
Figura 1 – Campos texto de um formulário
Em HTML, todos os campos do formulário devem ter o atributo name definido, pois ele identifica cada um. Sem esse atributo, o formulário não envia os dados dos campos corretamente. Em outras linguagens, como o Java, por exemplo, o atributo utilizado para isso é o id.
O elemento input pode ter, ainda, outros atributos, como maxlength, que recebe um valor numérico representando a quantidade máxima de caracteres aceita, e disabled, que com o valor “disabled” faz com que o campo fique desabilitado para edição.
Os campos de um formulário devem sempre receber um texto que informe ao usuário que dado ele espera receber.
2.2.2 (Elemento label)
Esse sub-item está entre parênteses porque não faz parte dos elementos input, mas deve ser usado juntamente com eles. A tag <label> define um texto para um campo do formulário. Esse elemento tem uma função muito importante na usabilidade dos formulários, porque cria um link entre o texto e o campo escritos dentro dele.
<label>Nome:
<input type="text" name="nome"> </label>
Assim, a página ficará com um campo texto precedido por um texto explicativo que ajuda o usuário a saber qual informação deve ser preenchida nesse campo. A Figura 2 mostra o resultado desse campo com a sua label.
Figura 2 – Campo texto com label
Ao clicar na label “Nome”, o campo de texto receberá foco para que o usuário possa digitar. Por isso, os formulários devem sempre conter labels para todos os campos, melhorando a usabilidade da página.
2.2.3 Campo senha
Voltando aos elementos definidos pela tag <input>, um campo de senha pode ser criado em um formulário utilizando o atributo type=”password”.
<label>Senha:
<input type="password" name="senha"> </label>
Os caracteres em um campo senha recebem uma máscara, sendo mostrados com asteriscos ou círculos, de acordo com cada navegador, como mostra a Figura 3.
Figura 3 – Campo senha em um formulário
2.2.4 Campo radio
O elemento <input> com o atributo type=”radio” define um campo do tipo radio. Esses campos permitem que o usuário selecione apenas um valor de um número limitado de escolhas.
<label>
<input type="radio" name="tipo" value="PF">Pessoa física
</label> <label>
<input type="radio" name="tipo" value="PJ">Pessoa jurídica
</label>
Nesses elementos, é importante definir também os valores dos atributos value, já que todos devem ter o mesmo name. No código acima, o usuário marca uma das opções para o campo “tipo”: PF (Pessoa física) ou PJ (Pessoa jurídica), como mostra a Figura 4.
Figura 4 – Campos radio em um formulário
Campos radio apresentam opções de valores para uma determinada informação do formulário, por isso, eles devem ter o mesmo name definido. Se o name for diferente em cada radio, o usuário poderia selecionar mais de um valor ao mesmo tempo, que não seria correto.
2.2.5 Campo checkbox
O elemento <input> com o atributo type="checkbox" define um checkbox. Essas caixas de seleção permitem que o usuário selecione zero ou mais opções de um número limitado de escolhas.
<label>
<input type="checkbox" name="CNH">Possui CNH
</label> <label>
<input type="checkbox" name="Passaporte">Possui passaporte
Os valores desses campos são enviados como 0 ou 1, caso o usuário tenha marcado ou não a caixa. A Figura 5 mostra o resultado desses dois campos na página.
Figura 5 – Campos checkbox em um formulário
No exemplo acima, o formulário seria enviado com CNH = 1 e Passaporte = 1, pois ambos estão marcados.
2.2.6 Campo de upload de arquivo
O elemento <input> com o atributo type=”file” define um campo em que o usuário pode escolher um arquivo a ser enviado no formulário. Esse campo também pode ter um atributo accept que permite especificar os tipos de arquivos aceitos, como “audio/*”, “video/*” e “image/*”, por exemplo.
<label>Envie sua foto:
<input type="file" name="foto" accept="image/*"> </label>
Por padrão, esse campo é mostrado com um botão para selecionar um arquivo diretamente do computador, como mostra a Figura 6.
Figura 6 – Campo de upload de arquivo em um formulário
2.2.7 Campo oculto
Também é possível inserir um campo oculto em um formulário, que pode ser utilizado para enviar alguma informação que o usuário não precisa visualizar. Para isso, utiliza-se o elemento <input> com o atributo type=”hidden”.
<input type="hidden" name="codigo" value="CD_1234">
Esse campo não fica visível no formulário e, portanto, também não deve ter uma label relacionada. É importante entender, ainda, que, apesar de estar oculto, o valor desse campo é enviado normalmente pelo formulário como todos os outros.
2.2.8 Botão limpar
O elemento <input> com o atributo type=”reset” cria um botão que, quando clicado, limpa os valores de todos os campos do formulário. Nesse elemento é importante definir um valor para o atributo value que será o texto mostrado no botão.
<form>
<label>Nome:
<input type="text" name="nome" maxlength="30"> </label>
<input type="reset" value="Limpar"> </form>
O botão reset não precisa de label, pois já tem um texto definido.
A Figura 7 mostra o resultado do código acima na página.
Figura 7 – Botão limpar em um formulário
Ao clicar no botão, o valor do campo será apagado, pois ambos estão dentro do mesmo formulário. É ideal testar o código no navegador para entender o funcionamento.
2.2.9 Botão enviar
O elemento <input> com o atributo type="submit" define um botão de envio. Esse botão é utilizado para enviar os dados de um formulário para o servidor. Os dados são enviados para a página especificada no atributo action do elemento form. A página definida nesse atributo geralmente executa alguma operação com os dados recebidos.
<form action="login.php" method="post"> <label>Usuário:
<input type="text" name="usuario"> </label>
<label>Senha:
<input type="password" name="senha"> </label>
<input type="submit" value="Entrar"> </form>
Figura 8 – Formulário com campos e botão de envio
2.3 Elemento textarea
A tag <textarea> define um campo de texto com múltiplas linhas. Uma área de texto pode conter um número ilimitado de caracteres, e o texto é mostrado com uma fonte de tamanho fixo por padrão. O tamanho de uma área de texto pode ser definido utilizando os atributos cols e rows ou, melhor ainda, através das propriedades width e
height no CSS.
<textarea name="obs" rows="4" cols="50">Observações...</textarea>
O valor de um textarea fica entre as tags de abertura e fechamento. A Figura 9 mostra a área de texto acima na página.
Figura 9 – Textarea em um formulário
2.4 Elemento select
A tag <select> é usada para criar uma lista de seleção. As tags <option> dentro do elemento select definem as opções disponíveis na lista. As opções da lista podem, ainda, ter um valor declarado explicitamente, usando o atributo value. Através dele, define-se qual valor será enviado pelo formulário dependendo da opção selecionada.
O código abaixo cria uma caixa de seleção de carros, onde a opção Audi tem o valor 1, Mercedes tem o valor 2 e Volvo tem o valor 3.
<select name="carro">
<option value="1">Audi</option> <option value="2">Mercedes</option> <option value="3">Volvo</option> </select>
Figura 10 – Caixa de seleção em um formulário
Por padrão, apenas um valor pode ser escolhido em um elemento select. No entanto, é possível transformá-lo em um campo de múltipla escolha utilizando o atributo
multiple=”multiple”.
<select name="carro" multiple="multiple"> <option value="1">Audi</option>
<option value="2">Mercedes</option> <option value="3">Volvo</option> </select>
Nesse caso, o usuário pode utilizar as teclas ctrl e shift ou mesmo selecionar com o mouse para marcar mais de uma opção. A Figura 11 mostra o select anterior, agora com opção de múltipla escolha.
Figura 11 – Caixa de seleção com múltipla escolha
2.5 Fieldset
A tag <fieldset> é usada para agrupar elementos relacionados em um formulário. Esse elemento desenha uma caixa em volta dos campos. Dentro do fieldset, o elemento
<legend> define um título.
<form action="contato.php" method="post"> <fieldset>
<legend>Contato</legend> <div>
<label>E-mail:
<input type="text" name="email"> </label>
</div> <div>
<select name="assunto">
<option>Compras</option> <option>Sugestões</option> </select> </label> </div> <div> <label>Mensagem: <textarea name="mensagem"></textarea> </label> </div>
<input type="submit" value="Enviar"> <input type="reset" value="Limpar"> </fieldset>
</form>
No código acima, foi criado um formulário e dentro dele um fieldset que engloba todos os campos. Cada label e campo foram colocados dentro um elemento div para que seja quebrada uma linha entre cada um. Além disso, também foi configurada no CSS a propriedade display para block nos campos, para que a label apareça acima deles.
input[type=text], select, textarea {
display: block;
}
A Figura 12 mostra o formulário completo, com todos os seus elementos, criado com os códigos HTML e CSS acima.
3 CSS
Em geral, os elementos dos formulários podem receber praticamente todas as formatações CSS, como cores de letras, planos de fundo, margens, bordas, altura, largura, e assim por diante. Aqui serão mostrados alguns estilos bastante utilizados em campos de formulários, mas é importante entender que a identidade visual pode ser criada de acordo com o gosto de cada programador/designer.
3.1 Bordas arredondadas
É possível definir bordas arredondadas nos elementos de um formulário utilizando a propriedade border-radius no CSS.
input, select, textarea {
border: 1px solid #000000; border-radius: 5px;
}
O código acima aplica borda sólida simples aos elementos input, select e textarea, além de definir uma borda arredondada de 5 pixels.
Os exemplos usados para mostrar os efeitos CSS serão feitos em cima do formulário de contato criado na seção 2.5 Fieldset. A Figura 13 mostra o resultado dessas formatações naquele formulário.
3.2 Cor de fundo com foco
É comum aplicar uma cor de fundo diferente ao elemento do formulário que está com o foco. Para isso, utiliza-se a pseudo-classe focus em conjunto com a propriedade
background-color no CSS.
input:focus, select:focus, textarea:focus {
background-color: #CCDDFF;
}
Nesse exemplo, quando um elemento input, select ou textarea estiver com o foco, sua cor de fundo será alterada para um tom de azul (#CCDDFF). A Figura 14 mostra o formulário de contato com foco no campo E-mail.
Figura 14 – Cor de fundo diferente no foco
Ainda, pode-se querer alterar outras propriedades quando o usuário está com o mouse sobre um campo, como a cor da borda, por exemplo. Para isso, usa-se a pseudo-classe hover combinada com os estilos que serão alterados.
3.3 Margem interna
Os valores dentro dos campos de um formulário ficam mais bem acomodados se for definida uma margem interna, através da propriedade padding do CSS.
input, select, textarea {
margin: 5px; padding: 5px;
}
No código acima definiu-se uma margem externa e também interna de 5 pixels para os elementos do formulário. A Figura 15 mostra o resultado na página.
Figura 15 – Elementos do formulário com margens internas e externas
3.4 Outros estilos
Há algumas outras propriedades bem particulares dos formulários que deixam os elementos com um visual mais agradável, por exemplo:
outline: none; - remove a borda colorida padrão utilizada por alguns
navegadores quando o campo recebe foco.
resize: none; - remove a opção de redimensionar a textarea nos
navegadores que possuem essa funcionalidade.
box-shadow - define uma sombra de determinado tamanho e cor nos
campos do formulário (pode ser usada em outros elementos também).
REFERÊNCIAS
Revolucao.etc.br. Semântica de formulários.
Disponível em: http://revolucao.etc.br/archives/semntica-de-formulrios/. Acesso em: maio/2014.
W3Schools. A tag fieldset.
Disponível em: http://www.w3schools.com/tags/tag_fieldset.asp. Acesso em: maio/2014.
W3Schools. A tag input.
Disponível em: http://www.w3schools.com/tags/tag_input.asp. Acesso em: maio/2014.
W3Schools. A tag label.
Disponível em: http://www.w3schools.com/tags/tag_label.asp. Acesso em: maio/2014.
W3Schools. A tag select.
Disponível em: http://www.w3schools.com/tags/tag_select.asp. Acesso em: maio/2014.
W3Schools. A tag textarea.
Disponível em: http://www.w3schools.com/tags/tag_textarea.asp. Acesso em: maio/2014.
W3Schools. Formulários HTML.
Disponível em: http://www.w3schools.com/html/html_forms.asp. Acesso em: maio/2014.
