Os formulários HTML são ferramentas poderosas para interagir com os usuários, porém, por razões históricas e técnicas, nem sempre é óbvio como utilizá-los em todo o seu potencial. Neste capítulo, cobriremos todos os aspectos dos formulários HTML, da estrutura ao estilo, do tratamento de dados aos widgets personalizados.
Formulário: coleta diferentes tipos de dados de entrada do usuário e os envia ao servidor para realizar a interação de dados entre o usuário e o servidor.
A tag do formulário declara o escopo da coleta de dados. Enquanto estiver no formulário, são os dados a serem coletados.
Pode haver várias tags de formulário em uma página e elas só podem estar em um relacionamento paralelo e não podem ser aninhadas. Quando os usuários enviam dados para o servidor, eles só podem enviar dados em um formulário por vez. Se quiser enviar vários formulários, você precisará usar interação assíncrona em js.
elemento <formulário>
Formulários HTML são usados para coletar informações do usuário.
Formulário HTML de definição de elemento:
<form>.formelements.</form>
1. Os formulários HTML contêm elementos de formulário.
Os elementos do formulário referem-se a diferentes tipos de elementos de entrada, caixas de seleção, botões de opção, botões de envio, etc.
(1) elemento <entrada>
O elemento <input> é o elemento mais importante do formulário. O elemento <input> possui vários formatos, dependendo do atributo type. Este é o tipo usado neste capítulo:
(2) Entrada de texto
<input type=text> define um campo de entrada de linha única para entrada de texto:
<!DOCTYPEhtml><html><body><form>Sobrenome:<br><inputtype=textname=firstname><br>Nome:<br><inputtype=textname=lastname></form><p>Por favor observe que o próprio formulário é invisível. </p><p>Observe também que a largura padrão dos campos de texto é de 20 caracteres. </p></body></html>
Os resultados apresentados são os seguintes:
(3) Entrada do botão de rádio
<input type=radio> define botões de opção. Os botões de opção permitem que o usuário selecione uma dentre um número limitado de opções:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>Masculino<br><inputtype=radioname=sexvalue=2>Feminino</form></body></html>
Os resultados apresentados são os seguintes:
(4) Botão enviar
<input type=submit> define o botão usado para enviar o formulário ao manipulador de formulários. Um manipulador de formulário normalmente é uma página de servidor que contém scripts para processar dados de entrada. O manipulador de formulário é especificado no atributo action do formulário:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Sobrenome:<br><inputtype=textname=firstnamevalue=李><br>Nome:<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Submit></form><p>Se você clicar em Enviar, os dados do formulário serão enviados para uma página chamada demo_form.ashx para processamento posterior. </p></body></html>
Os resultados apresentados são os seguintes:
2. Atributos do formulário:
(1) Atributo de ação
O atributo action define a ação a ser executada quando o formulário for enviado. A maneira usual de enviar um formulário ao servidor é usar um botão de envio. Normalmente, os formulários são enviados para uma página da web em um servidor da web. No exemplo acima, um script de servidor é especificado para tratar o formulário enviado:
<formação=action.php>
Se o atributo action for omitido, a ação será definida para a página atual.
(2) Atributo do método
O atributo method especifica o método HTTP (GET ou POST) usado ao enviar o formulário:
<formaction=action.phpmethod=GET>
ou:
<formação=action.phpmethod=POST>
Quando usar GET?
Você pode usar GET (o método padrão): se o envio do formulário for passivo (como uma consulta em um mecanismo de pesquisa) e não houver informações confidenciais. Quando você usa GET, os dados do formulário ficam visíveis na barra de endereço da página:
action_page.php?firstname=Han&lastname=Meimei
Nota: GET é mais adequado para enviar pequenas quantidades de dados. O navegador definirá um limite de capacidade (255 caracteres).
Quando usar o POST?
Você deve usar POST: se o formulário estiver atualizando dados ou contiver informações confidenciais (como senhas). POST é mais seguro porque os dados enviados na barra de endereço da página ficam invisíveis.
(3) Atributo de nome
Cada campo de entrada deve ter um atributo de nome definido para ser enviado corretamente. Este exemplo enviará apenas o campo de entrada Sobrenome:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Sobrenome:<br><inputtype=textvalue=李><br>Nome:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Enviar></form><p>Se você clicar em Enviar, os dados do formulário serão enviados para uma página chamada demo_form.ashx. </p><p>O sobrenome não será enviado porque este elemento de entrada não possui um atributo name. </p></body></html>
Os resultados apresentados são os seguintes:
3. Controles de formulário
Combine os dados do formulário com <fieldset>
O elemento <fieldset> combina dados relacionados em um formulário. O elemento <legend> define o título do elemento <fieldset>.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>Informações pessoais:</legend>Sobrenome:<br><inputtype=textname=firstnamevalue=Mickey><br > Nome:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Enviar></fieldset></form></body></html>
Formulários são utilizados para coletar dados do usuário, que precisam ser preenchidos em diversos controles. Os controles HTML também são implementados através de tags, mas apresentarão algumas aparências especiais e terão algumas funções interativas.
Os formulários HTML podem conter controles conforme mostrado na tabela a seguir: