Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Thiago Retondar

Formulários

Por , em Desenvolvimento frontend

Recommended Posts

Thiago Retondar    18

Thiago Retondar
Postado

Olá pessoal, tudo certo?

 

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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 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:

button

checkbox

file

hidden

image

password

radio

reset

submit

text

Vou explicar cada uma dessas dez opções.

 

button http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 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

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif É 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif É 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif É 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 http://forum.imasters.com.br/public/style_emoticons/default/seta.gif É o botão responsável por enviar as informações para seu destino, indicado no action.

 

text http://forum.imasters.com.br/public/style_emoticons/default/seta.gif É 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:

 

□ Bike

□ 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>

http://forum.imasters.com.br/public/style_emoticons/default/excl.gif Atenção: Não confunda o atributo label com a tag label http://forum.imasters.com.br/public/style_emoticons/default/excl.gif

 

Bem é isso pessoal, espero que entendam esse pequeno tutorial!

 

Forte abraço e até a próxima! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kartman    0

Kartman
Postado

Gostei muito do artigo, muito bem explicado! Mais existe uma dúvida que acontece frequentemente com quem utiliza a TAG (INPUT), Como você explicou nós podemos utilizar a TAG (INPUT) com várias definições, mais como transformar uma TAG 

input type="image"
em um botão RESET? Sendo que ao alterar o 
type="image"
o script com JQUERY não funciona!

Como você deve saber hoje é muito comum utilizar um botão RESET nos formulários, afim de desistência de envio e entre outras razões.

Bom, gostei muito do artigo, mais fica aí esta dúvida.

Abraço a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

adri01br    0

adri01br
Postado

beleza Thiago???

 

To com um problema aqui e acho q você pode me ajudar.... vi que no tutorial você usou o mesmo esquema que eu para o campo senha:

 

<form>
<input type="password" name="senha" value="Insira sua senha" size="20" maxlenght="15" />
</form>

O problema esta na frase "Insira sua senha" no meu caso somente "senha" ... como o campo esta definido como password a frase aparece 'criptografada' ... você sabe como posso fazer para que a frase apareça em texto e quando o usuario clicar no campo e digitar volte para a forma de password???

 

Valew.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Isso você pode fazer com JavaScript. Algo assim:

 

JavaScript

window.onload = function(){
	var password = document.form.password;
	password.onclick = function(){
		password.value = "";
		password.type = "password";
	}
	password.onchange = function(){
		if(password.value == "Digite aqui sua senha")
			password.type = "text";
		else
			password.type = "password";
	}
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

adri01br    0

adri01br
Postado

Valew Thiago... mas não manjo nada de javascript... http://forum.imasters.com.br/public/style_emoticons/default/blush.gif ... como eu colocaria oque você me passou usando esse CSS:

 

/* Geral */
form.login {
  	font-size: 1em;
  	width: 990px;
	height: 33px;
	float: left;
}

/* Grupo dos inputs */
fieldset.login {
	border: 0px;
	border-color: #fff;
	float: right;
	line-height: 30px; /*I.E*/
	padding-right: 10px;
}

/* Campo do usuario */
input.loginUser {
	margin-left: 1em;
	padding-top: .1em;
	padding-left: 25px;
	font-family:"Courier New", Courier, monospace;
	font-size: 12px;
	/* font-weight: bold; */
	height: 19px;
	width: 124px;
	border-style: none;
	background: #333 url(../img/userBackground.jpg) no-repeat left top;
}

/* Campo da senha */
input.loginPassword {
	margin-left: 1em; /* espao entre um campo e outro */
	padding-top: .1em;
	padding-left: 25px;
	font-family:"Courier New", Courier, monospace;
	font-size: 12px;
	/* font-weight: bold; */
	height: 19px;
	width: 124px;
	border-style: none;
	background: #333 url(../img/passwordBackground.jpg) no-repeat left top;
}

/* Botoes */
input.botoes {
	padding-top: 5px;
	color: #333; /* o I.E nao aceita o campo VALUE do input vazio. Coloquei um "." com "333" */
	width: 59px;
	border-style: none;
	cursor: pointer;
	background: url(../img/btEntrar.jpg) no-repeat left top;
}

Nao tenho certeza mas acho q tenho q colocar o javascript dentro da tag 

<script language="javascript" type="text/javascript">
dentro da minha index XHTML correto???? Só não sei como substituir as variaveis q você passou no exemplo... fiz algumas tentativas (abaixo) mas nao rolou:

1º

<script language="javascript" type="text/javascript">
<!--
window.onload = function(){
        var login = document.form.login;
        login.onclick = function(){
                login.value = "";
                login.type = "password";
        }
        login.onchange = function(){
                if(login.value == "Digite aqui sua senha")
                        login.type = "text";
                else
                        login.type = "password";
        }
}
// -->
</script>

2º

 

<script language="javascript" type="text/javascript">
<!--
window.onload = function(){
        var login = document.input.loginPassword;
        login.onclick = function(){
                login.value = "";
                login.type = "password";
        }
        login.onchange = function(){
                if(login.value == "Digite aqui sua senha")
                        login.type = "text";
                else
                        login.type = "password";
        }
}
// -->
</script>

e

 

<script language="javascript" type="text/javascript">
<!--
window.onload = function(){
        var login = document.form.loginPassword;
        login.onclick = function(){
                login.value = "";
                login.type = "password";
        }
        login.onchange = function(){
                if(login.value == "Digite aqui sua senha")
                        login.type = "text";
                else
                        login.type = "password";
        }
}
// -->
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gRoOvE    0

gRoOvE
Postado

Bom post Thiago, esclareceu bem o uso de formulários.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito