Estruturando a web com HTML - Aprendendo desenvolvimento web

Estruturando a web com HTML
===========================

Para construir websites, você deve conhecer sobre HTML — a tecnologia fundamental usada para definir a estrutura de uma página web. HTML é usado para especificar se o conteúdo da web deve ser reconhecido como um parágrafo, uma lista, um título, um link, uma imagem, um visualizador multimídia, um formulário ou um dos muitos outros elementos disponíveis ou até mesmo um novo elemento definido por você.

Percurso de aprendizagem
------------------------

Você deve, preferencialmente, iniciar sua jornada aprendendo HTML. Comece lendo Introdução ao HTML. Você pode então passar a aprender sobre tópicos mais avançados, tais como:

* CSS e como usá-lo para estilizar o HTML (como por exemplo alterar o tamanho e a fonte usados, adicionar bordas e sombras, definir o layout da sua página com várias colunas, adicionar animações e outros efeitos visuais).
* JavaScript e como usá-lo para adicionar funcionalidade dinâmica para páginas da web (como por exemplo encontrar sua localização e exibí-la em um mapa, fazer com que elementos da interface gráfica apareçam/desapareçam quando se pressiona um botão, salvar os dados do usuário localmente em seus computadores e muito mais).

Antes de iniciar este tópico, você deve pelo menos ter uma familiaridade básica com o uso de computadores e com a web (por exemplo: apenas olhando para ele, consumindo o conteúdo). Você deve ter um ambiente básico de trabalho configurado como detalhado em Instalando os programas básicos e entender como criar e gerenciar arquivos, como detalhado em Lidando com arquivos — ambos fazem parte do nosso módulo para iniciantes Introdução à Web.

Recomenda-se que você complete o módulo Introdução à Web antes de tentar este tópico, mas isto não é absolutamente necessário; muito do que é abordado no artigo HTML básico é também abordado no nosso módulo Introdução ao HTML, embora com muito mais detalhes.

Módulos
-------

Este tópico contém os seguintes módulos, em uma ordem sugerida para trabalhar com eles. Você deve definitivamente começar com o primeiro módulo.

Introdução ao HTML

Este módulo define o cenário, introduzindo você a conceitos e sintaxe importantes, procurando aplicar HTML ao texto, como criar hiperlinks e como usar HTML para estruturar uma página da web.

Multimídia e incorporação

Este módulo explora como usar HTML para incluir multimídia em suas páginas web, incluindo as diferentes formas que as imagens podem ser inseridas e como incorporar vídeo, áudio e até mesmo outras páginas inteiras.

Tabelas HTML

Representar dados tabulares em uma página da web de maneira compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica de tabelas, além de outros recursos mais complexos, tais como a implementação de legendas e resumos.

Resolvendo problemas comuns com HTML
------------------------------------

Usar HTML para resolver problemas comuns fornece links para seções com conteúdos que explicam como usar HTML para resolver problemas muito comuns ao criar uma página da web: lidar com títulos, adicionar imagens ou vídeos, enfatizar conteúdo, criar um formulário básico, etc.

Veja também
-----------

Formulários HTML

Este módulo fornece uma série de artigos que ajudarão você a dominar o essencial dos formulários da web. Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. No entanto, por razões históricas e técnicas, nem sempre é óbvio como usá-las em todo o seu potencial. Abordaremos todos os aspectos essenciais dos formulários da Web, incluindo marcação de sua estrutura HTML, controles de estilo, validação de dados e envio de dados ao servidor.

HTML (Linguagem de Marcação de HiperTexto)

O principal ponto de entrada para a documentação HTML no MDN, incluindo referências detalhadas de elementos e atributos — se você quiser saber quais atributos um elemento possui ou quais valores tem um atributo, por exemplo, este é um ótimo lugar para começar.


Formulários da Web - Trabalhando com dados do usuário - Aprendendo desenvolvimento web

Formulários da Web - Trabalhando com dados do usuário
=====================================================

Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms. HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas, nem sempre é óbvio como usá-los em seu pleno potencial. 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!

Pré-requisitos
--------------

Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa Introdução ao HTML.

**Nota:** **Dica**: 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 JSBin ou Thimble.

Guias básicos
-------------

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.

Meu primeiro formulário HTML (en-US)

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.

Como estruturar um formulário HTML (en-US)

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.

Os form widgets nativos (en-US)

Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.

Enviando e recuperando dados (en-US)

Este artigo mostra o que acontece quando um usuário submete (envia) um formulário — 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.

Validação de dados nos formulários HTML (en-US)

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.

Guias avançados
---------------

Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.

Como criar widgets HTML form personalizados (en-US)

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.

Enviando HTML forms através do JavaScript (en-US)

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.)

Formulários HTML para browsers antigos (en-US)

Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.

Novidades em formulários no HTML5 (en-US)

Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.

Guias de estilização de formulários
-----------------------------------

Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre CSS, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.

Estilizando formulários HTML (en-US)

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.

Estilos avançados para HTML forms (en-US)

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.

Tabela de compatibilidade das Propriedades dos widgets (en-US)

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.

Avaliações
----------

A definir.

Veja também
-----------

* Referência de elementos de formulário HTML


Programação de site do lado do servidor - Aprendendo desenvolvimento web

Programação de site do lado do servidor
=======================================

O tópico de ***Websites Dinâmicos - Programação do lado do servidor*** é uma série de módulos que mostram como criar sites dinâmicos; sites que fornecem informações personalizadas em resposta a solicitações HTTP. Os módulos fornecem uma introdução genérica à programação do lado do servidor, juntamente com guias específicos de nível iniciante sobre como usar os frameworks web Django (Python) e Express (Node.js / JavaScript) para criar aplicativos básicos.

A maioria dos principais sites utilizam algum tipo de tecnologia do lado do servidor para exibir dinamicamente dados diferentes conforme necessário. Por exemplo, imagine quantos produtos estão disponíveis na Amazon e imagine quantos posts foram escritos no Facebook? Exibir tudo isso usando páginas estáticas completamente diferentes seria completamente ineficiente, então, em vez disso, esses sites exibem modelos estáticos (construídos usando HTML, CSS, e JavaScript), e então atualizam dinamicamente os dados exibidos dentro desses modelos quando necessário, por exemplo, quando você quiser ver um produto diferente na Amazon.

No mundo moderno do desenvolvimento web, aprender sobre o desenvolvimento do lado do servidor é altamente recomendado.

Caminho de aprendizagem
-----------------------

Começar a usar a programação do lado do servidor geralmente é mais fácil do que com o desenvolvimento do lado do cliente, porque sites dinâmicos tendem a executar muitas operações similares (recuperando dados de um banco de dados e exibindo-os em uma página, validando dados inseridos pelo usuário e salvando-os em um banco de dados, verificando permissões de usuários e registrando usuários, etc.) e são construídos usando estruturas da Web que facilitam essas e outras operações comuns de servidor da Web.

Um conhecimento básico de conceitos de programação (ou de uma linguagem de programação específica) é útil, mas não essencial. Semelhantemente, a especialização em codificação do lado do cliente não é necessária, mas um conhecimento básico ajudará você a trabalhar melhor com os desenvolvedores criando seu "front end" da Web do lado do cliente.

Você precisará entender "como a web funciona". Recomendamos que você leia primeiro os seguintes tópicos:

* O que é um servidor web?
* Qual software eu preciso para construir um website?
* Como você faz o upload de arquivos para um servidor web?

Com essa compreensão básica, você estará pronto para percorrer os módulos desta seção.

Modulos
-------

Este tópico contém os seguintes módulos. Você deve começar com o primeiro módulo e depois seguir para um dos módulos seguintes, que mostram como trabalhar com duas linguagens do lado do servidor muito populares usando estruturas da Web apropriadas.

Primeiros passos de programação do site do lado do servidor

Este módulo fornece informações agnósticas sobre a tecnologia do servidor sobre programação de sites do lado do servidor, incluindo respostas a perguntas fundamentais de programação do lado do servidor — "o que é isso", "como ela difere da programação do lado do cliente", e "porque é tão útil" — e uma visão geral de alguns dos mais populares frameworks do lado do servidor e orientações sobre como selecionar o mais adequado para o seu site. Por fim, fornecemos uma seção introdutória sobre segurança do servidor da web.

Framework Web Django (Python)

O Django é um framework web do lado do servidor extremamente popular e cheio de recursos, escrito em Python. O módulo explica por que o Django é uma estrutura de servidor da Web tão boa, como configurar um ambiente de desenvolvimento e como executar tarefas comuns com ele.

Framework Web Express (Node.js/JavaScript)

O Express é um framwork web popular, escrito em JavaScript e hospedado no ambiente de tempo de execução node.js. O módulo explica alguns dos principais benefícios dessa estrutura, como configurar seu ambiente de desenvolvimento e como executar tarefas comuns de desenvolvimento e implantação da web.


JavaScript - Aprendendo desenvolvimento web

JavaScript
==========

JavaScript é uma linguagem de programação que permite implementar funcionalidades mais complexas em páginas web. Sempre que uma página web faz mais do que apenas mostrar informações estáticas para você - ela mostra em tempo real conteúdos atualizados, mapas interativos, animações gráficas em 2D/3D, vídeos, etc. - você pode apostar que o Javascript provavelmente está envolvido.

O caminho para o aprendizado
----------------------------

O JavaScript não é tão fácil de aprender como outras linguagens, como HTML e CSS, que são outros dois pilares do desenvolvimento front-end. Antes de tentar aprender JavaScript, é altamente recomendável que você aprenda e se familiarize com pelo menos estas duas tecnologias primeiro. Você pode começar através dos seguintes módulos:

* Começando na Web
* Introdução ao HTML
* Introdução ao CSS

Possuir experiência em outras linguagens de programação pode também ser útil.

Depois de aprender o básico de JavaScript, você estará apto a estudar tópicos mais avançados, como:

* JavaScript aprofundado, como ensinado em Guia JavaScript
* Referências API Web (en-US)
Módulos
-------

Este tópico contém os seguintes módulos, em uma ordem que sugerimos para estudá-los.

Primeiros passos em JavaScript

Em nosso primeiro módulo JavaScript, primeiro responderemos algumas questões fundamentais como "o que é JavaScript?", "Como ele se parece?" E "o que ele pode fazer?", antes de passar para sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos alguns recursos chave do JavaScript em detalhes, como variáveis, cadeias de caracteres, números e matrizes.

Blocos de codigo JavaScript

Neste módulo, continuaremos a falar sobre os principais recursos fundamentais do JavaScript, voltando nossa atenção para os tipos mais comuns de blocos de código\*\*,\*\* como instruções condicionais, funções e eventos. Você já viu essas coisas no curso, mas apenas de passagem, aqui discutiremos tudo explicitamente.

Introdução a objetos em JavaScript

Em JavaScript, a maioria das coisas são objetos, desde seus principais recursos até as APIs do navegador. Você pode até criar seus próprios objetos.É importante entender a natureza orientada a objetos do JavaScript se você quiser ir mais longe com seu conhecimento da linguagem e escrever um código mais eficiente, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, observamos como criar seus próprios objetos e explicamos quais são os dados JSON e como trabalhar com eles.

**JavaScript Assíncrono**

Neste módulo, examinamos o JavaScript assíncrono, por que é importante e como ele pode ser usado para lidar efetivamente com possíveis operações de bloqueio, como a busca de recursos de um servidor.

API's Web do lado cliente

Ao escrever JavaScript para sites ou aplicativos da Web, você não vai muito longe antes de começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou até dados de outros sites ou serviços. Neste módulo, vamos explorar o que são as APIs e como usar algumas das APIs mais comuns que você encontrará com frequência em seu trabalho de desenvolvimento.

Aprofundando
------------

Uma vez que você se acostumar com o mundo do JavaScript aqui estão alguns outros módulos em que você pode mergulhar:

Biblioteca de referência JavaScript

Em nossa extensa biblioteca de referência você encontrará cada aspecto de Javascript tratado em detalhes: objetos globais, operadores, declarações e funções.

Introdução à Orientação a Objetos (OO) em JavaScript (en-US)

Introdução aos conceitos de Programação orientada a objetos em JavaScript.

Resolvendo problemas comuns com Javascript
------------------------------------------

Use Javascript para resolver problemas comuns, este link proporciona contéudos explicativos de como usar o JavaScript para solucionar problemas muito comuns ao criar uma página da Web.

Veja também
-----------

* JavaScript: O ponto de entrada principal para a documentação básica do JavaScript no MDN - é aqui que você encontrará extensos documentos de referência em todos os aspectos do JavaScript e alguns tutoriais avançados destinados a JavaScripters experientes.
* Matemática do programador: Uma excelente série de vídeos que ensina a matemática necessária para ser um bom programador, por Keith Peters.


Introdução à Web - Aprendendo desenvolvimento web

Introdução à Web
================

*Introdução à Web* é uma série concisa que apresenta os aspectos práticos do desenvolvimento web. Você configurará as ferramentas necessárias para construir uma página web simples e publicará seu próprio código.

A história do seu primeiro website
----------------------------------

É muito trabalhoso criar um site profissional, então se você é um iniciante em desenvolvimento web, nós encorajamos você a começar pequeno. Você não vai construir outro Facebook imediatamente, mas não é difícil colocar seu próprio site online, então vamos começar por aí.

Por meio dos artigos listados abaixo, você vai sair do nada e vai construir sua primeira página online. Vamos lá!

### Instalando os programas básicos

Quando se trata de ferramentas para construir um site, há muito a se escolher. Se você está começando, pode ficar confuso com a variedade de editores de código, frameworks e ferramentas de teste existentes. Em Instalando os programas básicos nós vamos te mostrar passo a passo como instalar apenas o software necessário para começar o desenvolvimento web básico.

### Como será o seu site?

Antes de começar a escrever o código do seu site, você deve planejá-lo primeiro. Quais informações você vai disponibilizar? Quais fontes e cores você irá usar? Em Como será seu site? Nós fornecemos um método simples que você pode seguir para planejar o conteúdo e design do seu site.

### Lidando com arquivos

Um site consiste em muitos arquivos: conteúdo de texto, código, folhas de estilo, conteúdo de mídia etc. Ao criar um site, você precisa reunir esses arquivos em uma estrutura que faça sentido e garantir que eles possam se conectar. Lidando com arquivos explica como configurar uma estrutura de arquivos para o seu site e sobre quais problemas você deve estar ciente.

### HTML básico

Linguagem de Marcação de Hypertexto (HTML - Hypertext Markup Language) é o código que você usa para estruturar seu conteúdo web, dando significado e propósito. Por exemplo, meu conteúdo é organizado em parágrafos, ou em uma lista de pontos? Eu tenho imagens na minha página? Eu tenho uma tabela de dados? Sem pressionar você, o HTML básico provê informação suficiente para você se familiarizar com HTML.

### CSS básico

Folhas de Estilo em Cascata (CSS - Cascading Stylesheets) é o código que você usa para dar estilo ao seu site. Por exemplo, você quer que seu texto seja preto ou vermelho? Onde o conteúdo deve aparecer na tela? Quais imagens ou cores de fundo devem ser usadas para decorar seu site? CSS básico provê o necessário para você começar.

### JavaScript básico

JavaScript é a linguagem de programação que você usa para adicionar recursos interativos ao seu site. Alguns exemplos podem ser jogos, coisas que acontecem quando botões são pressionados ou dados que são inseridos em formulários, efeitos dinâmicos de estilo, animação e muito mais. JavaScript básico vai te dar uma ideia do que é possível com essa excitante linguagem de programação e como começar a usá-la.

### Publicando seu site

Uma vez que você tenha acabado de escrever seu código e organizado os arquivos que compõem seu site, você precisa disponibilizar tudo isso online para que as pessoas possam achá-lo. Publicando seu site descreve como colocar seu código online com o mínimo de esforço.

### Como a web funciona

Quando você acessa seu site favorito, um monte de coisas complicadas acontecem em segundo plano que você pode não conhecer. Como a web funciona mostra o que acontece quando você visualiza um site no seu computador.

Veja também
-----------

* Web Demystified: Uma grande série de vídeos explicando os fundamentos da web, destinados a levar iniciantes ao desenvolvimento web. Criado por Jérémie Patonnier..
* A web e seus padrões: Este artigo fornece algumas informações úteis na Web - como surgiu, quais são as tecnologias padrão da Web, como elas funcionam juntas, por que "desenvolvedor da Web" é uma ótima carreira para escolher e que tipos de práticas recomendadas você aprenderá sobre o curso.


Aprenda a estilizar HTML utilizando CSS - Aprendendo desenvolvimento web

Aprenda a estilizar HTML utilizando CSS
=======================================

Cascading Stylesheets — ou CSS — é a primeira tecnologia que você deve aprender após o HTML. Enquanto o HTML é utilizado para definir a estrutura e semântica do seu conteúdo, o CSS é usado para estilizá-lo e desenhá-lo. Por exemplo, você pode usar o CSS para alterar a fonte, cor, tamanho e espaçamento do seu conteúdo, dividí-lo em multiplas colunas, ou adicionar animações e outros recursos decorativos.

Percurso de aprendizagem
------------------------

Você deveria aprender o básico de HTML antes de tentar algo com CSS. Nós recomendamos que você comece através da nossa Introdução ao HTML.Neste módulo você irá aprender sobre:

* CSS, começando com a introdução ao CSS
* Módulos HTML mais avançados
* JavaScript, e como utiliza-lo para adicionar funcionalidade dinâmica as páginas da web

Uma vez que voce entendeu os Fundamentos do HTML, Nós recomendamos que você aprenda HTML e CSS ao mesmo tempo, movendo-se para trás e para frente entre os dois temas. Isso por que HTML é muito mais interessante com CSS e você não pode aprender realmente CSS sem conhecer HTML.

Antes de iniciar este tópico, você também deve ter ao menos familiaridade com o uso de computadores, e utilizar a Web passivamente (isto é, apenas navegando e consumindo conteúdo.) Você deve ter uma configuração básica de ambiente de trabalho, conforme detalhado no Instalando o software básico, e entender como criar e gerenciar arquivos, conforme detalhado em Lidando com arquivos — ambos são partes do nosso Como começar com a web módulo completo de iniciante.

É recomendável que você trabalhe através do Como começar com a web antes de começar este tema. Contudo, não é absolutamente necessário; ja que muito do que é abordado no artigo básico de CSS também é coberto em nossa introdução ao CSS, embora com muito mais detalhes.

Módulos
-------

Este tópico contém os seguintes módulos em uma ordem sugerida para trabalhar através deles. Você deve definitivamente começar com o primeiro.

Introdução ao CSS

Este módulo é uma introdução com as noções básicas de como CSS funciona, incluindo seletores e propriedades, escrever regras CSS, aplicando CSS para HTML, como especificar comprimento, cor e outras unidades em CSS, controlar cascatas e heranças, noções básicas de box model e depuração CSS.

Estilo de texto

Aqui nós olhamos os fundamentos do estilos de texto, incluindo a configuração da fonte, negrito, itálico, linha e espaçamento das letras, além de sombras e outros componentes de texto. Nós usamos este módulo para personalizar fontes para sua página, e estilizar listas e links.

Caixas de estilo (en-US)

Próximo, procuramos as caixas de estilo, um dos passos fundamentais para elaborar uma página web. Neste módulo, nós recapitulamos box model para então controlarmos o layout por configuração de padding, borders e margins, configurações personalizada do background colors , imagens e outros componentes, componentes elegantes tais como sombras e filtros das caixas.

CSS layout

Neste ponto, nós olharemos os fundamentos CSS, como estilizar o texto, e como estilizar e manipular as caixas com conteudos alocados. Agora é hora de olhar como pôr suas caixas no lugar certo em relação ao viewport, e outros. Nós temos cobertos os pré-requisitos necessários para então agora podemos aprofundar no layout CSS, olhar em diferentes configurações de telas, tradicionais métodos envolvendo float e posicionamento, além de novos ferramentas de flanged layouts como flexbox, CSS Grid e posicionamento, alem de algumas tecnicas que voce ainda pode querer conhecer.

Design Responsivo (TBD)

Com tantos tipos diferentes de dispositivos capazes de navegar pela internet nos dias de hoje, design web responsivo (en-US) (RWD) se tornou uma habilidade primordial para o desenvolvimento web. Esse módulo irá cobrir os principios básicos e ferramentas do RWD, explicar como aplicar diferentes arquivos CSS à um documento a depender de dos recursos do dispositivo como largura de tela, orientação, e resolução, e explorar tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais recursos.

Animações e transformações (TBD)

Duas das áreas mais interessantes do CSS são a habilidade de manipular elementos (ex. mover, rotacionar e inclinação), e animar elementos suavemente (ex. de uma cor ou posição para outra). Esse módulo explora como implementar as transformações e animações.

Resolvendo problemas de CSS comuns
----------------------------------

Use CSS para resolver problemas comuns (en-US) proporcione links para seções de conteúdo explicando como usar CSS para resolver problemas muito comuns na criação de páginas web.

Para começar, primeirmamente você aplicara cores aos elementos HTML e seus backgrounds; alterará o tamanho, forma e posição dos elementos; definira e adicionara bordas aos elementos. Não há muito o que você não podera fazer depois que tiver uma compreensão solida até mesmo sobre o basico do CSS. Uma das melhores coisas sobre aprender CSS é que uma vez que voce conhece os fundamentos, normalmente voce tera uma boa noção do que pode ou não fazer, mesmo que não saiba como fazer aquilo ainda.

Veja também
-----------

CSS no MDN

O principal ponto de entrada para documentação CSS no MDN, onde voce encontra desde referências detalhadas a tutoriais avançados. Quer saber todos os valores que uma propriedade pode ter? Este é o melhor lugar

Referência CSS

Um guia de referência abrangente para todos os muitos recursos da linguagem CSS - se você quiser saber quais valores uma propriedade pode tomar, por exemplo, este é um ótimo lugar para começar.


Meu primeiro formulário HTML - Aprendendo desenvolvimento web

Meu primeiro formulário HTML
============================

Este é um artigo introdutório para formulários HTML. Através de um simples formulário de contato, nós veremos os requisitos básicos para construir formulários HTML. Esse artigo assume que você não sabe nada sobre formulários HTML, mas presume que você conhece o básico de HTML e CSS.

Antes de começarmos
-------------------

### O que são formulários HTML?

Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.

Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.

### O que você precisa para trabalhar com formulários?

Você não 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á-los você pode ter vantagens de uma IDE completa como Visual Studio, Eclipse, Aptana, etc., mas cabe somente a você.

A principal diferença entre um formulário de HTML e um documento regular de HTML é que, maioria das vezes, o dado coletado é enviado ao servidor. Nesse caso, você precisa configurar um servidor web para receber e processar os dados. Como configurar um servidor está além do escopo deste artigo, mas se você quer saber mais, consulte o artigo dedicado a este tema: Envio e recuperação de dados do formulário (en-US).

Desenhando seu formulário
-------------------------

 Antes de começar a codificar, é sempre melhor dar um passo atrás e tomar o tempo para pensar sobre o seu formulário. Desenhando um rascunho rápido irá ajudar a definir o conjunto correto de dados que você quer perguntar ao usuário. De um ponto de vista da experiência do usuário (UX), é importante lembrar que quanto maior o seu formulário, maior o risco de perder os usuários. Mantenha o formuário simples e mantenha o foco: **peça apenas o que é absolutamente necessário**.
 A criação de formulários é um passo importante quando você está construindo um site ou um aplicativo. Está além do escopo deste artigo cobrir as formas, mas se você quiser se aprofundar neste tópico você deve ler os seguintes artigos:

* A Smashing Magazine tem ótimos artigos sobre UX nos formulários, mas talvez o mais importante é o Extenso Guia para a usabilidade em formulários Web.
* UXMatters também é um recurso muito atencioso com bons conselhos de melhores práticas básicas para conceitos complexos, tais como formulários de várias páginas.

Neste artigo vamos construir um formulário de contato simples. Vamos fazer um esboço.

![The form to build, roughly sketch](/files/4579/form-sketch-low.jpg)

O nosso formulário terá três campos de texto e um botão. Basicamente, pedimos ao usuário o seu nome, seu e-mail e a mensagem que deseja enviar. Ao apertar o botão apenas irá enviar os dados para o servidor web.

Sujar as mãos com HTML
----------------------

Ok, agora estamos prontos para ir para o código HTML do nosso formulário. Para construir o nosso formulário de contato, vamos utilizar os seguintes elementos `<form>` (en-US) , `<label>` , `<input>` , `<textarea>` , e `<button>` .

### O Elemento `<form>` (en-US)

Todos formulários HTML começam com um elemento `<form>` (en-US) como este:

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

Este elemento define um formulário. É um elemento de container como um elemento `<div>` ou `<p>` , mas ele também suporta alguns atributos específicos para configurar a forma como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a melhor prática sempre definir pelo menos o atributo `action` e o atributo `method`.

* O atributo ***action*** define o local (uma URL) em que os dados recolhidos do formulário devem ser enviados.
* O atributo ***method*** define qual o método HTTP para enviar os dados (ele pode ser "**GET**" ou "**POST**" (veja as diferenças aqui).

Se você quiser se aprofundar em como esses atributos funcionam, está detalhado no artigo Enviando e recebendo dados de um formulário (en-US)

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

O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico 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 endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").

Em termos de código HTML, teremos algo assim:

```html
<form action="/pagina-processa-dados-do-form" method="post">
  <div>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" />
  </div>
  <div>
    <label for="email">E-mail:</label>
    <input type="email" id="email" />
  </div>
  <div>
    <label for="msg">Mensagem:</label>
    <textarea id="msg"></textarea>
  </div>
</form>
```

Os elementos `<div>` estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo ***for*** em todos os elementos `<label>` ; é uma maneira para vincular uma ***label*** à um campo do formulário. Este atributo faz referência ao ***id*** do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: How to structure an HTML form (en-US)(en).

No elemento `<input>` , o atributo mais importante é o atributo `type`. Esse atributo é extremamente importante porque define a forma como o elemento `<input>` se comporta. Ele pode mudar radicalmente o elemento, então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo native form widgets (en-US). Em nosso exemplo, nós usamos somente o `type="text"`, valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o `type="email"` que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo Validação de dados de formulário (en-US).

Por último, mas não 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 significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "**/**" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo `<textarea>` não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento `<input>` você tem que usar o atributo `value` como este:

```html
<input
 type="text"
 value="Por padrão, este elemento será preenchido com este texto " />
```

Pelo contrário, se você deseja definir o valor padrão de um elemento `<textarea>` , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento `<textarea>` , como abaixo:

```html
<textarea>Por padrão, este elemento será preenchido com este texto </textarea>
```

### E um elemento `<button>` para concluir

O nosso formulário está quase pronto; nós temos apenas que adicionar um botão para permitir que o usuário envie seus dados depois de ter preenchido o formulário. Isto é simplesmente feito usando o elemento `<button>` :

```html
<form action="/pagina-processa-dados-do-form" method="post">
  <div>
    <label for="name">Nome:</label>
    <input type="text" id="name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" />
  </div>
  <div>
    <label for="msg">Mensagem:</label>
    <textarea id="msg"></textarea>
  </div>
  <div class="button">
    <button type="submit">Enviar sua mensagem</button>
  </div>
</form>
```

Um botão pode ser de três tipos: **`submit`**, **`reset`**, ou **`button`**.

* Um clique sobre um botão de **`submit`** envia os dados do formulário para a página de web definida pelo atributo **`action`** do elemento `<form>` (en-US) .
* Um clique sobre um botão de **`reset`** redefine imediatamente todos os campos do formulário para o seu valor padrão. De um ponto de vista na usabilidade do usuário(UX), isso é considerado uma má prática.
* Um clique em um botão do tipo **`button`** faz ...ops, nada! Isso soa bobo, mas é incrivelmente útil para construir botões personalizados com JavaScript, ou seja, ele pode assumir qualquer comportamento através desta linguagem.

Note que você também pode usar o elemento `<input>` com o tipo correspondente para produzir um botão. A principal diferença com o elemento `<button>` é que o elemento `<input>` permite apenas texto sem formatação como seu valor, enquanto que o elemento `<button>` permite que o conteúdo HTML completo como seu valor.

Vamos deixar um pouco mais legal com CSS
----------------------------------------

Agora que temos o nosso formulário HTML, se você olhar para ele em seu navegador favorito, você vai ver que ele parece meio feio.

![](/files/4049/form-no-style.png)

Vamos deixar ele um pouco mais legal com os códigos CSS a seguir:

Vamos começar com o próprio formulário; vamos centralizá-lo e torná-lo visível com uma borda:

```css
form {
  /\* Apenas para centralizar o form na página \*/
  margin: 0 auto;
  width: 400px;
  /\* Para ver as bordas do formulário \*/
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}
```

Então, adicionaremos algum espaço entre cada conjunto de campos do form:

```css
form div + div {
  margin-top: 1em;
}
```

Agora vamos focar nas **`labels`**. Para fazer o nosso formulário mais legível, é considerada a melhor prática 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 ficar bem também.

```css
label {
  /\*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas \*/
  display: inline-block;
  width: 90px;
  text-align: right;
}
```

Uma das coisas mais difíceis de fazer em formulários HTML são os estilo dos próprios campos. Os campos de texto são fáceis de estilizar, mas alguns outros campos não são. Se você quiser saber mais sobre estilização de formulários HTML, leia o artigo Styling HTML forms (en-US).

Aqui vamos usar alguns truques comuns: fontes de harmonização, tamanho e bordas:

```css
input,
textarea {
  /\* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace\*/
  font: 1em sans-serif;

  /\* Para dar o mesmo tamanho a todos os campo de texto \*/
  width: 300px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  /\* Para harmonizar o look & feel das bordas nos campos de texto\*/
  border: 1px solid #999;
}
```

Formulários HTML suportam muitas pseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um pouco de destaque quando um campo está ativo. É uma maneira conveniente para ajudar a manter o controle do usuário de onde eles está no formulário.

```css
input:focus,
textarea:focus {
  /\* Dar um pouco de destaque nos elementos ativos \*/
  border-color: #000;
}
```

Campos de texto de várias linhas precisam de alguns estilos personalizados sozinhos. Por padrão, um elemento `<textarea>` é um bloco em linha com sua parte inferior alinhada à linha de base do texto. Na maioria das vezes, não é baseline o que queremos. Nesse caso, a fim de alinhar a `label` e o campo, temos que alterar a propriedade *vertical-align* do `<textarea>` para *top*.

Observe também o uso da propriedade de *resize*, que é uma forma de permitir que os usuários redimensionar um elemento `<textarea>`.

```css
textarea {
  /\* Para alinhar corretamente os campos de texto de várias linhas com sua label\*/
  vertical-align: top;

  /\* Para dar espaço suficiente para digitar algum texto \*/
  height: 5em;

  /\* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers \*/
  resize: vertical;
}
```

Muitas vezes, os botões precisam de estilos especiais também. Para esse fim, nós o colocamos dentro de uma `<div>` com uma classe css *`button`*. Aqui, queremos que o botão esteja alinhado com os outros campos . Para conseguir isso, temos de imitar a presença de uma `<label>`. Isso é feito utilizando `padding` e `margin`.

```css
.button {
  /\* Para posicionar os botões para a mesma posição dos campos de texto \*/
  padding-left: 90px; /\* mesmo tamanho que os elementos do tipo label \*/
}
button {
  /\* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto\*/
  margin-left: 0.5em;
}
```

Agora o nosso formulário parece muito mais bonito.

![](/files/4051/form-style.png)

Enviar os dados para seu servidor web
-------------------------------------

A última parte, e talvez a mais complicado, é lidar com dados de formulário no lado do servidor. Como dissemos antes, na maioria das vezes, um formulário HTML é uma forma conveniente para perguntar ao usuário os dados e enviá-lo para um servidor web.

O elemento `<form>` (en-US) definirá onde e como enviar os dados, graças ao atribudo ***action*** e ao atributo ***method***

Mas não é o suficiente. Nós também precisamos dar um nome a nossos dados. Esses nomes são importantes em ambos os lados; no lado do navegador, ele informa ao navegador que nome dar a cada pedaço de dados, e no lado do servidor, ele permite que o servidor lidar com cada pedaço de dados pelo nome.

Então, para nomear seus dados, você precisará usar o atributo ***`name`*** em cada campo do formulário que irá recolher uma parte específica dos dados:

```html
<form action="/pagina-processa-dados-do-form" method="post">
  <div>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="usuario\_nome" />
  </div>
  <div>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="usuario\_email" />
  </div>
  <div>
    <label for="msg">Mensagem:</label>
    <textarea id="msg" name="usuario\_msg"></textarea>
  </div>

  <div class="button">
    <button type="submit">Enviar sua mensagem</button>
  </div>
</form>
```

Em nosso exemplo, o formulário irá enviar 3 informações, chamados "usuario\_nome", "usuario\_email" e "usuario\_msg" e os dados serão enviados para a URL **"/pagina-processa-dados-do-form"** com o método HTTP: **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 solicitação HTTP. A forma como o script vai lidar com esses dados fica a seu critério. Cada linguagem server-side (PHP, Python, Ruby, Java, C #, etc.) tem seu próprio mecanismo. Está além do escopo deste guia aprofundar o assunto, mas se você quiser saber mais, vamos dar alguns exemplos no artigo Enviando e recuperando dados de formulário (en-US).

Conclusão
---------

Parabéns! Você construiu seu primeira formulário HTML. Aqui está um exemplo do resultado final.

| Live example |
| --- |
|  |
|  |

Agora é hora de dar uma olhada mais profunda. Formulários HTML são muito mais poderoso do que o que nós vimos aqui e os outros artigos deste guia irá ajudá-lo a dominar o resto.


Form data validation - Aprendendo desenvolvimento web

Form data validation
====================

* Anterior  (en-US)
* Menu: Forms (en-US)
* Próxima  (en-US)

A validação de formulário nos ajuda a garantir que os usuários preencham os campos no formato correto, garantindo que os dados enviados funcionem com êxito em nossos aplicativos. Este artigo apresentará conceitos e exemplos básicos sobre validação de formulário. Para mais informações adicionais, consulte o Guia de validação (en-US).

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento em informática, uma compreensão razoável de
 HTML,
 CSS, e
 JavaScript.
  |
| Objetivo: |
 Entender o que é validação de formulários porque é importante a
 aplicação de várias técnicas para implementá-lo.
  |

O que é validação de formulário?
--------------------------------

Vá a qualquer site popular com um formulário de registro, e perceberá que eles dão feedback quando você não insere seus dados no formato esperado. Você receberá mensagens como:

* "Sua senha precisa ter entre 8 e 30 caracteres e conter uma letra maiúscula, um símbolo e um número"
* "Por favor, digite seu número de telefone no formato (xx) xxxx-xxxx"
* "Por favor insira um endereço de email válido" (se a sua entrada não estiver no formato "email@email.com")
* "Este campo é obrigatório" (você não pode deixar este campo em branco)

Isso é chamado de validação de formulário - quando você insere dados, o aplicativo da Web faz a verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.

Queremos tornar o preenchimento de formulários da web o mais fácil possível. Então, por que insistimos em validar nossos formulários? Existem três razões principais:

* **Nos queremos que o dado correto e no formato correto** — nossa aplicação não irá trabalhar de forma correta se os dados dos nossos usuarios estivem armazenados em formato incorreto, ou quando esses dados são omitidos.
* **Quemos proteger os dados dos nossos usuários** — Forçarnosos usuários a fornecer senhas seguras facilita na proteção das informações da conta do usuário.
* **Queremos proteger nos mesmos** — Existem diversas maneiras de um usuário malicioso usar formulários desprotegidos para danificar nossa aplicação (veja Website security).

**Aviso:** Nunca confie nos dados passados do cliente para o servidor. Mesmo que seu formulário seja validado de maneira correta e previna a má formação de inputs no lado do cliente, um usuário malicioso ainda pode roubar o request da conexão.
### Diferentes tipos de validação de formulário

Existem dois tipos diferentes de validação de formulários que você encontrará na web:

* **Validação do lado do cliente** é a validação que ocorre no navegador antes que os dados sejam enviados ao servidor. Isso é mais fácil de usar do que a validação do lado do servidor, pois fornece uma resposta instantânea. Isso pode ser ainda subdividido:
    + A validação **JavaScript** é codificada usando JavaScript. É completamente customizável.
    + **Validação de formulário integrada** usando recursos de validação de formulário HTML5. Isso geralmente não requer JavaScript. A validação de formulário integrada tem melhor desempenho, mas não é tão personalizável quanto o JavaScript.
* **Validação do lado do servidor** é a validação que ocorre no servidor após o envio dos dados. O código do lado do servidor é usado para validar os dados antes de serem salvos no banco de dados. Se os dados falharem na autenticação, uma resposta será enviada de volta ao cliente para informar ao usuário quais correções devem ser feitas. A validação do lado do servidor não é tão amigável quanto a validação do lado do cliente, pois não fornece erros até que todo o formulário seja enviado. No entanto, a validação do lado do servidor é a última linha de defesa do seu aplicativo contra dados incorretos ou até maliciosos. Todos os frameworks do lado do servidor (en-US) populares têm recursos para **validar** e **limpar** dados (tornando-os seguros).

No mundo real, os desenvolvedores tendem a usar uma combinação de validação do lado do cliente e do lado do servidor.

Usando validação de formulário integrada
----------------------------------------

Um dos recursos do HTML5 é a capacidade de validar a maioria dos dados do usuário sem depender de scripts. Isso é feito usando atributos de validação (en-US) em elementos de formulário, que permitem especificar regras para uma entrada de formulário, como se um valor precisa a ser preenchido, o comprimento mínimo e máximo dos dados, se precisa ser um número, um endereço de e-mail ou qualquer outra coisa, e um padrão que deve corresponder. Se os dados inseridos seguirem todas as regras especificadas, são considerados válidos; caso contrário, é considerado inválido.

Quando um elemento é válido:

* O elemento corresponde à pseudo-classe CSS `:valid`; isso permitirá que você aplique um estilo específico a elementos válidos.
* Se o usuário tentar enviar os dados, o navegador enviará o formulário, desde que nada mais o impeça de fazê-lo (por exemplo, JavaScript).

Quando um elemento é inválido:

* O elemento corresponde à pseudo-classe CSS `:invalid`; isso permitirá que você aplique um estilo específico a elementos inválidos.
* Caso o usuário tente enviar os dados, o navegador bloqueará o formulário e exibirá uma mensagem de erro.
### Restrições de validação em elementos de entrada — começando simples

Nesta seção, veremos alguns dos diferentes recursos HTML5 que podem ser usados para validar elementos `<input>`.

Vamos começar com um exemplo simples — uma entrada que permite que você escolha sua fruta favorita entre banana ou cereja. Isso envolve um texto simples `<input>` com um rótulo correspondente e um envio `<button>`. Você pode encontrar o código-fonte no GitHub como fruit-start.html, e um exemplo ao vivo abaixo:
```

<form>
  <label for="choose">Você prefere banana ou cereja?</label>
  <input id="choose" name="i\_like" />
  <button>Enviar</button>
</form>
```

```
input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}
```

Para começar, faça uma cópia de `fruit-start.html` em um novo diretório em seu disco rígido.

### O atributo obrigatório

O recurso de validação HTML5 mais simples de usar é o atributo `required` — se você quiser tornar uma entrada obrigatória, você pode marcar o elemento usando este atributo. Quando este atributo estiver definido, o formulário não será enviado (e exibirá uma mensagem de erro) quando a entrada estiver vazia (a entrada também será considerada inválida).

Adicione um atributo `required` à sua entrada, conforme mostrado abaixo:

```html
<form>
  <label for="choose">Você prefere banana ou cereja?</label>
  <input id="choose" name="i\_like" required />
  <button>Enviar</button>
</form>
```

Além disso, anote o CSS incluído no arquivo de exemplo:

```css
input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}
```

Isso faz com que a entrada tenha uma borda tracejada vermelha brilhante quando for inválida e uma borda preta mais sutil quando válida. Experimente o novo comportamento no exemplo abaixo:

### Validando com uma expressão regular

Outro recurso de validação muito comum é o atributo `pattern` que espera uma Expressão Regular como seu valor. Uma expressão regular (regex) é um padrão que pode ser usado para identificar combinações de caracteres em strings de texto, então elas são ideais para validação de formulários (assim como uma variedade de outros usos em JavaScript)

Regexes são bastante complexas e não pretendemos ensiná-las exaustivamente neste artigo. Abaixo estão alguns exemplos para dar uma ideia básica de como eles funcionam:

* `a` — corresponde a um caractere que é `a` (não `b`, não `aa`, etc.)
* `abc` — corresponde a `a`, seguido por `b`, seguido por `c`.
* `a|b` — corresponde a um caractere que é `a` ou `b`.
* `abc|xyz` — corresponde exatamente a `abc` ou exatamente `xyz` (mas não `abcxyz`, ou `a` ou `y`, etc).
* Existem muitas outras possibilidades que não precisamos cobrir aqui.

De qualquer forma, vamos implementar um exemplo — atualize seu HTML para adicionar um atributo `pattern`, assim:

```html
<form>
  <label for="choose">Você prefere uma banana ou uma cereja?</label>
  <input id="choose" name="i\_like" required pattern="banana|cherry" />
  <button>Enviar</button>
</form>
```

```
input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}
```

Neste exemplo, o elemento `<input>` aceita um dos dois valores possíveis: a string "banana" ou a string "cherry".

Neste ponto, tente alterar o valor dentro do atributo `pattern` para igualar alguns dos exemplos que você viu anteriormente e veja como isso afeta os valores que você pode inserir para tornar o valor de entrada válido. Tente escrever alguns dos seus próprios, e veja como você se sai! Tente torná-los relacionados a frutas sempre que possível, para que seus exemplos façam sentido!

**Nota:** Alguns tipos de elemento `<input>` não precisam de um atributo `pattern` para serem validados. Especificar o tipo `email`, por exemplo, valida o valor inserido em relação a uma expressão regular que corresponde a um endereço de e-mail bem formado (ou uma lista de endereços de e-mail separados por vírgula se tiver o `multiple` atributo). Como outro exemplo, os campos com o tipo `url` requerem automaticamente um URL devidamente formado.

**Nota:** O elemento `<textarea>` não suporta o atributo `pattern`.

### Restringindo o comprimento de suas entradas

Todos os campos de texto criados por `<input>` ou `<textarea>` podem ser restringidos em tamanho usando `minlength` e `maxlength` atributos. Um campo é inválido se seu valor for menor que o valor `minlength` ou maior que o valor `maxlength`. Os navegadores geralmente não permitem que o usuário digite um valor maior do que o esperado nos campos de texto, mas é útil ter esse controle refinado disponível.

Para campos numéricos (ou seja, `<input type="number">`), os atributos `min` e `max` também fornecem uma restrição de validação. Se o valor do campo for menor que o atributo `min` ou maior que o atributo `max`, o campo será inválido.

Vejamos outro exemplo. Crie uma nova cópia do arquivo fruit-start.html.

Agora exclua o conteúdo do elemento `<body>` e substitua-o pelo seguinte:

```html
<form>
  <div>
    <label for="choose">Você prefere uma banana ou uma cereja?</label>
    <input
 type="text"
 id="choose"
 name="i\_like"
 required
 minlength="6"
 maxlength="6" />
  </div>
  <div>
    <label for="number">Quantos você gostaria?</label>
    <input type="number" id="number" name="amount" value="1" min="1" max="10" />
  </div>
  <div>
    <button>Enviar</button>
  </div>
</form>
```

* Aqui você verá que demos ao campo `text` um `minlength` e `maxlength` de 6 — o mesmo comprimento que banana e cherry. Digitar menos caracteres será exibido como inválido e digitar mais não é possível na maioria dos navegadores.
* Também demos ao campo `number` um `min` de 1 e um `max` de 10 — os números inseridos fora desse intervalo serão mostrados como inválidos e você não poderá usar as setas de incremento/diminuição para mova o valor para fora deste intervalo.
```

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}
```

Aqui está o exemplo rodando ao vivo:

**Nota:** `<input type="number">` (e outros tipos, como `range`) também podem receber um atributo `step`, que especifica o que incrementar o valor aumentará ou diminuirá quando os controles de entrada forem usados (como os botões numéricos para cima e para baixo).

### Exemplo completo

Aqui está um exemplo completo para mostrar o uso dos recursos de validação internos do HTML:

```html
<form>
  <p>
    <fieldset>
      <legend>Título<abbr title="Este campo é obrigatório">*</abbr></legend>
      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Sr.</label>
      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Sra.</label>
    </fieldset>
  </p>
  <p>
    <label for="n1">Quantos anos você tem?</label>
    <!-- O atributo pattern pode atuar como um substituto para navegadores que
 não implemente o tipo de entrada de número, mas dê suporte ao atributo pattern.
 Observe que os navegadores que suportam o atributo pattern o tornarão
 falha silenciosamente quando usado com um campo numérico.
 Seu uso aqui atua apenas como um fallback -->
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
 pattern="\d+">
  </p>
  <p>
    <label for="t1">Qual é a sua fruta favorita?<abbr title="Este campo é obrigatório">*</abbr></label>
    <input type="text" id="t1" name="fruit" list="l1" required
 pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Banana</option>
      <option>Cereja</option>
      <option>Maçã</option>
      <option>Morango</option>
      <option>Limão</option>
      <option>Laranja</option>
    </datalist>
  </p>
  <p>
    <label for="t2">Qual é o seu e-mail?</label>
    <input type="email" id="t2" name="email">
  </p>
  <p>
    <label for="t3">Deixe uma mensagem curta</label>
    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
  </p>
  <p>
    <button>Enviar</button>
  </p>
</form>
```

```css
body {
  font: 1em sans-serif;
  padding: 0;
  margin: 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  /\* required to properly style form
 elements on WebKit based browsers \*/
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}
```

Consulte Atributos relacionados à validação (en-US) para obter uma lista completa de atributos que podem ser usados para restringir valores de entrada e os tipos de entrada que suportam eles.

### Mensagens de erro personalizadas

Como visto nos exemplos acima, cada vez que o usuário tenta enviar um formulário inválido, o navegador exibe uma mensagem de erro. A forma como esta mensagem é exibida depende do navegador.

Essas mensagens automatizadas têm duas desvantagens:

* Não existe uma maneira padrão de mudar sua aparência com CSS.
* Eles dependem da localidade do navegador, o que significa que você pode ter uma página em um idioma, mas uma mensagem de erro exibida em outro idioma.

| Navegador | Renderização |
| --- | --- |
| Firefox 17 (Windows 7) | Exemplo de uma mensagem de erro com o Firefox em francês em uma página em inglês |
| Chrome 22 (Windows 7) | Exemplo de mensagem de erro com o Chrome em francês em uma página em inglês |
| Opera 12.10 (Mac OSX) | Exemplo de uma mensagem de erro com o Opera em francês em uma página em inglês |

Para personalizar a aparência e o texto dessas mensagens, você deve usar JavaScript; não há como fazer isso usando apenas HTML e CSS.

HTML5 fornece a API de validação de restrição (en-US) para verificar e personalizar o estado de um elemento de formulário. Entre outras coisas, é possível alterar o texto da mensagem de erro. Vejamos um exemplo rápido:

```html
<form>
  <label for="mail">Gostaria que você me enviasse um e-mail</label>
  <input type="email" id="mail" name="mail" />
  <button>Enviar</button>
</form>
```

Em JavaScript, você chama o método `setCustomValidity()` (en-US):

```js
var email = document.getElementById("mail");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("spero um e-mail, querida!");
  } else {
    email.setCustomValidity("");
  }
});
```

Validando formulários usando JavaScript
---------------------------------------

Se você quiser controlar a aparência das mensagens de erro nativas, ou se quiser lidar com navegadores que não suportam a validação de formulário interna do HTML, você deve usar JavaScript.

### A API de validação de restrição

Mais e mais navegadores agora suportam a API de validação de restrição, e ela está se tornando confiável. Essa API consiste em um conjunto de métodos e propriedades disponíveis em interfaces específicas de elementos de formulário:

* HTMLButtonElement (en-US)
* HTMLFieldSetElement (en-US)
* HTMLInputElement
* HTMLOutputElement (en-US)
* HTMLSelectElement (en-US)
* HTMLTextAreaElement (en-US)

#### Propriedades da API de validação de restrições

| Propriedade | Descrição |
| --- | --- |
| `mensagem de validação` | Uma mensagem localizada descrevendo as restrições de validação que o controle não atende (se houver), ou a string vazia se o controle não for um candidato para validação de restrição (`willValidate` é `false`), ou o valor do elemento satisfaz suas restrições. |
| `validade` | Um objeto `ValidityState` descrevendo o estado de validade do elemento. Consulte esse artigo para obter detalhes de possíveis estados de validade. |
| `vai Validar` | Retorna `true` se o elemento for validado quando o formulário for enviado; `falso` caso contrário. |

#### Métodos de API de validação de restrições

| Método | Descrição |
| --- | --- |
| `checkValidade()` | Retorna `true` se o valor do elemento não tiver problemas de validade; `falso` caso contrário. Se o elemento for inválido, este método também causará um evento `invalid (en-US)` no elemento. |
| `HTMLFormElement.reportValidity()` (en-US) | Retorna `true` se o elemento ou seus controles filho atendem às restrições de validação. Quando `false` é retornado, eventos canceláveis `invalid (en-US)` são acionados para cada elemento inválido e problemas de validação são relatados ao usuário. |
| `setCustomValidity(mensagem)` | Adiciona uma mensagem de erro personalizada ao elemento; se você definir uma mensagem de erro personalizada, o elemento será considerado inválido e o erro especificado será exibido. Isso permite que você use o código JavaScript para estabelecer uma falha de validação diferente daquelas oferecidas pela API de validação de restrição padrão. A mensagem é mostrada ao usuário ao relatar o problema. Se o argumento for a string vazia, o erro personalizado será apagado. |

Para navegadores legados, é possível usar um polyfill como Hyperform para compensar a falta de suporte para a API de validação de restrição. Como você já está usando JavaScript, usar um polyfill não é um fardo adicional para o design ou implementação de seu site ou aplicativo da Web.

#### Exemplo usando a API de validação de restrição

Vamos ver como usar essa API para criar mensagens de erro personalizadas. Primeiro, o HTML:

```html
<form novalidate>
  <p>
    <label for="mail">
      <span>Por favor, insira um endereço de e-mail:</span>
      <input type="email" id="mail" name="mail" />
      <span class="error" aria-live="polite"></span>
    </label>
  </p>
  <button>Enviar</button>
</form>
```

Este formulário simples usa o atributo `novalidate` (en-US) para desativar a validação automática do navegador; isso permite que nosso script assuma o controle sobre a validação. No entanto, isso não desativa o suporte para a API de validação de restrição nem a aplicação da pseudoclasse CSS `:valid`, `:invalid`, `:in-range` (en-US) e `:out-of-range` classes. Isso significa que, embora o navegador não verifique automaticamente a validade do formulário antes de enviar seus dados, você ainda pode fazer isso sozinho e estilizar o formulário de acordo.

O atributo `aria-live` (en-US) garante que nossa mensagem de erro personalizada seja apresentada a todos, incluindo aqueles que usam tecnologias assistivas, como leitores de tela.

##### CSS

Este CSS estiliza nosso formulário e a saída de erro para parecer mais atraente.

```css
/\* Isso é apenas para tornar o exemplo mais agradável \*/
corpo {
  font: 1em sans-serif;
  padding: 0;
  margin: 0;
}

form {
  max-width: 200px;
}

p \* {
  display: block;
}

input[type="email"] {
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/\* Este é o nosso estilo para os campos inválidos \*/
input:invalid {
  border-color: #900;
  background-color: #fdd;
}

input:focus:invalid {
  outline: none;
}

/\* Este é o estilo das nossas mensagens de erro \*/
.error {
  width: 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}
```

##### JavaScript

O código JavaScript a seguir lida com a validação de erro personalizada.

```js
// Existem muitas maneiras de escolher um nó DOM; aqui temos o próprio formulário e o e-mail
// caixa de entrada, bem como o elemento span no qual colocaremos a mensagem de erro.

var form = document.getElementsByTagName("form")[0];
var email = document.getElementById("mail");
var error = document.querySelector(".error");

email.addEventListener(
  "input",
  function (event) {
    // Cada vez que o usuário digita algo, verificamos se o
    // campo de email é válido.
    if (email.validity.valid) {
      // Caso haja uma mensagem de erro visível, se o campo
      // é válido, removemos a mensagem de erro.
      error.innerHTML = ""; // Reinicia o conteúdo da mensagem
      error.className = "error"; // Redefinir o estado visual da mensagem
    }
  },
  false,
);
form.addEventListener(
  "submit",
  function (event) {
    // Cada vez que o usuário tenta enviar os dados, verificamos
    // se o campo de email for válido.
    if (!email.validity.valid) {
      // Se o campo não for válido, exibimos um personalizado
      // mensagem de erro.
      error.innerHTML = "Espero um e-mail, querida!";
      error.className = "error active";
      // E evitamos que o formulário seja enviado cancelando o evento
      event.preventDefault();
    }
  },
  false,
);
```

Aqui está o resultado ao vivo:

A API de validação de restrição oferece uma ferramenta poderosa para lidar com a validação de formulários, permitindo que você tenha um controle enorme sobre a interface do usuário acima e além do que você pode fazer apenas com HTML e CSS.

### Validando formulários sem uma API integrada

Às vezes, como em navegadores legados ou widgets personalizados (en-US), você não poderá (ou não desejará) usar a API de validação de restrição. Nesse caso, você ainda pode usar JavaScript para validar seu formulário. Validar um formulário é mais uma questão de interface do usuário do que validação de dados reais.

Para validar um formulário, você deve se fazer algumas perguntas:

Que tipo de validação devo realizar?

Você precisa determinar como validar seus dados: operações de string, conversão de tipo, expressões regulares, etc. Você decide. Apenas lembre-se de que os dados do formulário são sempre texto e são sempre fornecidos ao seu script como strings.

O que devo fazer se o formulário não validar?

Isso é claramente uma questão de interface do usuário. Você tem que decidir como o formulário se comportará: O formulário envia os dados mesmo assim? Você deve destacar os campos que estão com erro? Você deve exibir mensagens de erro?

Como posso ajudar o usuário a corrigir dados inválidos?

Para diminuir a frustração do usuário, é muito importante fornecer o máximo de informações úteis possível para orientá-lo na correção de suas entradas. Você deve oferecer sugestões iniciais para que eles saibam o que é esperado, bem como mensagens de erro claras. Se você quiser se aprofundar nos requisitos da interface do usuário de validação de formulário, há alguns artigos úteis que você deve ler:

* SmashingMagazine: Form-Field Validation: The Errors-Only Approach
* SmashingMagazine: Validação de formulário da Web: práticas recomendadas e tutoriais
* Seis revisões: Práticas recomendadas para dicas e validação em formulários da Web
* Uma lista à parte: Validação Inline em Formulários da Web

#### Um exemplo que não usa a API de validação de restrição

Para ilustrar isso, vamos reconstruir o exemplo anterior para que funcione com navegadores legados:

```html
<form>
  <p>
    <label for="mail">
      <span>Por favor, insira um endereço de e-mail:</span>
      <input type="text" class="mail" id="mail" name="mail" />
      <span class="error" aria-live="polite"></span>
    </label>
  </p>

  <p>
    <!-- Alguns navegadores legados precisam ter o atributo `type`
 explicitamente definido como `submit` no elemento `button` -->
    <button type="submit">Enviar</button>
  </p>
</form>
```

Como você pode ver, o HTML é quase o mesmo; acabamos de remover os recursos de validação HTML. Observe que ARIA (en-US) é uma especificação independente que não está especificamente relacionada ao HTML5.

##### CSS

Da mesma forma, o CSS não precisa mudar muito; apenas transformamos a pseudo-classe CSS `:invalid` em uma classe real e evitamos usar o seletor de atributos que não funciona no Internet Explorer 6.

```css
/\* Isso é apenas para tornar o exemplo mais agradável \*/
body {
  font: 1em sans-serif;
  padding: 0;
  margin: 0;
}

form {
  max-width: 200px;
}

p \* {
  display: block;
}

input.mail {
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/\* Este é o nosso estilo para os campos inválidos \*/
input.invalid {
  border-color: #900;
  background-color: #fdd;
}

input:focus.invalid {
  outline: none;
}

/\* Este é o estilo das nossas mensagens de erro \*/
.error {
  width: 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}
```

##### JavaScript

As grandes mudanças estão no código JavaScript, que precisa fazer muito mais trabalho pesado.

```js
// Há menos maneiras de escolher um nó DOM com navegadores legados
const form = document.getElementsByTagName("form")[0];
const email = document.getElementById("mail");

// O seguinte é um truque para alcançar o próximo nó Elemento irmão no DOM
// Isso é perigoso porque você pode facilmente construir um loop infinito.
// Em navegadores modernos, você deve preferir usar element.nextElementSibling
let error = email;
while ((error = error.nextSibling).nodeType != 1);

// De acordo com a especificação HTML5
var emailRegExp =
  /^[a-zA-Z0-9.!#$%&'\*+/=?^\_`{|}~-]+@[a-zA-Z0-9-]+(?: \.[a-zA-Z0-9-]+)\*$/;

// Muitos navegadores legados não suportam o método addEventListener.
// Aqui está uma maneira simples de lidar com isso; está longe de ser o único.
function addEvent(element, event, callback) {
  var previousEventCallBack = element["on" + event];
  element["on" + event] = function (e) {
    var output = callback(e);

    // Um retorno de chamada que retorna `false` interrompe a cadeia de retorno de chamada
    // e interrompe a execução do callback do evento.
    if (output === false) return false;

    if (typeof previousEventCallBack === "function") {
      output = previousEventCallBack(e);
      if (output === false) return false;
    }
  };
}

// Agora podemos reconstruir nossa restrição de validação
// Como não dependemos da pseudo-classe CSS, temos que
// define explicitamente a classe valid/invalid em nosso campo de email
addEvent(window, "load", function () {
  // Here, we test if the field is empty (remember, the field is not required)
  // If it is not, we check if its content is a well-formed e-mail address.
  var test = email.value.length === 0 || emailRegExp.test(email.value);

  email.className = test ? "válido" : "inválido";
});

// Isso define o que acontece quando o usuário digita no campo
addEvent(email, "input", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
  if (test) {
    email.className = "válido";
    error.innerHTML = "";
    error.className = "error";
  } else {
    email.className = "inválido";
  }
});

// Isso define o que acontece quando o usuário tenta enviar os dados
addEvent(form, "submit", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);

  if (!test) {
    email.className = "inválido";
    error.innerHTML = "Espero um e-mail, querida!";
    error.className = "error active";

    // Alguns navegadores legados não suportam o método method
    return false;
  } else {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  }
});
```

O resultado fica assim:

Como você pode ver, não é issodifícil construir um sistema de validação por conta própria. A parte difícil é torná-lo genérico o suficiente para usá-lo em várias plataformas e em qualquer formulário que você possa criar. Existem muitas bibliotecas disponíveis para realizar a validação de formulários; você não deve hesitar em usá-los. Aqui estão alguns exemplos:

* Biblioteca independente
    + Validate.js
* plug-in jQuery:
    + Validação

#### Validação remota

Em alguns casos, pode ser útil realizar alguma validação remota. Esse tipo de validação é necessário quando os dados inseridos pelo usuário estão vinculados a dados adicionais armazenados no lado do servidor de sua aplicação. Um caso de uso para isso são os formulários de registro, onde você solicita um nome de usuário. Para evitar a duplicação, é mais inteligente realizar uma solicitação AJAX para verificar a disponibilidade do nome de usuário em vez de pedir ao usuário que envie os dados e, em seguida, envie o formulário com um erro.

A realização de tal validação requer algumas precauções:

* Requer expor uma API e alguns dados publicamente; certifique-se de que não são dados confidenciais.
* O atraso de rede requer a execução de validação assíncrona. Isso requer algum trabalho de interface do usuário para garantir que o usuário não seja bloqueado se a validação não for realizada corretamente.
Conclusão
---------

A validação de formulário não requer JavaScript complexo, mas requer pensar cuidadosamente sobre o usuário. Lembre-se sempre de ajudar seu usuário a corrigir os dados que ele fornece. Para isso, certifique-se de:

* Exibir mensagens de erro explícitas.
* Seja permissivo quanto ao formato de entrada.
* Indique exatamente onde ocorre o erro (especialmente em formulários grandes).
* Anterior  (en-US)
* Menu: Forms (en-US)
* Próxima  (en-US)


Sending form data - Aprendendo desenvolvimento web

Sending form data
=================

Em muitos casos, a finalidade de HTML Form (en-US) Um é enviar dados para um servidor. O servidor processa os dados e envia uma resposta ao usuário. Isso parece simples, mas é importante manter algumas coisas em mente para garantir que os dados não danifiquem o servidor ou causem problemas para seus usuários.

Para onde vão os dados?
-----------------------

Aqui nós discutiremos o que acontece com os dadosquando um formulário é enviado.

### Sobre a arquitetura cliente / servidor

A web é baseada em uma arquitetura cliente / servidor muito básica que pode ser resumida da seguinte forma: um cliente (normalmente um navegador da Web) envia um pedido a um servidor (na maioria das vezes um servidor web como Apache, Nginx, IIS, Tomcat, etc.), usando o HTTP protocol (en-US). O servidor responde a solicitação usando o mesmo protocolo.

![A basic schema of the Web client/server architecture](/files/4291/client-server.png)

No lado do cliente, um formulário HTML é nada mais do que uma maneira conveniente e amigável para configurar uma solicitação HTTP para enviar dados para um servidor. Isso permite que o usuário forneça informações a serem entregues na solicitação HTTP.

### No lado do cliente: definindo como enviar os dados

O elemento `<form>` (en-US) define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:`action` (en-US) e `method` (en-US).

#### o atributo `action` (en-US)

Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.

##### Exemplos

Neste exemplo, os dados são enviados para `http://foo.com`:

