032.4 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
032 Marcação de documentos HTML |
Objetivo: |
032.4 Formulários HTML |
Lição: |
1 de 1 |
Introdução
Os formulários web são uma maneira simples e eficiente de solicitar informações ao visitante de uma página HTML. O desenvolvedor front-end pode usar diversos componentes, como campos de texto, caixas de seleção, botões e muitos outros para construir interfaces que enviam dados ao servidor de forma estruturada.
Formulários HTML simples
Antes de falar do código de marcação específico para formulários, vamos começar com um documento HTML simples em branco, sem nenhum conteúdo no corpo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- The body content goes here -->
</body>
</html>
Salve esse código de exemplo como um arquivo de texto simples com a extensão .html
(por exemplo, form.html
) e use seu navegador favorito para abri-lo. Após alterá-lo, pressione o botão de recarregar no navegador para exibir as modificações.
A estrutura básica do formulário é dada pela própria tag <form>
e seus elementos internos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- Form to collect personal information -->
<form>
<h2>Personal Information</h2>
<p>Full name:</p>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
</body>
</html>
As aspas duplas não são obrigatórias para atributos de palavra única como type
, portanto type=text
funciona tão bem quanto type="text"
. O desenvolvedor pode escolher a convenção que prefere usar.
Salve o novo conteúdo e recarregue a página no navegador. Você deverá ver o resultado mostrado na Figure 1.
A tag <form>
em si não produz nenhum resultado perceptível na página. Os elementos dentro das tags <form>…</form>
definirão os campos e outros auxílios visuais mostrados ao visitante.
O código de exemplo contém tanto as tags gerais do HDML (<h2>
e <p>
) quanto a tag <input>
, que é específica aos formulários. Ao passo que as tags gerais podem aparecer em qualquer lugar do documento, as tags específicas aos formulários devem ser usadas somente dentro do elemento <form>
; isto é, entre a tag de abertura <form>
e a de fechamento </form>
.
Note
|
O HTML inclui apenas as tags e propriedades básicas para modificar a aparência padrão dos formulários. O CSS fornece mecanismos elaborados para modificar a aparência do formulário e, portanto, a recomendação é escrever um código HTML incluindo apenas os aspectos funcionais do formulário, modificando sua aparência com CSS. |
Como mostrado no exemplo, a tag de parágrafo <p>
pode ser usada para descrever o campo para o visitante. No entanto, não há uma maneira óbvia de o navegador relacionar a descrição na tag <p>
com o elemento correspondente de inserção de dados. A tag <label>
é mais apropriada nesses casos (a partir de agora, considere todos os exemplos de código como estando dentro do corpo do documento HTML):
<form>
<h2>Personal Information</h2>
<label for="fullname">Full name:</label>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
O atributo for
na tag <label>
contém o id
do elemento de inserção de dados correspondente. Isso torna a página mais acessível, pois os leitores de tela serão capazes de narrar o conteúdo do elemento de rótulo (label) quando o elemento de inserção de dados estiver selecionado. Além disso, os visitantes podem clicar no rótulo para selecionar o campo de inserção de dados correspondente.
O atributo id
nos elementos de formulário tem o mesmo papel que em qualquer outro elemento do documento. Ele fornece um identificador exclusivo para o elemento. O atributo name
tem uma finalidade semelhante, mas é usado para identificar o elemento de inserção de dados no contexto do formulário. O navegador usa o atributo name
para identificar o campo de inserção de dados ao enviar os dados do formulário para o servidor, por isso é importante usar atributos name
significativos e exclusivos dentro do formulário.
O atributo type
é o principal atributo do elemento de entrada de dados, pois controla o tipo de dados que o elemento aceita e sua apresentação visual ao visitante. Se o atributo type
não for fornecido, por padrão é exibida uma caixa de texto. Os seguintes tipos de campos de entrada de dados são suportados pelos navegadores modernos:
type valores |
Tipo de dados | Como é exibido |
---|---|---|
|
Uma string arbitrária |
N/A |
|
Texto sem quebra de linhas |
Um controle de texto |
|
Texto sem quebra de linhas |
Um controle de pesquisa |
|
Texto sem quebra de linhas |
Um controle de texto |
|
Uma URL absoluta |
Um controle de texto |
|
Um endereço de email ou lista de endereços de email |
Um controle de texto |
|
Texto sem quebra de linhas (informação confidencial) |
Um controle de texto que oculta a inserção de dados |
|
Uma data (ano, mês, dia) sem fuso horário |
Um controle de data |
|
Uma data que consiste em um ano e um mês sem fuso horário |
Um controle de mês |
|
Uma data que consiste em um número de semana-ano e um número de semana sem fuso horário |
Um controle de semana |
|
Um horário (hora, minuto, segundos, frações de segundo) sem fuso horário |
Um controle de horário |
|
Uma data e hora (ano, mês, dia, hora, minuto, segundos, frações de segundo) sem fuso horário |
Um controle de data e hora |
|
Um valor numérico |
Um controle de texto ou controle giratório |
|
Um valor numérico, com a semântica extra de que o valor exato não é importante |
Um controle deslizante ou semelhante |
|
Uma cor sRGB com componentes vermelhos, verdes e azuis de 8 bits |
Um seletor de cores |
|
Um conjunto de zero ou mais valores em uma lista predefinida |
Uma caixa de seleção (oferece opções e permite a seleção de múltiplas opções) |
|
Um valor enumerado |
Um botão de opção (oferece opções e permite que apenas uma seja selecionada) |
|
Zero ou mais arquivos, cada um deles com um tipo MIME e nome de arquivo opcional |
Um rótulo e um botão |
|
Um valor enumerado que encerra o processo de entrada de dados e envia o formulário |
Um botão |
|
Uma coordenada relativa ao tamanho de uma imagem em particular, que finaliza o processo e envia o formulário |
Uma imagem clicável ou um botão |
|
N/A |
Um botão genérico |
|
N/A |
Um botão cuja função é restaurar todos os outros campos aos seus valores iniciais |
A aparência dos tipos de entrada password
, search
, tel
, url
e email
é idêntica à do tipo text
padrão. Sua finalidade é oferecer indicações ao navegador sobre o conteúdo esperado para esse campo de entrada de dados, de modo que o navegador ou o script em execução no lado do cliente possa realizar ações personalizadas para um tipo de entrada específico. A única diferença entre o tipo de entrada de texto e o tipo de campo de senha, por exemplo, é que o conteúdo do campo de senha não é exibido conforme o visitante digita sua senha. Nos dispositivos com tela de toque, nos quais o texto é digitado em um teclado virtual, o navegador pode exibir apenas o teclado numérico quando uma entrada do tipo tel
é selecionada. Outra ação possível é sugerir uma lista de endereços de email conhecidos quando uma entrada do tipo email
está no foco.
O tipo number
também aparece como uma entrada de texto simples, mas com setas de aumentar/diminuir ao lado. Seu uso fará com que o teclado numérico apareça nos dispositivos com tela de toque quando o campo estiver selecionado.
Os outros elementos de inserção de dados têm sua própria aparência e comportamento. O tipo date
, por exemplo, é representado de acordo com as configurações locais de formato de data e um calendário é exibido quando o campo está no foco:
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date">
</p>
</form>
A Figure 2 mostra como a versão para desktop do Firefox apresenta esse campo atualmente.
Note
|
Os elementos podem ter uma aparência ligeiramente diferente em navegadores ou sistemas operacionais distintos, mas seu funcionamento e uso são sempre os mesmos. |
Este é um recurso padrão em todos os navegadores modernos e não requer opções extras ou programação.
Independentemente do tipo de entrada, o conteúdo de um campo de inserção de dados é chamado de valor. Todos os valores do campo aparecem vazios por padrão, mas o atributo value
pode ser usado para definir um valor padrão para o campo. O valor do tipo de data deve usar o formato AAAA-MM-DD. O valor padrão do campo de data a seguir foi definido como 6 de agosto de 2020:
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="2020-08-06">
</p>
</form>
Os tipos de entrada específicos ajudam o visitante a preencher os campos, mas não evitam que ele ignore as restrições e insira valores arbitrários em qualquer campo. Por isso, é importante que os valores dos campos sejam validados ao chegarem ao servidor.
Os elementos do formulário cujos valores devem ser digitados pelo visitante podem ter atributos especiais que auxiliam no preenchimento. O atributo placeholder
(marcador de posição) insere um valor de exemplo no elemento de inserção de dados:
<p>Address: <input type="text" name="address" id="address" placeholder="e.g. 41 John St., Upper Suite 1"></p>
O marcador de posição aparece dentro do elemento de inserção de dados, conforme mostrado na Figure 3.
Assim que o visitante começa a digitar no campo, o texto do marcador de posição desaparece. O texto do marcador de posição não é enviado como o valor do campo caso o visitante deixe o campo vazio.
O atributo required
obriga o visitante a preencher um valor para o campo correspondente antes de enviar o formulário:
<p>Address: <input type="text" name="address" id="address" required placeholder="e.g. 41 John St., Upper Suite 1"></p>
O atributo required
é um atributo booleano; portanto, pode ser posto sozinho (sem o sinal de igual). É importante assinalar os campos que são obrigatórios, caso contrário o visitante não saberá quais campos estão faltando, impedindo o envio do formulário.
O atributo autocomplete
indica se o valor do elemento de entrada pode ser preenchido automaticamente pelo navegador. Se definido como autocomplete="off"
, o navegador não sugere valores anteriores para preencher o campo. Os elementos de inserção de dados para informações confidenciais, como números de cartão de crédito, devem ter o atributo autocomplete
definido como off
.
Campo de entrada para textos grandes: textarea
Ao contrário do campo de texto, onde apenas uma linha de texto pode ser inserida, o elemento textarea
permite que o visitante insira mais de uma linha de texto. O textarea é um elemento separado, mas não é baseado no elemento input:
<p> <label for="comment">Type your comment here:</label> <br>
<textarea id="comment" name="comment" rows="10" cols="50">
My multi-line, plain-text comment.
</textarea>
</p>
A aparência típica de um textarea é mostrado na Figure 4.
textarea
.Outra diferença em relação ao elemento input é que o elemento textarea
tem uma tag de fechamento (</textarea>
), e assim seu conteúdo (ou seja, seu valor) fica entre as duas tags. Os atributos rows
e cols
(linhas e colunas) não limitam a quantidade de texto; eles são usados apenas para definir o layout. O textarea também inclui uma alça no canto inferior direito, que permite ao visitante redimensioná-lo.
Listas de opções
Diversos tipos de controles de formulário podem ser usados para apresentar uma lista de opções ao visitante: o elemento <select>
e os tipos de entrada radio
e checkbox
.
O elemento <select>
é um controle suspenso com uma lista de entradas predefinidas:
<p><label for="browser">Favorite Browser:</label>
<select name="browser" id="browser">
<option value="firefox">Mozilla Firefox</option>
<option value="chrome">Google Chrome</option>
<option value="opera">Opera</option>
<option value="edge">Microsoft Edge</option>
</select>
</p>
A tag <option>
representa uma entrada individual no controle <select>
correspondente. A lista completa aparece quando o visitante toca ou clica no controle, como mostrado na Figure 5.
select
.A primeira entrada da lista é selecionada por padrão. Para alterar esse comportamento, você pode adicionar o atributo selected
a outra entrada, para que ela esteja selecionada quando a página carregar.
O tipo de entrada radio
é semelhante ao controle <select>
, mas em vez de uma lista suspensa ele mostra todas as entradas para que o visitante selecione uma delas. Os resultados do código a seguir são mostrados na Figure 6.
<p>Favorite Browser:</p>
<p>
<input type="radio" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="radio" id="browser-chrome" name="browser" value="chrome">
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="radio" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="radio" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
radio
.Observe que todos os tipos de entrada radio
no mesmo grupo têm o mesmo atributo name
. Cada um deles é exclusivo, de modo que o atributo value
correspondente à entrada escolhida será associado ao atributo name
compartilhado. O atributo checked
funciona como o atributo selected
do controle <select>
. Ele marca a entrada correspondente quando a página é carregada pela primeira vez. A tag <label>
é especialmente útil para as entradas de radio, porque permite ao visitante marcar uma opção clicando ou tocando no texto correspondente, além do próprio controle.
Enquanto os controles radio
se destinam a selecionar uma única opção em uma lista, o tipo de entrada checkbox
(caixa de seleção) permite que o visitante marque diversas opções:
<p>Favorite Browser:</p>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
As caixas de seleção também podem usar o atributo checked
para pré-selecionar opções por padrão. Em vez dos controles redondos da entrada radio, as caixas de seleção são apresentadas como controles quadrados, como mostrado na Figure 7.
checkbox
.Se mais de uma opção for selecionada, o navegador as enviará com o mesmo nome, exigindo que o desenvolvedor de back-end escreva um código específico para ler corretamente os dados do formulário contendo caixas de seleção.
Para melhorar a usabilidade, os campos de entrada podem ser agrupados dentro de uma tag <fieldset>
:
<fieldset>
<legend>Favorite Browser</legend>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
</fieldset>
A tag <legend>
contém o texto que é posto no alto do quadro que a tag <fieldset>
desenha em torno dos controles (Figure 8).
fieldset
.A tag <fieldset>
não altera a forma como os valores dos campos são enviados ao servidor, mas permite que o desenvolvedor de front-end gerencie os controles aninhados com mais facilidade. Por exemplo, definir o atributo disabled
em um atributo <fieldset>
torna todos os seus elementos internos indisponíveis para o visitante.
O tipo de elemento hidden
Em certas situações, o desenvolvedor precisa incluir no formulário informações que não podem ser manipuladas pelo visitante, ou seja, enviar um valor escolhido pelo desenvolvedor sem que haja um campo no formulário onde o visitante possa digitar ou alterar o valor. Isso serviria, por exemplo, para incluir um token de identificação, que não precisa ser visto pelo visitante, para aquele formulário específico. Um elemento oculto de formulário seria escrito como no exemplo a seguir:
<input type="hidden" id="form-token" name="form-token" value="e730a375-b953-4393-847d-2dab065bbc92">
O valor de um campo de entrada oculto é geralmente adicionado ao documento no lado do servidor, no momento de renderizar o documento. As entradas ocultas são tratadas como campos comuns quando o navegador as envia ao servidor, que também as lê como campos de entrada comuns.
O tipo de entrada de arquivo
Além dos dados textuais, que são digitados ou selecionados em uma lista, os formulários HTML também podem enviar arquivos arbitrários ao servidor. O tipo de entrada file
permite ao visitante escolher um arquivo em seu sistema de arquivos local e enviá-lo diretamente pela página
<p>
<label for="attachment">Attachment:</label><br>
<input type="file" id="attachment" name="attachment">
</p>
Em vez de um campo de formulário para escrever ou selecionar um valor, o tipo de entrada file
mostra um botão browse
que abre uma caixa de diálogo de arquivo. Qualquer tipo de arquivo é aceito pelo tipo de entrada file
, mas normalmente o desenvolvedor back-end restringe os tipos de arquivo permitidos e seu tamanho máximo. A verificação do tipo de arquivo também pode ser realizada no front-end, adicionando-se o atributo accept
. Para aceitar apenas imagens JPEG e PNG, por exemplo, o atributo accept
deve ser accept="image/jpeg, image/png"
.
Botões de ação
Por padrão, o formulário é enviado quando o visitante pressiona a tecla Enter em qualquer campo de entrada. Para tornar as coisas mais intuitivas, um botão de envio deve ser adicionado com o tipo de entrada submit
:
<input type="submit" value="Submit form">
O texto do atributo value
é mostrado no botão, como visto na Figure 9.
Outro botão útil a se incluir em formulários complexos é o botão reset
, que limpa o formulário e o devolve ao seu estado original:
<input type="reset" value="Clear form">
Como no caso do botão de enviar, o texto do atributo value
é usado para rotular o botão. Alternativamente, a tag <button>
pode ser usada para adicionar botões em formulários ou em qualquer outro lugar da página. Ao contrário dos botões feitos com a tag <input>
, o elemento de botão tem uma tag de fechamento e o rótulo do botão é seu conteúdo interno:
<button>Submit form</button>
Quando dentro de um formulário, a ação padrão do elemento button
é enviar o formulário. Como no caso dos botões de input, o atributo do tipo button pode ser alterado para reset
.
Ações e métodos do formulário
A última etapa ao se escrever um formulário HTML é definir como e para onde os dados devem ser enviados. Esses aspectos dependem dos detalhes do cliente e do servidor.
No lado do servidor, a abordagem mais comum é configurar um arquivo de script para analisar, validar e processar os dados do formulário de acordo com a finalidade do aplicativo. Por exemplo, o desenvolvedor back-end pode escrever um script chamado receive_form.php
para receber os dados enviados do formulário. No lado do cliente, o script é indicado no atributo action
da tag do formulário:
<form action="receive_form.php">
O atributo action
segue as mesmas convenções de todos os endereços HTTP. Se o script estiver no mesmo nível de hierarquia da página que contém o formulário, ele pode ser escrito sem o caminho completo. Caso contrário, o caminho absoluto ou relativo deve ser fornecido. O script também deve gerar a resposta que servirá como página de destino, carregada pelo navegador após o visitante enviar o formulário.
O HTTP proporciona métodos distintos para enviar dados de formulário por meio de uma conexão com o servidor. Os métodos mais comuns são get
e post
, que devem ser indicados no atributo method
da tag form
:
<form action="receive_form.php" method="get">
Ou:
<form action="receive_form.php" method="post">
No método get
, os dados do formulário são codificados diretamente na URL de solicitação. Quando o visitante envia o formulário, o navegador carrega a URL definida no atributo action
com os campos do formulário anexados a ela.
O método get
é preferível para pequenas quantidades de dados, como formulários de contato simples. No entanto, a URL não pode exceder alguns milhares de caracteres, de modo que o método post
deve ser usado quando os formulários contêm campos grandes ou não textuais, como imagens.
O método post
faz com que o navegador envie os dados do formulário na seção do corpo da solicitação HTTP. Embora necessário para dados binários que excedem o limite de tamanho de uma URL, o método post
adiciona uma sobrecarga desnecessária à conexão quando usado com formas textuais mais simples, por isso o método get
é preferível nesses casos.
O método escolhido não afeta a forma como o visitante interage com o formulário. Os métodos get
e post
são processados de forma diferente pelo script do lado do servidor que recebe o formulário.
Ao usar o método post
, também é possível alterar o tipo MIME do conteúdo do formulário com o atributo de formulário enctype
. Ele afeta a maneira como os campos e valores do formulário serão empilhados na comunicação HTTP com o servidor. O valor padrão para enctype
é application/x-www-form-urlencoded
, semelhante ao formato usado no método get
. Se o formulário contiver campos de entrada do tipo file
, é necessário usar o enctype multipart/form-data
.
Exercícios Guiados
-
Qual a maneira correta de associar uma tag
<label>
a uma tag<input>
? -
Que tipo de elemento de entrada permite criar um controle deslizante para escolher um valor numérico?
-
Qual a finalidade do atributo de formulário
placeholder
? -
Como selecionar por padrão a segunda opção de um controle de seleção?
Exercícios Exploratórios
-
Como alterar uma entrada de arquivo para que sejam aceitos somente arquivos PDF?
-
Como informar o visitante sobre os campos obrigatórios de um formulário?
-
Reúna três fragmentos de código desta lição em um mesmo formulário. Atenção para não usar o mesmo atributo
name
ouid
em múltiplos controles do formulário.
Resumo
Esta lição aborda a criação de formulários HTML simples para enviar dados ao servidor. No lado do cliente, os formulários HTML consistem em elementos HTML padrão que são combinados de forma a construir interfaces personalizadas. Além disso, os formulários devem ser configurados para se comunicarem corretamente com o servidor. A lição trata dos seguintes conceitos e procedimentos:
-
A tag
<form>
e a estrutura básica do formulário. -
Elementos de entrada básicos e especiais.
-
O papel de tags especiais como
<label>
,<fieldset>
e<legend>
. -
Botões e ações do formulário.
Respostas aos Exercícios Guiados
-
Qual a maneira correta de associar uma tag
<label>
a uma tag<input>
?O atributo
for
da tag<label>
deve conter o id da tag<input>
correspondente. -
Que tipo de elemento de entrada permite criar um controle deslizante para escolher um valor numérico?
O tipo de entrada
range
. -
Qual a finalidade do atributo de formulário
placeholder
?O atributo
placeholder
contém um exemplo de inserção de dados pelo visitante que fica visível quando o campo de entrada correspondente está vazio. -
Como selecionar por padrão a segunda opção de um controle de seleção?
O segundo elemento
option
deve trazer o atributoselected
.
Respostas aos Exercícios Exploratórios
-
Como alterar uma entrada de arquivo para que sejam aceitos somente arquivos PDF?
O atributo
accept
do elemento de entrada deve ser configurado paraapplication/pdf
. -
Como informar o visitante sobre os campos obrigatórios de um formulário?
Os campos obrigatórios são geralmente assinalados com um asterisco (
*
), e uma breve explicação como “Os campos marcados com um * são obrigatórios” é incluída no início do formulário. -
Reúna três fragmentos de código desta lição em um mesmo formulário. Atenção para não usar o mesmo atributo
name
ouid
em múltiplos controles do formulário.<form action="receive_form.php" method="get"> <h2>Personal Information</h2> <label for="fullname">Full name:</label> <p><input type="text" name="fullname" id="fullname"></p> <p> <label for="date">Date:</label> <input type="date" name="date" id="date"> </p> <p>Favorite Browser:</p> <p> <input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked> <label for="browser-firefox">Mozilla Firefox</label> </p> <p> <input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked> <label for="browser-chrome">Google Chrome</label> </p> <p> <input type="checkbox" id="browser-opera" name="browser" value="opera"> <label for="browser-opera">Opera</label> </p> <p> <input type="checkbox" id="browser-edge" name="browser" value="edge"> <label for="browser-edge">Microsoft Edge</label> </p> <p><input type="reset" value="Clear form"></p> <p><input type="submit" value="Submit form"></p> </form>