Ir para conteúdo

Arquivado

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

brcontainer

formulario "valido"

Por , em Desenvolvimento frontend

Recommended Posts

brcontainer    16

brcontainer
Postado

Devido ao excessos de pedidos, e certa dificuldade ao pessoal compreender o uso do CSS em formularios(pelo que notei a duvida não com as TAGs em maioria em sim por que elas não "alinham", resposta por que falta o CSS ^^)

 

Antes de ler esta tutorial gostaria que pesquisassem sobre as TAGs <LABEL>, <fieldset>, <legend> e sobre o uso do FOR em labels.

 

Então produzi o seguinte formulario:

<!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="en" lang="en">
<head>
<title>Forms</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
/*<![CDATA[*/
*{
margin:0;
padding:0;
}
#form{
padding:2px;
display:block;
width:400px;
height:auto;
background:#fc0;
}
#form fieldset{
border:0;
}
#form label{
background:#fff;
margin:1px;
width:140px;
height:22px;
float:left;
}
#form input, #form textarea, #form select{
margin:1px;
width:240px;
height:19px;
}
#form textarea, #form .text{
height:70px;
}

fieldset.RaCh{
width:400px;
}
#form fieldset.RaCh input,#form fieldset.RaCh span{
float:left;
margin: 2px 0 0 20px;
width:auto;
height:auto;
}
#form fieldset.RaCh span{
margin:1px;
}
#form fieldset.botao{
width:396px;
}
#form fieldset.botao input{
margin: 1px;
width:120px;
height:25px;
float:right;
}
/*]]>*/
</style>
</head>
<body>
<div id="form">
<form action="pagina.html" method="post">
<fieldset>
<label for="a">Nome:</label><input id="a" type="text" name="a" value="" />
<label for="b">Sobrenome:</label><input id="b" type="text" name="b" value="" />
<label for="c">Senha:</label><input id="c" type="password" name="c" value="" />
<label for="d">Redigite a senha:</label><input id="d" type="password" name="d" value="" />
<label for="e">Email</label><input id="e" type="text" name="e" value="" />
<label for="f">Redigite a email:</label><input id="f" type="text" name="f" value="" />
</fieldset>

<fieldset>
<label for="g">Pais:</label>
<select id="g">
<option value="Brasil">Brasil</option>
<option value="Japao">Japao</option>
<option value="Mexico">Mexico</option>
</select>
</fieldset>

<fieldset class="RaCh">
<label>Sexo:</label>
<input type="radio" name="h" value="" /> <span>(Masc)</span>
<input type="radio" name="h" value="" /> <span>(Fem)</span>
</fieldset>

<fieldset class="RaCh">
<label>Adicionais:</label>
<input type="checkbox" name="i" value="" /> <span>(filhos)</span>
<input type="checkbox" name="j" value="" /> <span>(casado)</span>
</fieldset>

<fieldset>
<label for="l" class="text">Fale sobre você:</label><textarea id="l" cols="28" rows="3" 

name="l"></textarea>
</fieldset>

<fieldset class="botao">
<input type="submit" value="Submeter" />
<input type="reset" value="limpar" />
</fieldset>
</form>
</div>
</body>
</html>

Explicações:

*{
margin:0;
padding:0;
}
Zerando margens e espaçamentos inferiores.

 

#form fieldset{
border:0;
}
aqui eu retirei a borda

 

#form input, #form textarea, #form select{
margin:1px;
width:240px;
height:19px;
}
aqui defini as TAGs mais usadas com um padrão de tamanho parecido

 

#form label{
background:#fff;
margin:1px;
width:140px;
height:22px;
float:left;
}
aqui defini o alinhamento dos elementos LABEL que será onde ficará o "valor indicativo" do seu <input>

 

#form textarea, #form .text{
height:70px;
}
Aqui definirei o ELEMENTO <TEXTAREA>

 

 

fieldset.RaCh{
width:400px;
}
...
<fieldset class="RaCh">
<label>Adicionais:</label>
<input type="checkbox" name="i" value="" /> <span>(filhos)</span>
<input type="checkbox" name="j" value="" /> <span>(casado)</span>
</fieldset>
Com isso criarei um novo FIELDSET para criar elementos inputs diferentes (RADIO e CHECKBOX)

 

#form fieldset.botao{
width:396px;
}
#form fieldset.botao input{
margin: 1px;
width:120px;
height:25px;
float:right;
}
Com isso criarei um FIELDSET para elementos como botões (Enviar e Limpar geralemente) e tambem redefino seu valores e posição

 

Ps.: Se quiserem modificar criticar, estejam a vontade para postar aqui, DUVIDAS devem ser feitas no forum principal, com exceção de duvidas explicativas diretamente a este TUTORIAL ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Bem acredito que um link não seja necessario, pois bastará copiar e modificar a sua maneira

mas se você vier a criar um para algum site e usar esta tuto põe o link para vermos um exemplo ;)

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