Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola Amigos,
Estou tentando criar o efeito do formulario abaixo um input text do lado do outro mais não estou conseguindo. Estou colocando display:block, float: left e nada! Como faço esse formulario com css?
/applications/core/interface/imageproxy/imageproxy.php?img=http://img717.imageshack.us/img717/1920/93992211.png&key=23d1ef5a196ace4748615d8c2c8d239568af0b3199d2db22e9568ebb505e3df5" alt="Imagem Postada" />
Não precisa utilizar <div> para envolver o <label> e o <input>, meu caro Guilherme_90. Além disso, seu <form> tinha alguns erros, como a utilização do atributo name e também a barra de fechamento... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif Montei um exemplo de como ficaria, deixando o formulário quase idêntico ao da imagem mostrada pelo nosso amigo Freisleben (só não coloquei as bordas arredondadas no botão e aquele triângulo amarelo em cima do botão... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif ):
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de formulário</title>
<style type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
body {
margin:20px;
background-color:#fcfcfc;
}
form fieldset {
width:1000px;
height:58px;
border:none;
}
form fieldset label {
display:block;
float:left;
height:58px;
line-height:20px;
font-size:15px;
font-weight:bold;
color:#515151;
margin-right:3px;
}
form fieldset label input {
display:block;
height:34px;
line-height:34px;
font-size:16px;
margin-top:2px;
background-color:#fff;
border:1px solid #c9c9c9;
}
/* Corrige a margem superior nos IEs 7+ */
*:first-child+html form fieldset label input { margin-top:1px; }
form fieldset button {
display:block;
float:left;
width:110px;
height:36px;
line-height:32px;
font-size:15px;
font-weight:bold;
color:#fff;
margin:22px 0 0 4px;
background-color:#a1a1a1;
border:1px solid #e4e4e4;
}
form fieldset input#cliente { width:308px; }
form fieldset input#cnpj { width:214px; }
form fieldset input#contrato { width:178px; }
form fieldset br { display:none; }
</style>
</head>
<body>
<form method="post" action="envia.php">
<fieldset>
<label for="cliente" title="Cliente">
Cliente
<input type="text" name="cliente" id="cliente" title="Cliente" />
</label>
<br />
<label for="cnpj" title="CNPJ">
CNPJ
<input type="text" name="cnpj" id="cnpj" title="CNPJ" />
</label>
<br />
<label for="contrato" title="Contrato">
Contrato
<input type="text" name="contrato" id="contrato" title="Contrato" />
</label>
<br />
<button type="submit" class="botao" title="Buscar">Buscar</button>
</fieldset>
</form>
</body>
</html>Paulo de Tarso F. M.
Eu sou iniciante amigo, e a minha intenção foi ajudar. Que bom que você encontrou o jeito mais fácil de resolver o problema. Mas porque você usou display:block; no form fieldset label, form fieldset label input e form fieldset button? E porque display:none; no form fieldset br?
Olá meu caro Guilherme_90. Mas você está corretíssimo!!!
Quando estamos aprendendo (e isso acontece todos os dias, não só com quem está iniciando não, viu?), nos baseamos apenas na experiência adquirida até o momento. E um dos objetivos do fórum é também essa troca de experiência... Por isso escrevi meu exemplo com base no seu, para poder justificar as alterações efetuadas...
Comparando o meu exemplo com o seu, removi os atributos da tag form e ainda adicionei os inputs dentro do próprio label justamente para não precisar da div... Quando desenvolvemos temos sempre que pensar o seguinte: é realmente necessário utilizar uma tag aqui ou ali? A maioria das vezes a opção por utilizar uma tag (a div é a mais comum) é para "facilitar" a vida, mas nem sempre isso é realmente necessário. Sabendo formatar corretamente com CSS, você verá que é bem simples...
Bom, vamos à explicação:
As tags label, input e button são, por padrão, tags inline. Esse é o primeiro ponto.
Utilizei um display:block no label para poder transformá-lo em uma espécie de div: quando definimos que um elemento é block, ele passa a se comportar como se fosse uma div, e com isso podemos trabalhar com width, height, margin, padding, border, float, e etc. com muito mais facilidade e controle... Se você quiser fazer alguns testes, adicione um background-color no fieldset e no label... Você verá como esses elementos estão se comportando... Um outro ponto importante do uso do display:block em labels é que, ao clicar em qualquer área do label, seja no texto ou fora dele, o input correspondente receberá o foco! Esse é um recurso muito útil principalmente quando utilizamos radio e checkbox...
Utilizei um display:block no input para poder jogá-lo para a linha debaixo do texto automaticamente. Experimente tirar o display:block do input e veja o que acontece... Outro teste que você pode fazer para comparar é visualizar essa página de exemplo sem o CSS. Ou melhor, se quiser acompanhar cada etapa do CSS, vá adicionando cada linha e vá visualizando o resultado final.
E o display:block no button... Bem, até que o botão se comportaria da maneira desejada sem ele e sem o float... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif Duas linhas a menos no código! :P
Tae cara, código pronto pra ti. Funcionando belezinha, aí é so você fazer as modificações que quiser, mas está do jeito que tu quer.
HTML:
CSS:form{
fieldset{
label{
.input:focus{