```html
<form action="http://foo.com"></form>
```

Aqui, os dados são enviados para o mesmo servidor que hospeda a página do formulário, mas para um URL diferente no servidor:

```html
<form action="/somewhere\_else"></form>
```

Quando especificado sem atributos, como abaixo, o atributo `<form>` (en-US) faz com que os dados sejam enviados para a página que inclui o formulário:

```html
<form></form>
```

Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo `action` (en-US) era obrigatório. Isso não é mais necessário.

```html
<form action="#"></form>
```

**Nota:** **Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo `action` (en-US), todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.**

#### o atributo `method` (en-US)

Este atributo define como os dados são enviados. o HTTP protocol (en-US)

Fornece várias maneiras de executar um pedido; Os dados de formulários HTML podem ser enviados através de pelo menos dois deles: o método GET eo método POST.

Para entender a diferença entre esses dois métodos, vamos dar um passo atrás e examinar como funciona o HTTP. Cada vez que você deseja acessar um recurso na Web, o navegador envia uma solicitação para um URL. Uma solicitação HTTP consiste em duas partes: um cabeçalho que contém um conjunto de metadados globais sobre as capacidades do navegador e um corpo que pode conter informações necessárias ao servidor para processar a solicitação específica.

##### O método GET

O método GET é o método usado pelo navegador para pedir ao servidor para enviar de volta um determinado recurso: "Hey servidor, eu quero obter este recurso." Nesse caso, o navegador envia um corpo vazio. Como o corpo está vazio, se um formulário é enviado usando esse método, os dados enviados para o servidor são anexados ao URL.

