Meu Primeiro Formulário HTML - Guia Do Desenvolvedor Web - MDN

20/09/2017 Meu primeiro formulrio HTML - Guia do desenvolvedor web | MDN
Meu primeiro formulrio HTML
Esta traduo est incompleta. Por favor, ajude a traduzir este artigo.
Este um artigo introdutrio para formulrios HTML. Atravs de um simples formulrio de contato, ns veremos os requisitos bsicos para
construir formulrios HTML. Esse artigo assumeque voc no sabe nada sobre formulrios HTML, mas presume que voc conhece o bsico
de HTMLeCSS.
Antes de comearmos
O que so formulrios HTML?

Formulrios HTML so um dos principais pontos de interao entre um usurio e um web site ou aplicativo. Eles permitem que os usurios
enviem dados para o web site. Namaior parte do tempo, os dados so enviados para o servidor da web, mas a pgina da web tambm
pode interceptar paraus-los por conta prpria.
Um formulrio HTML feitode um ou mais widgets. Esses widgets podem ser campos de texto (linha nica ou de vrias linhas), caixas de
seleo, botes, checkboxes ou radio buttons. A maior parte do tempo, estes elementos so emparelhados com uma legenda que descreve
o seu objetivo.
O que voc precisa para trabalhar com formulrios?

Voc no precisa de nada mais do que o que requisitado para trabalhar com HTML: Um editor de texto e um navegador. claro, que se
voc esta acostumado a us-losvoc pode ter vantagens de uma IDE completacomo Visual Studio, Eclipse, Aptana, etc., mas cabe
https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML 1/15
somente a voc.
A principal diferena entre um formulrio de HTML e um documento regular de HTML que, maioria das vezes, o dado coletado enviado
ao servidor.
Nessecaso,vocprecisaconfigurarumservidorwebpararecebereprocessarosdados.
Comoconfigurarumservidorestalmdoescopodesteartigo,massevocquersabermais,consulteoartigodedicadoaestetema:Sending and
retrieving form data.
Desenhandoseu formulrio
Antes de comear a codi car, sempre melhor dar um passo atrs e tomar o tempo para pensar sobre oseuformulrio. Desenhando um
rascunhorpidoir ajudara de nir o conjunto correto de dados que voc quer perguntar ao usurio. De um ponto de vista da experincia
do usurio (UX), importante lembrar que quanto maior oseuformulrio, maior o risco de perder os usurios. Mantenhao formurio
simples e mantenhao foco: peaapenas o que absolutamente necessrio.
Acriao de formulrios um passo importante quando voc est construindo um site ou um aplicativo. Est alm do escopo deste artigo
cobrir as formas, mas se voc quiser se aprofundar neste tpico voc deve ler os seguintes artigos:
A Smashing Magazine tem timosartigos sobre UX nos formulrios,mas talvez o mais importante o ExtensoGuia para a
usabilidade em formulrios Web.
UXMatters tambm um recurso muito atencioso com bons conselhos de melhores prticas bsicas para conceitoscomplexos, tais
como formulrios de vrias pginas .
Neste artigo vamos construir um formulrio de contato simples.Vamos fazer um esboo.
O nosso formulrio ter trs campos de texto e um boto. Basicamente, pedimos ao usurio o seu nome, seu e-mail e a mensagem que
deseja enviar. Ao apertar o boto apenas ir enviar os dados para o servidor web.
Sujar as mos com HTML
Ok, agora estamos prontos para ir para o cdigo HTMLdo nosso formulrio. Para construir o nosso formulrio de contato, vamos utilizar os
seguintes elementos <form> , <label> , <input> , <textarea> , e <button> .
O Elemento <form>
Todos formulrios HTML comeamcom um elemento <form> como este:
1 <form action="/pagina-processa-dados-do-form" method="post">

