Ir para conteúdo

POWERED BY:

Arquivado

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

luissouza

Campos um abaixo do outro

Por , em Desenvolvimento frontend

Recommended Posts

luissouza    0

luissouza
Postado

Oi tudo bem? Estou fazendo um projeto e aprendendo CSS ao mesmo tempo. Vi um formulário na web que achei legal, baixei e comecei as alterações, tentando entender cada passo. Meu problema é que eu quero colocar alguns campos de input lado a lado e não consigo. Já tentei de tudo. Pesquisei muito antes. Eu até consigo colocar os campos, mas as labels ficam todas de um lado. Outra coisa que tenho dúvida é se é preciso colocar name e id para uma tag, ou se basta apenas colocar um dos dois. Me pareceu meio redundante. O meu código é o seguinte:

 

estilo.css

 

* { margin: 0; padding: 0; }
body {font-family: Verdana, Arial; font-size: 12px; line-height: 18px; }
a { text-decoration: none; }
.container{margin: 20px auto; width: 900px; background: #fff;}
h3 { margin-bottom: 15px; font-size: 22px; text-shadow: 2px 2px 2px #ccc; }

#contactform {

width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;

border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;	

-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;

}

.field{margin-bottom:7px;}

label {
font-family: Arial, Verdana; 
text-shadow: 2px 2px 2px #ccc;
display: block; 
float: left; 
font-weight: bold; 
margin-right:10px; 
text-align: right; 
width: 120px; 
line-height: 25px; 
font-size: 15px; 
}

.input{
font-family: Arial, Verdana; 
font-size: 15px; 
padding: 5px; 
border: 1px solid #b9bdc1; 
width: 300px; 
color: #797979;	
}

.input:focus{
background-color:#E7E8E7;	
}

.textarea {
height:150px;	
}

.hint{
display:none;
}

.field:hover .hint {  
position: absolute;
display: block;  
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;	
}

.button{
float: right;
margin:10px 55px 10px 0;
font-weight: bold;
line-height: 1;
padding: 6px 10px;
cursor:pointer;   
color: #fff;

text-align: center;
text-shadow: 0 -1px 1px #64799e;

/* Background gradient */
background: #a5b8da;
background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3));

/* Border style */
 	border: 2px solid #5c6f91;  
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Box shadow */
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;

}

.button:hover {
background: #848FB2;
   cursor: pointer;
}

 

form_termos_cooperacao.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css">
<title>PrestaContas</title>

</head>

<body>

<div class="container">

<form id="contactform" class="rounded" method="post" action="" name=""> 

	<h3>Cadastro de Termos de Cooperação</h3>
	<div class="field">
		<label for="tc_ano">Ano</label>
		<input name="tc_ano" class="input" id="tc_ano" type="text" size="4" maxlength="4" />
		<p class="hint">Ano do Termo de Cooperação</p>
		<span><img border="0" src="obrig.gif" alt="*"  />
	</div>

	<div class="field">
		<label for="tc_numero">Número:</label>
		<input name="tc_numero" class="input" id="tc_numero" type="text" size="3" maxlength="3" />
		<p class="hint">Número do Termo de Cooperação</p>
		<span><img border="0" src="check_p.gif" alt="*"  />
	</div>

	<div class="field">
		<label for="tc_inicio">Data Início:</label>
		<input name="tc_inicio" class="input" id="tc_inicio" type="text" size="10" maxlength="10" />
		<p class="hint">Data do Início do Termo de Cooperação</p>
	</div>

	<div class="field">
		<label for="tc_fim">Data Fim:</label>
		<input name="tc_fim" class="input" id="tc_fim" type="text" size="10" maxlength="10" />
		<p class="hint">Data do Fim do Termo de Cooperação</p>
	</div>

	<div class="field">
		<label for="tc_secreta">Secretário de Educação:</label>
		<input name="tc_secreta" class="input" id="tc_secreta" type="text" size="40" maxlength="40" />
		<p class="hint">Nome do Secretário da Educação</p>
	</div>

	<br />

	<div class="but">
		<input type="submit" name="cadastrar" class="button" value="cadastrar" />
	</div>

	<div class="but">
		<input type="submit" name="alterar" class="button" value="alterar" />
	</div>

	<div class="but">
		<input type="submit" name="excluir"	class="button" value="excluir" />
	</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Não entendi. Posta um print do que tu quer fazer :)

 

colocar name e id para uma tag, ou se basta apenas colocar um dos dois