###### Exemplo

Considere o seguinte formulário:

```html
<form action="http://foo.com" method="get">
  <input name="say" value="Hi" />
  <input name="to" value="Mom" />
  <button>Envie meus cumprimentos</button>
</form>
```

Com o método GET, a solicitação HTTP tem esta aparência:
```

GET /?say=Hi&to=Mom HTTP/1.1
Host: foo.com
```

##### O método POST

O método POST é um pouco diferente. É o método que o navegador envia ao servidor para pedir uma resposta que leva em conta os dados fornecidos no corpo da solicitação HTTP: "Hey servidor, dê uma olhada nesses dados e envie-me de volta um resultado apropriado". Se um formulário é enviado usando esse método, os dados são anexados ao corpo do pedido HTTP.

###### Exemplo

Considere esta forma (a mesma acima):

```html
<form action="http://foo.com" method="post">
  <input name="say" value="Hi" />
  <input name="to" value="Mom" />
  <button>Send my greetings</button>
</form>
```

Quando enviado usando o método POST, o pedido HTTP se parece com isto:
```

POST / HTTP/1.1
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
```

O cabeçalho Content-Length indica o tamanho do corpo eo cabeçalho Content-Type indica o tipo de recurso enviado para o servidor. Vamos discutir esses cabeçalhos em um pouco.

