Assumo que você esteja criando um arquivo HTML adicional. Eu o salvo sob o nome de contato.html. O contato.html está no mesmo nível que o index.html que você já conhece bem.
Nesta primeira parte, são feitas as configurações básicas no formulário. Coisas como bordas arredondadas, degradês etc. serão abordadas no próximo tutorial.
Dentro do contato.html, você cria o formulário. O formulário é definido dentro da área div com a classe conteúdo. Em seguida, pense sobre quais campos você deseja criar. Para coletar as seguintes informações, optei por perguntar:
• Nome
• Endereço de e-mail
• Comentário
É claro que você deve decidir quais informações deseja coletar. Em princípio, eu recomendo solicitar apenas os dados necessários. A maioria dos visitantes de sites costuma evitar formulários extensos. Portanto, mantenha-o breve.
A estrutura básica do meu formulário é a seguinte:
O formulário não tem nada de especial neste momento. Foi aplicada uma definição de fieldset em torno dos campos do formulário. Como criar campos de formulário e como funcionam os elementos label já foram suficientemente descritos. Aqui, a atenção será totalmente direcionada para a estilização do formulário.
Quando você visualiza o resultado no navegador, inicialmente verá um formulário ainda não muito atraente.
Aqui há espaço para melhorias.
Primeiro, são feitas considerações básicas sobre o formulário.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Aqui, as margens internas e externas são definidas. Além disso, é estabelecida uma largura de 550 pixels para o formulário.
A estilização do fieldset continua.
Trata-se exclusivamente de questões de design. Deve-se prestar especial atenção às molduras. Assim que o cursor é colocado em um campo, a cor da moldura muda. Isso não é apenas um aspecto estético. Na verdade, isso também ajuda os visitantes ao preencher o formulário. Eles sempre podem ver em qual campo o cursor está.
Agora, algumas informações sobre o campo de entrada de texto de várias linhas.
textarea {
largura: 430px;
overflow: auto;
}
A largura deste campo é fixada em 430 pixels. Pode parecer um pouco estranho à primeira vista a instrução overflow: auto em relação aos campos de entrada de texto de várias linhas. Esta linha é devida a versões mais antigas do Internet Explorer. Na verdade, este navegador sempre exibiu barras de rolagem em campos de entrada de texto de várias linhas, mesmo quando não era necessário. Com overflow: auto, é possível contornar esse problema de design.
Estilização do botão de enviar
Atualmente, o botão de enviar parece bastante simples. Isso vai mudar agora. O resultado será o seguinte:
Várias propriedades são atribuídas ao botão:
• Cor de fundo
• Aparência da fonte
• Moldura
• Espaçamentos
A sintaxe CSS associada é a seguinte:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
largura: auto;
}
Aqui talvez vale a pena mencionar a especificação input[type="submit"]. Este seletor é usado para acessar elementos de entrada que possuem o atributo-valor type="submit".