Vai da tua necessidade:

:seta: http://www.smallgreentree.net/198/form-id-name.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

luissouza    0

luissouza
Postado

Não entendi. Posta um print do que tu quer fazer :)

 

 

Vai da tua necessidade:

:seta: http://www.smallgreentree.net/198/form-id-name.html

 

O formulário que fiz é o seguinte:

 

formulario.jpg

 

Vou diminuir os campos ano e número e colocar um na frente do outro.

O problema é que diminuo os campos mas não consigo alinhá-los. Quando retiro as divs até que consigo, mas as labels ficam todas do lado esquerdo.

 

Quero fazer mais ou menos assim

 

formulario2.jpg

 

 

Obrigado pela outra resposta:

 

"A nice feature of the ID attribute is that it is designed to provide a unique identity for an HTML element. A really good web authoring tool should make it impossible to create two HTML elements with the same ID attribute. "

 

Pelo que eu entendi, é melhor usar apenas o id mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Eu penso numa reestrutura. Semanticamente não tá errado, mas além de ter vários erros de marcação, tem também muito código pra pouco resultado.

 

Não precisa utilizar divs pra dividir os inputs verticalmente:

:seta: http://henriquebarcelos.in/blog/2011/12/03/construindo-um-formulario-semantico-em-html

 

E horizontalmente, dependendo do elemento, é só determinar a largura certa e manusear o float:

float:left;

float:right;

 

Se não conseguir, posta até onde tu conseguiu. :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

luissouza    0

luissouza
Postado

Eu vou fazer o formulário com todos campos na vertical mesmo. A maioria dos campos que vi é assim. Deve ter alguma coisa a ver com a visualização. Alguma facilidade. Quais os erros de marcação que têm em meu código?? Gostaria de saber para corrigí-los. Outra coisa: no formulários semântico que você me mandou o link, são usadas "ids" e "names" em todos os inputs, contrariando o artigo anterior.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Eu vou fazer o formulário com todos campos na vertical mesmo. A maioria dos campos que vi é assim.

Se tu quer "colunizar" os campos, tenta fazer do jeito que eu te disse. Já desistiu assim?

Gostaria de saber para corrigí-los.

Padronização do link para o CSS:

<link href="estilo.css" rel="stylesheet" type="text/css">

(É importante, acredite) — XHTML

 

Fechamento de tags (esse tem váááááaáarios):

                       <span><img border="0" src="obrig.gif" alt="*"  />
               </div>

Correto (mais correto ainda sem o span, que não vi utilidade):

                       <span><img border="0" src="obrig.gif" alt="*"  /></span>
               </div>

Quebra de linha (?)

<br />

naquele caso do teu código, o correto seria usar margin.

 

Outra coisa: no formulários semântico que você me mandou o link, são usadas "ids" e "names" em todos os inputs, contrariando o artigo anterior.

Isso não vai da semântica, vai da necessidade. Sobre o artigo, tu tem que tirar tuas próprias conclusões sobre o assunto, aí tu vai saber quando usar. :)

 

:seta: http://validator.w3.org/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

A Diéssica já matou o tópico com ótimo material. Só vou tentar resumir:

 

Name vs ID.

Não há redundância alguma. Cada um tem um propósito. Se precisa dos dois propósitos, use os dois. Fim de papo.

 

Form display:

Você pode dispor os elementos do formulário de forma linear e quebrar onde deseja. Ou dispor de forma colunar e alinhar quando necessário.

 

Linear: Elementos de formulário são renderizados em linha. Se aproveitando dessa abordagem, envolva os elementos dentro de LABEL e quebre quando desejado

 

Nota: O exemplo abaixo foi reduzido para fins de brevidade. Apesar de conter um formulário válido, opte for formas mais significativas de markup.

<form action="">
<span>
   <label>Nome: <input></label>
   <label>Sobrenome: <input></label>
</span>
<span>
   <label>Email: <input></label>
   <label>Senha: <input></label>
</span>
</form>

 

form span { display: block; }

 

Um modo que eu considero mais limpo é montar os campos em blocos.

 

<form action="">
   <ul>
       <li><label>Nome: <input></label></li>
       <li><label>Sobrenome: <input></label></li>
       <li class="quebra"><label>Email: <input></label></li>
       <li><label>Senha: <input></label></li>
   </ul>
</form>

 

form li {
       float: left;
       list-style: none;
   }

   .quebra {
       clear: left;
   }

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