Obviamente, as solicitações HTTP nunca são exibidas para o usuário (se você quiser vê-las, você precisa usar ferramentas como o Firefox Web Console ou o Chrome Developer Tools). A única coisa exibida para o usuário é o URL chamado. Assim, com uma solicitação GET, o usuário verá os dados em sua barra de URL, mas com uma solicitação POST, eles não. Isso pode ser muito importante por duas razões:

1. Se você precisar enviar uma senha (ou qualquer parte sensível de dados), nunca use o método GET ou corre o risco de exibi-lo na barra de URL.
2. Se você precisar enviar uma grande quantidade de dados, o método POST é preferido porque alguns navegadores limitam o tamanho dos URLs. Além disso, muitos servidores limitam o comprimento dos URLs que aceitam.
### No lado do servidor: recuperar os dados

Seja qual for o método HTTP escolhido, o servidor recebe uma string que será analisada para obter os dados como uma lista de pares chave / valor. A maneira como você acessa essa lista depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. A tecnologia que você usa também determina como as chaves duplicadas são manipuladas; Freqüentemente, o valor recebido mais recentemente para uma determinada chave recebe prioridade.

#### Exemplo: PHP Bruto

O PHP oferece alguns objetos globais para acessar os dados. Supondo que você tenha usado o método POST, o exemplo a seguir apenas leva os dados e exibe-o para o usuário. Claro, o que você faz com os dados depende de você. Você pode exibi-lo, armazená-lo em um banco de dados, enviá-los por e-mail, ou processá-lo de alguma outra maneira.

```php
<?php
 // The global $\_POST variable allows you to access the data sent with the POST method
 // To access the data sent with the GET method, you can use $\_GET
 $say = htmlspecialchars($\_POST['say']);
 $to = htmlspecialchars($\_POST['to']);

 echo $say, ' ', $to;
```

Este exemplo exibe uma página com os dados enviados. Em nosso exemplo de antes, a saída seria:
```

Oi Mãe
```

#### Example: Python Bruto

This example uses Python to do the same thing--display the provided data on a web page. It uses the CGI Python package to access the form data.

```python
#!/usr/bin/env python
import html
import cgi
import cgitb; cgitb.enable()     # for troubleshooting

print("Content-Type: text/html") # HTTP header to say HTML is following
print()                          # blank line, end of headers

form = cgi.FieldStorage()
say  = html.escape(form["say"].value);
to   = html.escape(form["to"].value);

print(say, " ", to)
```

O resultado é o mesmo que com o PHP:
```

Oi Mãe
```

#### Outros idiomas e frameworks

Há muitas outras tecnologias do lado do servidor que você pode usar para o tratamento de formulários, incluindo Perl, Java, .Net, Ruby, etc. Basta escolher o que você mais gosta. Dito isto, é importante notar que é muito incomum usar essas tecnologias diretamente porque isso pode ser complicado. É mais comum usar um dos muitos frameworks agradáveis que facilitam o manuseio de formulários, como:

* Symfony Para PHP
* Django Para Python
* Ruby On Rails Para Ruby
* Grails Para Java
* etc.

Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários não é necessariamente fácil. Mas é muito melhor, e você vai economizar muito tempo.

Um caso especial: enviar arquivos
---------------------------------

Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários.

### o `enctype` (en-US) atributo

Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL."

Mas se você quiser enviar arquivos, você precisa fazer duas coisas:

* Colocou o `method` (en-US) Atributo para POST porque o conteúdo do arquivo não pode ser colocado dentro de um parâmetro de URL usando um formulário.
* Defina o valor de `enctype` (en-US) Para multipart / form-data porque os dados serão divididos em várias partes, uma para cada arquivo mais uma para o texto do corpo do formulário que pode ser enviado com eles.

Por exemplo:

```html
<form method="post" enctype="multipart/form-data">
  <input type="file" name="myFile" />
  <button>Send the file</button>
</form>
```

**Nota:** **Nota: Alguns navegadores suportam**`multiple` Atributo no `<input>` Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil.

**Aviso:** **Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.**

Preocupações com segurança
--------------------------

Cada vez que você envia dados para um servidor, você precisa considerar a segurança. Formulários HTML são um dos primeiros vetores de ataque contra servidores. Os problemas nunca vêm dos formulários HTML em si; Eles vêm de como o servidor manipula dados.

### Falhas de segurança comuns

Dependendo do que você está fazendo, existem alguns problemas de segurança muito conhecidos:

#### XSS e CSRF

Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF) são tipos comuns de ataques que ocorrem quando você exibe dados enviados por um usuário para o usuário ou para outro usuário.

O XSS permite que os invasores injetem scripts do lado do cliente em páginas da Web vistas por outros usuários. Uma vulnerabilidade de scripts entre sites pode ser usada por atacantes para ignorar controles de acesso, como o same origin policy (en-US). O efeito desses ataques pode variar de um pequeno incômodo a um risco de segurança significativo.

CSRF são semelhantes aos ataques XSS, já que eles começam da mesma maneira - injetando script do lado do cliente em páginas da Web - mas seu destino é diferente. Os invasores do CSRF tentam aumentar os privilégios para aqueles de um usuário com privilégios mais altos (como um administrador do site) para executar uma ação que não deve ser capaz de fazer (por exemplo, enviar dados para um usuário não confiável).

Os ataques XSS exploram a confiança que um usuário tem para um site, enquanto os ataques CSRF exploram a confiança que um site tem para seus usuários.

To prevent these attacks, you should always check the data a user sends to your server and (if you need to display it) try not to display the HTML content as provided by the user. Intead, you should process the user-provided data so you don't display it verbatim. Almost all frameworks on the market today implement a minimal filter that removes the HTML `<script>`, `<iframe>` and `<object>` (en-US) elements from data sent by any user. This helps to mitigate the risk, but doesn't necessarily eradicate it.

#### SQL injection

SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request in the hope that the server will execute it (many times when the application server tries to store the data). This is actually one of the main vector attacks against web sites.

The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using `mysql_real_escape_string()` on a PHP/MySQL infrastructure).

#### HTTP header injection and email injection

These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users, but they are an open door to deeper problems such as session hijacking or phishing attacks.

These attacks are mostly silent, and can turn your server into a zombie.

### Be paranoid: Never trust your users

So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

All data that comes to your server must be checked and sanitized. Always. No exception.

* Escape potentially dangerous characters. The specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this.
* Limit the incoming amount of data to allow only what's necessary.
* Sandbox uploaded files (store them on a different server and allow access to the file only through a different subdomain or even better through a fully different domain name).

You should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.

Conclusion
----------

As you can see, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. Yes, as we'll see, it's possible to perform client side data validation (en-US) but the server can't trust this validation because it has no way to truly know what really happens on the client side.

See also
--------

If you want to learn more about securing a web application, you can dig into these resources:

* The Open Web Application Security Project (OWASP)
* Chris Shiflett's blog about PHP Security