Ir para conteúdo

POWERED BY:

Arquivado

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

Freisleben

Css e formantado Formulario

Por , em Desenvolvimento frontend

Recommended Posts

Freisleben    0

Freisleben
Postado

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?

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

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:

 

<head>
<link style="text/css" rel="stylesheet" href="estilo.css">
</head>
<form name="form" method="post" action="envia.php" />

  <fieldset>
      <div id="inputs_cliente"><label for="cliente">Cliente</label>
        <input class="input" id="cliente" type="text" name="cliente" size="33"/></div>
      <div id="inputs_align"><label for="cnpj">CNPJ</label>
        <input class="input" id="cnpj" type="text" name="cnpj"  /></div>
      <div id="inputs_align"><label for="contrato">Contrato</label>
        <input class="input" id="cnpj" type="text" name="cnpj" /></div>
      <input type="submit" class="botao" img="" width="" height="" value="Buscar" />
  </fieldset>

</form>

CSS:

 

form{
    width:657px;
    height:80px;
    float:left;
}

fieldset{
    border:none;
}

label{
    font-size: 14px;
    margin-left:5px;
    font-family: "Times New Roman", serif;
    font-size:14px;
    color:#8B2323;
    font-weight:bold;
}

.input{
    height:30px;
    margin-left:5px;
    margin-top:5px;
}

.input:focus{
    border:#9AC0CD 1px solid;
}

#inputs_align{
    width:150px;
    float:left;
    margin-left:5px;
}

#inputs_cliente{
    width:228px;
    float:left;
    margin-left:5px;
}

.botao{
    margin-top:20px;
    float:left;
    padding:4px;
    margin-left:20px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

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

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