Introdução aos formulários web

Este artigo é uma rápida introdução aos fomulários web, nele veremos como os formulários web funcionam e também um pequeno exemplo de estilização (CSS)

Este artigo é uma rápida introdução aos fomulários web, nele veremos como os formulários web funcionam e também um pequeno exemplo de estilização (CSS)

Um formulário web é a porta de entrada dos dados de sua aplicação.

É nele que seu usuário faz a entrada de dados.

Abaixo, temos um exemplo de formulário.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" >
    <head>
        <title> Nosso singelo formulário </title>
    </head>
    <body>
        <form action="script-para-onde-envio-os-dados.php" method="post">
            <p>
                Name:  <input type="text" name="username" value="João da Silva" />
            </p>
            <p>
                Email: <input type="text" name="email"  value="joao@dasilva.com" />
            </p>
            <p>
                <input type="submit" value="Submit me!" />
            </p>
        </form>
    </body>
</html>

Como os formulários web funcionam?

O formulário "pega" os dados digitado pelo usuário, associa cada dado a um nome de campo e os envia ao servidor. Lá no outro lado (no servidor), um linguagem de servidor recebe os dados e faz alguma coisa com eles, seguindo a lógica do script criado pelo programador.

A tag form é o início do formulário.

<form>

</form>

Dentro das tags form colocamos os controles (inputs), labels e alguns botões.

Um formulário na web normalmente é chato de se preencher, só que ele é a alma dos aplicativos web, pois é através de seus campos que o usuário faz a inserção dos dados e, dessa forma, interage com o sistema.

Um formulário pode (e deve) conter elementos que formam um par nome=valor.

Por exemplo, um campo de entrada de texto (uma text box) chama-se pais e o seu valor é o texto Brasil. Quando esse formulário submeter seus dados para o servidor, ele poderá trabalhar com a variável pais e seu valor será Brasil.

Esse negócio é tão simples que fica até difícil de explicar, rs.

Veja o famoso formulário horizontal do Facebook. Vamos analisar apenas a "tarja azul", temos os campos login, senha e uma chekbox "mantanha-me conectado".

"formulário web de exemplo"

Quando o usuário preencher os dados e clicar no botão "Entrar" o servidor poderá trabalhar com os seguintes dados:

login=email@digitado
senha=1234
manter=false

Essa questão da interação formulário/servidor é assunto para as linguagens de servidores. Aqui, no curso de HTML e CSS vamos nos deter apenas em seu layout e estrutura.


Fonte:

Estilizando

Abaixo temos um formulário bastante simples. O exemplo foi retirado do livro Cosntruidno Páginas Web com CSS (Andy Budd).

Antes de olhar para o CSS, veja a estrutura do HTML.

See the Pen formulário-web 1 by Flávio Micheletti (@flaviomicheletti) on CodePen.

A Primeira coisa a ser comentado é que cada controle está acompanhado do elemento label. Esse elemento pode ajudar a adicionar estrutura e aumentar a acessibilidade aos formulários web. Em muitos navegadores, clicar no elemento label fará com que o elemento do formulário ganhe o foco, veja o exemplo:

<p>
  <label for="author">Name: </label>
  <input name="author" id="author" type="text" />
</p>

Posicionar os labels de modo que eles apareçam verticalmente acima dos elementos do formulário é realmente muito simples. Labels são elementos inline por padrão. Entretanto, configurar sua propriedade display como block fará com que eles gerem sua própria caixa de bloco, forçando os elementos "de entrada" (inputs) para a linha de baixo. A largura das caixas de entrada de texto varia entre diferentes navegadores, portanto, para consistência, você deve configurar explicitamente a largura das suas caixas de texto. Nesse exemplo, pixels são usados, mas, naturalmente, você poderia utilizar ems para criar um layout de formulário mais auto-ajustável.

label {
    display: block;
}
input {
    width: 300px;
}

Outro exemplo

Alterando a regra de estilização das labels como abaixo...

label {
  float: left;
  width: 10em;
}

...teremos um arranjo diferente, veja:

See the Pen formulário-web 2 by Flávio Micheletti (@flaviomicheletti) on CodePen.

Essa é a diferença mais significante entre este e o exemplo anterior, porém eu acrescentei estilização extra para posicionar o botão à direita:

p.botoes {
  text-align: right;
}
#btnSubmit {
  width: 100px;
}

Comentários

comments powered by Disqus