2
3 </form>
Este elemento de ne um formulrio. um elemento de containercomo um elemento <div> ou <p> , mas ele tambm suporta alguns
atributos espec cos para con gurar a forma como o formulrio se comporta. Todos os seus atributos so opcionais, mas considerada a
melhor prtica sempre de nirpelo menos o atributo action e o atributo method .
O atributo actionde ne o local (uma URL) em que os dados recolhidos do formulrio devem ser enviados.
O atributo method de ne qual o mtodo HTTP para enviar os dados (ele pode ser "GET" ou "POST" (veja as diferenas aqui).
Se voc quiser se aprofundar em como esses atributos funcionam, est detalhado no artigo Enviando e recebendodados de um formulrio
Adicionar campos com os elementos <label> , <input> , e <textarea>

O nosso formulrio de contato muito simples e contm trs campos de texto, cada um com uma etiqueta. O campo de entrada para o
nome ser um campo bsico texto de linha nica("input"); o campo de entrada do e-mail ser um campo de texto com uma nica
linha("input")que vai aceitar apenas um endereo de e-mail; o campo de entrada para a mensagem ser um campo de texto de vrias
linhas("textarea").
Em termos de cdigo HTML, teremos algo assim:

2 <div>
3 <label for="nome">Nome:</label>
4 <input type="text" id="nome" />
5 </div>
6 <div>
7 <label for="email">E-mail:</label>
8 <input type="email" id="email" />
9 </div>
10 <div>
11 <label for="msg">Mensagem:</label>
12 <textarea id="msg"></textarea>
13 </div>
14 </form>
Os elementos <div> esto l para estruturar nosso cdigo e deixar a estilizaomais fcil (ver abaixo). Observe o uso do atributo for em
todos os elementos <label> ; uma maneira para vincular uma labelum campodoformulrio. Este atributo faz referncia ao id do
campocorrespondente. H algum benefcio para fazer isso, a de permitir que o usurio clique no rtulo para ativar o
campocorrespondente. Se voc quer uma melhor compreenso dos outros benefcios deste atributo, tudo detalhado no artigo:How to
structure an HTML form(en).
No elemento <input> , o atributo mais importante o atributo type . Esse atributo extremamente importante porque de ne a forma
como o elemento <input> se comporta. Ele pode mudar radicalmente o elemento, entopresteateno a ele. Se voc quiser saber mais
sobre isso, leia o artigonative form widgets. Em nosso exemplo, ns usamos somente o type="text", valor padro para este atributo. Ele
representa um campo de texto com uma nica linha que aceita qualquer tipo de texto sem controle ou validao. Ns tambm usamos o
type="email" que de ne um campo de texto com uma nica linha que s aceita um endereo de e-mail bem-formados. Este ltimo valor
torna um campo de texto bsico em uma espcie de campo "inteligente", que ir realizar alguns testes com os dados digitados pelo usurio.
Se voc quiser saber mais sobre a validao de formulrio, detalharemos melhor no artigoForm data validation.
Por ltimo, mas no menos importante, observe a sintaxe de <input /> e <textarea> </ textarea>. Esta uma das esquisitices do
HTML. A tag <input /> um elemento que se auto-fecha, o que signi ca que se voc quiser encerrar formalmente o elemento, voc tem
que adicionar uma barra"/" no nal do prprioelementoe no uma tag de fechamento. No entanto, o tipo <textarea> no um
elemento deauto-fechamento, ento voc tem que fech-lo com a tag nal adequada. Isso tem um impacto sobre um recurso espec co de
formulrios HTML: a maneira como voc de ne o valor padro. Para de nir o valor padro de um elemento <input> voc tem que usar o
atributo value como este:
1 <input type="text" value="Por padro, este elemento ser preenchido com este texto " />
Pelo contrrio, se voc deseja de nir o valor padro de um elemento <textarea> ,voc s tem que colocar esse valor padro no meio das
tags, entretag inicial e atag nal do elemento <textarea> ,como abaixo:
1 <textarea>Por padro, este elemento ser preenchido com este texto </textarea>
E um elemento <button> para concluir

O nosso formulrio est quase pronto; ns temosapenas que adicionar um boto para permitir que o usurio envie seus dados depois de
terpreenchido o formulrio. Isto simplesmente feito usando o elemento <button> :

2 <div>
3 <label for="name">Nome:</label>
4 <input type="text" id="name" />
5 </div>
6 <div>
7 <label for="mail">E-mail:</label>
8 <input type="email" id="mail" />
9 </div>
10 <div>
12 <textarea id="msg"></textarea>
13 </div>
14 <div class="button">
15 <button type="submit">Enviar sua mensagem</button>
16 </div>
17 </form>
Um boto pode ser de trs tipos: submit , reset , ou button .
Um clique sobre um boto de submit envia os dados do formulrio para a pgina de web de nida pelo atributo
action doelemento <form> .
Um clique sobre um boto de reset rede ne imediatamentetodos os camposdoformulrio para o seu valor padro. De um ponto
de vista na usabilidade do usurio(UX), isso considerado uma m prtica.
Um clique em um boto do tipo button faz ...ops, nada! Isso soa bobo, mas incrivelmente til para construir botes personalizados
com JavaScript, ou seja, ele pode assumir qualquer comportamento atravs desta linguagem.
Note que voc tambm pode usar o elemento <input> com o tipo correspondente para produzir um boto. A principal diferena com o
elemento <button> que oelemento <input> permite apenas texto sem formatao como seu valor,enquanto que o elemento
<button> permite que o contedo HTML completo como seuvalor.
Vamos deixar um pouco mais legal com CSS

Agora que temos o nosso formulrio HTML, se voc olhar para ele em seu navegador favorito, voc vai ver que ele parece meio feio.
Vamos deixar ele um pouco mais legal com os cdigosCSS a seguir:
Vamos comear com o prprio formulrio; vamos centraliz-lo e torn-lo visvel com uma borda:
1 form {
2 /* Apenas para centralizar o form na pgina */
3 margin: 0 auto;
4 width: 400px;
5 /* Para ver as bordas do formulrio */
6 padding: 1em;
7 border: 1px solid #CCC;
8 border-radius: 1em;
9 }
Ento, adicionaremos algum espao entre cada conjunto de campos do form:
1 form div + div {

2 margin-top: 1em;
3 }
Agora vamos focar nas labels .Para fazer o nosso formulrio mais legvel, considerada a melhor prtica ter todas as etiquetas do
mesmo tamanho e alinhadas do mesmo lado. Nesse caso, vamos alinh-los para a direita, mas em alguns casos, o alinhamento esquerda
pode car bem tambm.
1 label {
2 /*Para ter certeza que todas as labels tem o mesmo tamanho e esto propriamente alinhadas */
3 display: inline-block;
4 width: 90px;
5 text-align: right;
6 }
Uma das coisas mais difceis de fazer emformulrios HTML so osestilo dos prprios campos.Os campos de texto so fceis de estilizar,
mas alguns outros campos no so. Se voc quiser saber mais sobre estilizaode formulrios HTML, leia o artigoStyling HTML forms.
Aqui vamos usar alguns truques comuns: fontes de harmonizao, tamanho e bordas:
1 input, textarea {
2 /* Para certificar-se que todos os campos de texto tm as mesmas configuraes de fonte. Por padro, textare
3 font: 1em sans-serif;
4
5 /* Para dar o mesmo tamanho a todos os campo de texto */
6 width: 300px;
7 -moz-box-sizing: border-box;
8 box-sizing: border-box;
9
10 /* Para harmonizar o look & feel das bordas nos campos de texto*/
11 border: 1px solid #999;

12 }
Formulrios HTML suportam muitaspseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um
pouco de destaque quando um campoest ativo. uma maneira conveniente para ajudar a manter o controle do usurio de onde eles est
no formulrio.
1 input:focus, textarea:focus {
2 /* Dar um pouco de destaque nos elementos ativos */
3 border-color: #000;
4 }
Campos de texto de vrias linhas precisam de alguns estilos personalizados sozinhos. Por padro, um elemento <textarea> um bloco
em linha com sua parte inferior alinhada linha de base do texto. Na maioria das vezes, no baselineo que queremos. Nesse caso, a m
de alinhar a label e o campo, temos que alterar a propriedade vertical-align do <textarea> para top.
Observe tambm o uso da propriedade de resize, que uma forma de permitir que os usurios redimensionar um elemento <textarea> .
1 textarea {
2 /* Para alinhar corretamente os campos de texto de vrias linhas com sua label*/
3 vertical-align: top;
4
5 /* Para dar espao suficiente para digitar algum texto */
6 height: 5em;
7
8 /* Para permitir aos usurios redimensionarem qualquer textarea verticalmente. Ele no funciona em todos os
9 resize: vertical;
10 }
Muitas vezes, os botes precisam de estilos especiais tambm. Para esse m, ns ocolocamosdentro de uma <div> com umaclasse
css button . Aqui, queremos que o boto estejaalinhado com os outros campos . Para conseguir isso, temos de imitar a presena de uma
<label> . Isso feito utilizando padding e margin .
1 .button {
2 /* Para posicionar os botes para a mesma posio dos campos de texto */
3 padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */
4 }
5 button {
6 /* Esta margem extra representa aproximadamente o mesmo espao que o espao entre as labels e os seus campos
7 margin-left: .5em;
8 }
Agora onossoformulrio parecemuito mais bonito.
Enviar os dados para seu servidor web

A ltima parte, e talvez amais complicado, lidar com dados de formulrio no lado do servidor. Como dissemos antes, na maioria das
vezes, um formulrio HTML uma forma conveniente para perguntar ao usurio os dados e envi-lo para um servidor web.
O elemento <form> de nir onde e como enviar os dados, graas ao atribudo action e ao atributo method
Mas no o su ciente. Ns tambm precisamos dar um nome a nossos dados. Esses nomes so importantes em ambos os lados; no lado
do navegador, ele informa ao navegador que nome dar a cada pedao de dados, e no lado do servidor, ele permite que o servidor lidar com
cada pedao de dados pelo nome.
Ento, para nomear seus dados, voc precisar usar o atributo name em cada campo doformulrio que ir recolher uma parte espec ca
dosdados:

2 <div>
3 <label for="nome">Nome:</label>
4 <input type="text" id="nome" name="usuario_nome" />
5 </div>
6 <div>
7 <label for="email">E-mail:</label>
8 <input type="email" id="email" name="usuario_email" />
9 </div>
10 <div>
12 <textarea id="msg" name="usuario_msg"></textarea>
13 </div>
14
15 <div class="button">
16 <button type="submit">Enviar sua mensagem</button>
17 </div>
18 </form>
Em nosso exemplo, o formulrioir enviar 3 informaes, chamados "usuario_nome", "usuario_email" e "usuario_msg" eos dados sero
enviados para a URL "/pagina-processa-dados-do-form" com o mtodoHTTP:POST .
No lado do servidor, o script na URL "/pagina-processa-dados-do-form"receber os dados como uma lista de itens 3 de chave/valor contidos
na solicitao HTTP. A forma como o script vai lidar com esses dados ca a seu critrio. Cada linguagem server-side (PHP, Python, Ruby,
Java, C #, etc.) tem seu prprio mecanismo. Est alm do escopo deste guia aprofundar o assunto, mas se voc quiser saber mais, vamos
dar alguns exemplos no artigo Sending and retrieving form data.
Concluso
Parabns! Voc construiu seuprimeira formulrio HTML. Aqui est um exemplo do resultado nal.
Live example
Agora hora de dar uma olhada mais profunda. Formulrios HTML so muito mais poderoso do que o que nsvimos aqui e os outros
artigos deste guia ir ajud-lo a dominar o resto.

Meu Primeiro Formulário HTML - Guia Do Desenvolvedor Web - MDN

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Meu Primeiro Formulário HTML - Guia Do Desenvolvedor Web - MDN

Uploaded by

Copyright:

Available Formats

20/09/2017 Meu primeiro formulrio HTML - Guia do desenvolvedor web | MDN

Meu primeiro formulrio HTML

O que so formulrios HTML?

O que voc precisa para trabalhar com formulrios?

Neste artigo vamos construir um formulrio de contato simples.Vamos fazer um esboo.

Sujar as mos com HTML

1 <form action="/pagina-processa-dados-do-form" method="post">

Adicionar campos com os elementos <label> , <input> , e <textarea>

Em termos de cdigo HTML, teremos algo assim:

1 <form action="/pagina-processa-dados-do-form" method="post">

E um elemento <button> para concluir

1 <form action="/pagina-processa-dados-do-form" method="post">

Um boto pode ser de trs tipos: submit , reset , ou button .

Vamos deixar um pouco mais legal com CSS

Vamos deixar ele um pouco mais legal com os cdigosCSS a seguir:

Ento, adicionaremos algum espao entre cada conjunto de campos do form:

1 form div + div {

11 border: 1px solid #999;

Agora onossoformulrio parecemuito mais bonito.

Enviar os dados para seu servidor web

1 <form action="/pagina-processa-dados-do-form" method="post">

You might also like