Entrar
Cadastre-se
Ajuda
Postou 21 dezembro 2008 - 20:10
Depois de um bom tempo sem postar, resolvi reparticpar novamente do fórum com mais força. Bom mas vamos lá.
Bom, para construir um formulário, você deve iniciá-lo com a seguinte tag:
<form> </form>
A tag de formulário possui seis atributos opcionais e um obrigatório.
O atributo obrigatório é o action. Ele é encarregado de enviar os dados do formulários para a página ou script.
Ele se usa assim:
<html> <head> <title>Tutorial Formulários</title> </head> <body> <form action="contato.php"> </form> </body> </html>
Notem que eu coloquei uma extensão .php, mas você pode utilizar outra linguagem, como o .asp.
Dos seis atributos opcionais, falarei sobre os três mais usados.
O primeiro é o atributo method. Ele especifica o método que o formulário vai ser enviado.
Existem dois métodos. O get e o post.
Get
ele passa os valores, do formulário, pela URL, ou seja, podemos ver as informações que se passa pelo atributo action. Não é muito aconselhável, se você não quer que os usuários vejam essas informações.Post
Passa as informações de forma "invisível", ou seja, o usuário não ve as informações do action.Então seu formulário ficará assim:
<html> <head> <title>Tutorial Formulários</title> </head> <body> <form action="contato.php" method="post"> </form> </body> </html>
Lembrando que o action é obrigatório e você pode substituir o post, por get dependendo do formulário.
O segundo atributo é o name. Ele simplesmente coloca um nome para o formulário, assim você pode utiliza-lo com uma linguagem, como PHP ou ASP.
Ficando assim:
<html> <head> <title>Tutorial Formulários</title> </head> <body> <form action="contato.php" method="post" name="contato"> </form> </body> </html>
O terceiro atributo é o enctype. Ele bem usado quando tem aqueles campos de procurar algum arquivo. Para isso você deve usar dessa maneira:
<html> <head> <title>Tutorial Formulários</title> </head> <body> <form action="contato.php" method="post" name="contato" enctype="multipart/form-data"> </form> </body> </html>
Agora falarei sobre a tag input.
Sua sintaxe é assim:
<input />
A tag input, é uma das mais usadas em um formulário. E para que ela serve? Bem, ela cria um campo, mas só essa tag não irá fazer nada. Você deve definir o tipo do campo através do atributo type="".
O atributo type, tem dez opções.
São elas:
Quote
button
checkbox
file
hidden
image
password
radio
reset
submit
text
checkbox
file
hidden
image
password
radio
reset
submit
text
Vou explicar cada uma dessas dez opções.
button
Ele é utilizado para chamar funções que rodam no browser (o Javascript). Junto com o tipo button, você pode usar o atributo value. O value colocar um texto no botão.Exemplo:
<form> <input type="button" name="botao_enviar" value="Enviar Dados" /> </form>
radio
Utilizado para múltiplas escolhas onde o usuário pode escolher apenas uma opção. Você pode adicionar o atributo checked junto com o radio. Assim, quando o usuário abrir a página em que está o formulário, a opção que você colocou checked="checked", já vai estar assinalada.Exemplo:
<form> <input type="radio" name="opçao" value="checkbox" checked="checked" /> </form>
file
O tipo file, procura um arquivo no computador. Ele é usado para upload de arquivos. Lembrando que na tag do formulário precisa ter o atributo enctype="multipart/form-data".Exemplo:
<form enctype="multipart/form-data"> <input type="file" name="upload" /> </form>
hidden
Permite que um dado seja submetido sem que o usuário veja-o no formulário. Entre outras palavras ele é um campo oculto. Ele é usado para enviar dados de acesso, id do usuário ou qualquer outra informação importante.Exemplo:
<form> <input type="hidden" name="id_usuario" /> </form>
image
Ele é igual ao tipo button, porém pode se atribuir uma imagem a ele.Exemplo:
<form> <input type="image" name="botao_enviar" value="Enviar Dados" src="local/da/imagem" alt="descrição de sua imagem" /> </form>
password
É um tipo de campo, onde o usuário coloca a senha e ela aparece em forma de asteriscos. Pode atribuir a ele o size, que é o tamanho do elemento, e o maxlenght, que é o valor máximo de caracteres que pode ser inserido no campo.Exemplo:
<form> <input type="password" name="senha" value="Insira sua senha" size="20" maxlenght="15" /> </form>
checkbox
É a mesma coisa que o radio, também pode ser atribuir os mesmo valores, porém o usuário pode escolher várias opções.Exemplo:
<form> <input type="checkbox" name="opcoes" />Bike <input type="checkbox" name="opcoes" checked="checked" /> Skate <input type="checkbox" name="opcoes" /> Patins </form>
reset
É um botão que limpa tudo o que foi feito no formulário.Exemplo:
<form> <input type="reset" name="reset" value="Limpar Dados" /> </form>
submit
É o botão responsável por enviar as informações para seu destino, indicado no action.text
É um tipo de campo, onde o usuário coloca texto. Bastante usado para "Login", "Usuário". Ele possui as mesmas funções do password.Exemplo:
<form> <input type="text" name="login" value="Escreva seu nome de usuário /"> </form>
Bem pessoal, agora falaremos sobre outra tag. A label.
Sua sintaxe:
<label>Texto</label>
Primeiro vou explicar o seu significado. Pense em um usuário que tenha mal de parkison, por exemplo, ele provávelemente sentira uma certa dificuldade e clicar em um checkbox ou em um radio button, por exemplo.
Então o label veio para facilitar as vidas dessas pessoas. Um exemplo fácil:
Quote
□ Bike
□ Skate
□ Patins
□ Skate
□ Patins
Cada □, no exemplo acima, é um checkbox. Em vez da pessoa clicar no pequeno quadrado, com o label ela pode clicar na palavra ou frase.
Exemplo:
<form action=""> <input type="checkbox" name="esporte" id="bike" /><label for="bike">Bike</label> <br /> <input type="checkbox" name="esporte" id="patins" /><label for="patins">Patins</label> </form>
Para que o label funcione, você deve colocar uma id, no input, lembrando que ela tem que única, e na tag label o atributo for com o nome da id.
Agora falremos sobre o fieldset.
O fieldset, serve para agrupar grupos.
Sua sintaxe:
<fieldset> ... </fieldset>
Vamos imaginar que você tenha que construir um formlário de cadastro de usuário.
Então você cria um grupo para Nome e Senha. Depois outro para informações pessoais. Outro para Localização. Agora imagine tudo isso junto e embaralhado. Iria complicar sua vida hor de aplicar a CSS. Então, é para isso que serve o fieldset.
Vou dar um exemplo:
<html> <head> <title>Formulários</title> </head> <body> <form action=""> <fieldset> <legend>Nome de usuário e senha</legend> <label for=usuario">Nome de Usuário</label><input type="text" name="usuario" id="usuario" /> <label for="senha">Senha:</label><input type="password" name="senha" id="senha" /> </fieldset> <fieldset> <legend>Informações pessoais</legend> <label for="firstname">Nome:</label><input type="text" name="firstname" id="firstname" /> <label for="lastname">Sobrenome:</label><input type="text" name="lastname" id="lastname" /> </fieldset> </form> </body> </html>
E por último, irei falar sobre a tag select. Ela faz o efeito do menu drop-down.
Sua sintaxe:
<select> ... </select>
Para colocar ítens dentro dessa "lista", você precisa da tag <option>.
Vou dar um exemplo:
<html> <head> <title>Formulários</title> </head> <body> <form action=""> <select> <option>Maçã</option> <option>Pera</option> <option>Mamão</option> </select> </form> </body> </html>
Agora imagina fazer um "lista" dessas aí, porém com 100 opções. Iria ficar bagunçado não é?
Para isso existe a tag optgroup. Ela tem a mesma função do fieldset.
Sua sintaxe:
<optgroup> ... </optgroup>
Ele fnciona junto com o atributo label, que coloca o nome da seção.
Um exemplo:
<html> <head> <title>Formulários</title> </head> <body> <form action=""> <select> <optgroup label="Frutas"> <option>Maçã</option> <option>Pera</option> <option>Mamão</option> </optgroup> <optgroup label="Legumes"> <option>Salsinha</option> <option>Alface</option> <option>Agrião</option> </optgroup> </select> </form> </body> </html>
Atenção: Não confunda o atributo label com a tag label Bem é isso pessoal, espero que entendam esse pequeno tutorial!
Forte abraço e até a próxima!
Quote
... como eu colocaria oque você me passou usando esse CSS: