Home » Tecnologia
Criar e formatar formulários HTML
Criar e formatar formulários HTML. Tags form, input, select e textarea
Gostou? Recomende:
Formulários HTML são usados em larga escala na web. Contatos, cadastros, buscas, login e senha, caixas de seleção, etc. Com formulários temos opções de ligar nossa página com programas de envio de email ou sistemas que enviam os dados do formulário para um banco de dados, por exemplo.
Os formulários podem ser analisados de quatro formas:
- estruturação (HTML)
- formatação (CSS)
- validação (Javascript)
- tratamento dos dados (Alguma tecnologia servidor: ASP, ASP.NET, PHP, etc)
Veremos aqui as duas primeiras que consiste em criar e formatar formulários HTML.
Vamos a um exemplo:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Criar e formatar formulários HTML</title>
<link href="estilo_form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<fieldset>
<legend>Preencha os dados abaixo:</legend>
<div class="linha">
<label>Nome: <br />
<input name="nome" type="text" id="nome" size="40" />
</label>
</div>
<div class="linha2">
<label>
Email: <br />
<input name="email" type="text" id="email" size="40" />
</label>
</div>
<div class="linha">
<label>Sexo:
<input name="masc" type="radio" value="masculino" />Masculino</label>
<label><input name="fem" type="radio" value="feminino" />Feminino</label>
</div>
<div class="linha2">
<label>Estado:
<select name="estado" id="estado">
<option>SP</option>
<option>MG</option>
<option>RJ</option>
<option>ES</option>
</select>
</label>
</div>
<div class="linha">
<label>Comentários: <br />
<textarea name="comentarios" cols="30" rows="4" id="comentarios"></textarea>
</label>
</div>
<div class="linha">
<label><input name="newsletter" type="checkbox" id="newsletter" value="sim" />
Quero receber a newsletter deste site
</label>
</div>
<div class="linha2">
<label><input name="Enviar" type="submit" id="Enviar" value="Enviar" />
</label>
</div>
</fieldset>
</form>
</body>
</html>
Analisando o código do formulário.
<form> - Tag principal do formulário, ela determina diversos comportamentos. Veja a seguir:
- id - nome do formulário. É usado para validação em Javascript ou no CSS
- method - este atributo informa como os dados serão enviados. Há dois valores possíveis: POST (os dados são postados internamente) e GET (os dados são enviados pela URL).
- action - É o atributo que define para onde os dados serão enviados quando o formulário for submetido.
<input> - esta tag criar um campo de texto. há algumas variações:
- text - campo de texto simples
- password - campo de texto para digitação de senha. Os valores são mostrados com '*
- radio - criar botões de seleção de escolha única.
- checkbox - cria botões de seleção de múltipla escolha
- submit - criar botões que irão postar os dados do form quando clicado
- reset - cria botões que vão apagar os dados do form quando clicado
- button - cria botões sem ação nenhuma, usado para eventos de javascript.
<select> - Este atributo gera caixas de seleção no estilo drop-down, muito usado para campo que tem uma lista muito grande de itens para a escolha (estado no nosso caso).
<textarea> - Este atributo é usado para criar uma caixa de texto de múltiplas linhas, bastante usado para campos com textos extensos.
Para um melhor posicionamento dos objetos do formulário veja também o post Tabela para dados tabulares e Layout sem tabelas e layout centralizado na página.
Formatação do formulário
Os formulários vem com a formatação padrão do HTML, para mudar a formatação precisamos recorrer ao CSS, para isto crie um arquivo com o nome estilo_form.css e salve na mesma pasta que o exemplo acima. Abaixo o código do arquivo estilo_form.css
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#form1 legend {
color: #333366;
font-weight: bold;
}
#form1 fieldset {
padding: 20px 10px 20px 10px;
width: 300px;
}
#form1 label {
color: #FF9900;
}
.linha {
padding-top: 10px;
padding-left: 10px;
}
.linha2 {
padding-top: 10px;
padding-left: 10px;
}
input,select,textarea{
background-color: #f4f4f4;
}
Analisando o código acima:
#form1 legend - irá formatar a tag <legend> que está dentro do formulário form1.
#form1 fieldset - irá formatar a tag <fieldset> que está dentro do formulário form1.
#form1 label - irá formatar a tag <label> que está dentro do formulário form1.
.linha - formata a classe .linha
.linha2 - formata a classe .linha2
input,select,textarea - formata as tags <input ...>, <select> e <textarea>
Participe do Simulado de HTML
Veja também:
Compartilhe com seus amigos:
// Comentários
Jorge // cidade // 27/03/2008 15:46:00
Danivando // Capim Branco // 19/12/2008 01:39:00
olá, parabens pelo tutorial é umuito bom, mas eu gostaria de saber como fazer para que as informações sejam enviadas para o meu e-mail.
obrigado...
fernando rocha perez guerrero // adamantina-sp // 02/02/2009 18:27:00
Olá. Primeiro, quero agradecer por essas dicas de como criar um formulário em HTML. Consegui criar meu formulário, mas, estou tendo dificuldades em determinar para onde o post será enviado. Vou colar abaixo o meu "formulário" e gostaria que ele fosse enviado para um endereço de e-mail. Por favor, se puder me ajudar, agradeceria muito
Carlos Eduardo // Espirito Santo // 07/05/2009 01:16:00
poxa o tutorial e muito bom, mas voce nao teria como me arrumar uma ideia de como eu consigo fazer um formulario para que quando acessem meu site eles possao enviar o pedido de orçamento...
tem como? agradeço des de ja.
Guilherme // Coimbra // 09/05/2009 11:59:00
Só tenho uma pergunta a fazer, como é que realmente sei que os comentário, são automaticamente postados, no nosso site, após a confirmação do «enviar», e desde já agradeço a informação de como fazer esta "caixa" de comentário.
Aguardo resposta, para o mail indicado antes.
Obrigado.
joao // mococa // 21/07/2009 14:47:00
Como fas para ficar postado na pagina?
Hudson Teixeira // vitoria // 14/08/2009 04:50:00
Gui // Indaiatuba // 17/08/2009 15:20:00
Eita tenho dificuldade di mandar
para meu proprio E-mail sem abrir o Outlook
José Santos // Londrina // 09/10/2009 03:35:00
Tenhho dificuldade de entender a forma de funcionamento de um formulario, como é colocado no site, e como ele manda email sem o outlook
Fernando // Santo Antônio da Platina - PR // 19/11/2009 08:01:00
Cara, parabéns pelo post. Eu já uso css faz algum tempo e a coisa mais chata para mim são os forms.
Seu texto abordou o assunto de forma simples, com detalhes importantes.
Valeu!
leonidio santos da trindade // alagoinhas // 01/02/2010 15:09:00
ola tenho uma duvida, eu criei um formulario e botei para direciona os dados para meu e-mail da hotmail mais as mensagens não chega para meu email você pode mim ajuda.
Wilson // Osasco - SP // 08/06/2010 13:41:00
Olá Luis! Você poderia fazer em html um formulário para mim com os campos: Seu Nome; Seu email; Sua Cidade e por último = Seus Comentários.
Tenho experimentado alguns modelos que vi na web mas quando as pessoas digitam palavras acentuadas fica tudo desconfigurado.
Obrigado por sua atenção.
Marcos // Mandaguari // 10/06/2010 17:22:00
Onde estão postados os outros dois ultimos passos?
estruturação (HTML) OK
formatação (CSS) OK
validação (Javascript) ??
tratamento dos dados (Alguma tecnologia servidor: ASP, ASP.NET, PHP, etc)??
jose // nilopolis // 19/08/2010 12:26:00
como fasso para o formulario enviar o email nao consigo enviar.ex.copiei todos esses codigos fornecidos acima e crei um formulario só que nao consigo enviar o email
ERNANI BRASIL // GOIANIA // 08/09/2010 23:16:00
Fazer o formulário é fácil o difícil e enviar
tanto é que eles não postam.
bruno // aurora // 06/10/2010 09:21:00
como faço para o formulario enviar as informações para meu e-mail?
Andrey // cruzeiro // 04/11/2010 21:42:00
queria saber como faz para eu receber os e-mail na minha caixa de entra no meu e-mail com esse formulario! eu nao sei pra onde vai os recados ! PF Ajuda awe Pelo Post !
muito gRato !
gisele camargo // ponta grossa // 12/11/2010 11:16:00
como faço para enviar as informações oara o meu e-mail???
GISELE CAMARGO // ponta grossa // 12/11/2010 11:35:00
parabens!!!esta ajudando muita gente e solucionando muitas dúvidas ...
Michel // CG-MS // 18/12/2010 18:23:00
method - este atributo informa como os dados serão enviados. Há dois valores possíveis: POST (os dados são postados internamente) e GET (os dados são enviados pela URL).
By. www.donwsbaixedetudo.com.br
Eduardo Barros // São Paulo // 19/01/2011 10:13:00
Olá Luis o Tutorial é ótimo, mas Gostaria de saber como faço para enviar todas as informações do formulário em html para um email, e para enviar para um banco de dados em acess. teria como você me dar essa forcinha. Obrigado Ótimo tutorial Parabéns.
diana // Viana do Castelo // 22/01/2011 15:48:00
boa tarde :) , o blog está excelente!
tenho uma dúvida [que já foi colocada acima mas como nao consigo visualizar a resposta...]
pode me dizer como fazer para que quando clicar no botao "Enviar" abra o Outlook e comentário seja enviado para o meu e-mail? agradecia que respondesse para o meu e-mail. E mais uma vez, obrigada!
Jorge Meirelles // Santo André-SP // 25/04/2011 22:44:00
Boa Noite Campeão!
O seu script é ótimo, é muito bom ter pessoas como você neste mundo, que sabe dividir para somar.
Eu quero saber como alterar o script para receber o e-mail em meu endereço do gmail.
Agradeço, um Grande abraço e Sucesso Sempre!
Jorge Meirelles
Vitrine da Vila Luzita
Willian // São Paulo-SP // 25/04/2011 23:04:00
Poxa Vida! A duvida de todo mundo é a mesma, a parte mais importante não ensinam.
Me dê uma luz como fazer para receber e-mail dos meus contatos no meu hotmail?
Agradeeeeeçoooooo!!!
klç // lkçklç // 01/06/2011 00:19:00
Você pode alterar facilmente a formatação do texto selecionado no documento escolhendo uma aparência para o texto “selecionado na galeria Estilos Rápidos”, na guia Início. Você também pode formatar texto “diretamente” usando os outros controles na guia Início. A maioria dos controles oferece uma opç ão õ entre usar a ‘aparência’ do tema atual ou usar um formato – que você pode especificar.
Roilson // Juiz de Fora // 17/08/2011 09:40:00
Bom dia!!
Estou fazendo uma trabalho para um estágio e estou com a seguinte dúvida:
Tenho a mesma dificuldade que os demais..
Enviar esses dados para uma outra página ou para o meu e-mail sem abrir o outlook.
Se eu não conseguir fazer isto.. eles não irão assinar meu estágio =(
Aguardo resposta
Bruna // São Paulo // 07/09/2011 21:14:00
Olá! adorei tudo sobre o "html" eu estudo na minha escola mais é sempre melhor ainda aprender um pouco mais gostaria de ter uma idéia para criar um site de supermercado tem como vocês me ajudar por favor ???
muito obrigado pela atenção foi bom poder aprender com vocês de coração obrigado
um grande beijo bruna!!
lucas anwdrei // Londres // 18/09/2011 20:46:00
como posso fazer um comentario igual esse seu ,Olá! adorei tudo sobre o "html" eu estudo na minha escola mais é sempre melhor ainda aprender um pouco mais gostaria de ter uma idéia para criar um site de supermercado tem como vocês me ajudar por favor ???
muito obrigado pela atenção foi bom poder aprender com vocês de coração obrigado