1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
title: Formulários da Web - Trabalhando com dados do usuário
slug: Web/Guide/HTML/Forms
tags:
- Aprender
- Funcionalidades
- Guía
- HTML
- Iniciante
- Web
- formulários
translation_of: Learn/Forms
---
<div>{{LearnSidebar}}</div>
<p class="summary"><span class="seoSummary">Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms.</span> HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas, <span>nem sempre é óbvio como usá-los em seu pleno potencia</span>l. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!</p>
<h2 id="Pré-requisitos">Pré-requisitos</h2>
<p>Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>.</p>
<div class="note">
<p><strong>Dica</strong>: Se você está usando um computador/tablet/outro aparelho onde você não pode criar seus próprios arquivos, você pode testar (a maior parte) dos códigos de exemplo em uma ferramenta online como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/pt-BR/">Thimble</a>.</p>
</div>
<h2 id="Guias_básicos">Guias básicos</h2>
<p>Os seguintes guias te ensinarão todo o básico de formulários HTML, alcançando alguns tópicos ligeiramente mais avançados no caminho.</p>
<dl>
<dt><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Meu primeiro formulário HTML</a></dt>
<dd>O primeiro artigo na série te instruirá em sua primeira vez criando um formulário HTML, incluindo o projeto/desenho de um formulário simples, implementação usando os elementos HTML corretos, estilização bem básica com CSS, e como os dados são enviados para um servidor.</dd>
<dt><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Como estruturar um formulário HTML</span></a></dt>
<dd><span>Agora que o básico não é mais problema, daremos uma olhada mais aprofundada nos elementos usados para dar estrutura e significado para as diferentes partes de um formulário.</span></dd>
<dt><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Os form widgets nativos </span></a></dt>
<dd>Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.</dd>
<dt><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando e recuperando dados</span></a></dt>
<dd><span>Este artigo mostra o que acontece quando um usuário submete (envia) um formulário </span>—<span> para onde os dados vão, e o que fazer quando ele chegar lá? Também algumas das preocupações com segurança envolvida ao enviar dados em um formulário.</span></dd>
<dt><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validação de dados nos formulários HTML</a></dt>
<dd>Enviar os dados não é o suficiente — também precisamos garantir que os dados que o usuário preenche num formulário está no formato correto que precisamos para processá-los com sucesso, e que não quebre nossas aplicações. Também queremos ajudar nossos usuários a preencher os formulários corretamente e não se sentirem frustrados ao usar nossos apps. Validação de dados nos ajuda a alcançar esses objetivos — este artigo te diz o que precisa saber.</dd>
</dl>
<h2 id="Guias_avançados">Guias avançados</h2>
<p>Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.</p>
<dl>
<dt><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Como criar widgets HTML form personalizados</a></dt>
<dd>Você encontrará alguns casos onde os widgets nativos não fornecem o que você precisa, por exemplo em função de estilo ou funcionalidade. Nestes casos, você precisará construir seu próprio widget de formulário a partir de HTML puro. Neste artigo explicamos como você pode fazer isso e o que precisa considerar ao fazer isso, com um estudo de caso prático.</dd>
<dt><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando HTML forms através do JavaScript</a></dt>
<dd>Este artigo mostra formas de usar um formulário para montar um HTTP request e enviá-lo via JavaScript personalizado, em vez da forma de submissão padrão. Também apresenta razões pelas quais você quereria fazer isso, e as implicações de fazer dessa forma. (Veja também Usando o objeto FormData.)</dd>
<dt><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formulários HTML para browsers antigos</a></dt>
<dd>Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.</dd>
<dt><a href="/pt-BR/docs/HTML/Forms_in_HTML">Novidades em formulários no HTML5</a></dt>
<dd>Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.</dd>
</dl>
<h2 id="Guias_de_estilização_de_formulários">Guias de estilização de formulários</h2>
<p>Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre <a href="/pt-BR/docs/Aprender/CSS">CSS</a>, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.</p>
<dl>
<dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilizando formulários HTML</a></dt>
<dd>Este artigo fornece uma introdução à personalização de estilos de formulário com CSS, incluindo todo o básico que você precisa para tarefas básicas de estilização.</dd>
<dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avançados para HTML forms</a></dt>
<dd>Aqui vemos algumas técnicas mais avançadas de estilização de formulários que precisam ser usadas quando tiver de lidar com alguns dos elementos mais difíceis de personalizar.</dd>
<dt><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabela de compatibilidade das Propriedades dos widgets</a></dt>
<dd>Este último artigo fornece uma referência prática que te permite procurar quais propriedades CSS são compatíveis com quais elementos de formulário.</dd>
</dl>
<h2 id="Avaliações">Avaliações</h2>
<p>A definir.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/pt-BR/docs/Web/HTML/Element#Formulários">Referência de elementos de formulário HTML</a></li>
</ul>
|
