Dúvida em HTML, Formulário

Assuntos Gerais
#1

Galera,
É uma dúvida muito simples sobre HTML(eu acho).
Seguinte, n sei se pode postar print aqui, mas ai vai.
Uma das minhas páginas estão assim…

mhCUb.jpg1110×186

Eu queria saber como que faço para que os “boxs” fiquem assim como estão(um do lado do outro) porém que o nome fique em cima e o box logo abaixo(que nem o primeiro ‘Titulo de Publicação’). Alguém me explica? Quando eu dou simplesmente um
, a caixa vai pra baixar da do titulo de publicação, eu queria que ficasse embaixo do seu respectivo nome. Obrigado por qualquer ajuda.

Segue o código:


<html>
<head></head>
<body>

<b><h3>2) Produção Científica e Tecnológica:</h3></b>

<span>Título da publicação:</span><br>
<input type="text" name="titulo_publicacao">

<span>Extrato Qualis:</span>
<input type="text" name="extrato_qualis">

<span>Ordem Autores:</span>
<input type="text" name="ordem_autores">

<span>Tipo de Publicação:</span>
<input type="text" name="tipo_de_publicacao">

</body>
</html>
#2

Boa noite,

Pesquise sobre a tag html

… acho que assim irá conseguir deixar o layout como precisa…

[]s

#3

Boa noite Steam,

Bem, o Wesley já havia respondido o que seria a melhor opção até para organização do que você procura. Aqui está um exemplo do que você poderia fazer. Espero ter ajudado.

<html>  
	<head></head>  
	<body>  
  
	<b><h3>2) Produção Científica e Tecnológica:</h3></b>  

		<table>
			<tr>
				<td> <span>Título da publicação:</span>  </td>
				<td> <span>Extrato Qualis:</span>  </td>
				<td> <span>Ordem Autores:</span>  </td>
				<td> <span>Tipo de Publicação:</span>  </td>
			</tr>
			<tr>
				<td> <input type="text" name="titulo_publicacao">  </td>
				<td> <input type="text" name="extrato_qualis">  </td>
				<td> <input type="text" name="ordem_autores">  </td>
				<td> <input type="text" name="tipo_de_publicacao">  </td>
			</tr>
		</table>
	</body>
</html>
#4

Ola,

pelo amor de Deus, estamos em 2012, nao use tables!!! :smiley:

<html>  
<head></head>  

<style>
   .field { float: left; padding-right: 20px;   }
   div.field input { display: block; }
</style>

<body>  
  
<b><h3>2) Produção Científica e Tecnológica:</h3></b>  

<div class="field">  
   Título da publicação:
   <input type="text" name="titulo_publicacao">  
</div>  
 
<div class="field">  
   Extrato Qualis:
   <input type="text" name="extrato_qualis">  
</div>
 
<div class="field">  
   Ordem Autores:
   <input type="text" name="ordem_autores">  
</div>
  
<div class="field">  
   Tipo de Publicação:
   <input type="text" name="tipo_de_publicacao">  
</div>
  
</body>  
</html>

Caso voce for ter varias linhas com campos, que eu acredito que eh o caso, entao vc pode melhorar o seu CSS, por exemplo:
Eu coloquei o exemplo online aqui : http://jsfiddle.net/3ssJp/embedded/result/

<html>  
<head></head>  

<style>
.row {
	clear:both;
}

.field {
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

div.field input {
	display: block;
}

</style>

<body>  
  
<b><h3>2) Produção Científica e Tecnológica:</h3></b>  

<div class="row">
		<div class="field">  
		Título da publicação:
		<input type="text" name="titulo_publicacao">  
		 </div>  
		 
		<div class="field">  
		Extrato Qualis:
		<input type="text" name="extrato_qualis">  
		 </div>
		 
		 <div class="field">  
		Ordem Autores:
		<input type="text" name="ordem_autores">  
		</div>
		  
		 <div class="field">  
		Tipo de Publicação:
		<input type="text" name="tipo_de_publicacao">  
		</div>
</div>

<div class="row">
		<div class="field">  
		Field 1:
		<input type="text" name="titulo_publicacao">  
		 </div>  
		 
		<div class="field">  
		Field 2:
		<input type="text" name="extrato_qualis">  
		 </div>
</div>

<div class="row">
		<div class="field">  
		Field 3: 
		<input type="text" name="titulo_publicacao">  
		 </div>  
		 
		<div class="field">  
		Field 4: 
		<input type="text" name="extrato_qualis">  
		 </div>
		 
		 <div class="field">  
		Field 5: 
		<input type="text" name="ordem_autores">  
		</div>
		  
		 <div class="field">  
		Field 6: 
		<input type="text" name="tipo_de_publicacao">  
		</div>
</div>
  
</body>  
</html>

//Daniel

#5