How to place two Foms next to each other?

Asked

Viewed 490 times

0

Good afternoon!

In a PHP file you have an HTML form that contains a table and a submit. There is also a second form with another table and a 'Submit'. How to place the second form next to the first one where the third table has to be below the first two? Follow the code.

<body bgcolor="#FFFFF0">
<form id="localizacao" name="localizacao" method="post" action="rastreamento.php" onsubmit="return validaCampoLoca(); return false;">
  <table width="50%" border="1">
      <tr><div align="center"><img src=img/logo.jpg></div></tr>
	  <tr><th colspan="5" align="center" valign="top"><h2>Localizacao de Carga</h2></th>
	  </tr>
    <tr>
      <td width="50">CNPJ:</td>
      <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
        <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
		<td width="156">Selecione o STATUS:</td>
		<td><select name="status" id="status">
		    <option value="0">Recebido</option>
  			<option value="1">Em trânsito</option>
  			<option value="2">Encerrado</option>
  			</select></td>		
    </tr>    	
    <tr>
	  <td colspan="2"><p>
        <input name="cadastrar" type="submit" id="cadastrar" value="OK" /> 
        <br />
          <input name="limpar" type="reset" id="limpar" value="Limpar!" />
          <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<form id="alteracoes" name="alteracoes" method="post" action="rastreamento.php" onsubmit="return validaCampoAltera(); return false;">  
  <table width="50%" border="1">
   <tr><th colspan="5" align="center" valign="top"><h2>Alteracoes</h2></th></tr>
   <tr>
      <td width="50">VIAGEM:</td>
      <td width="835"><input name="VIAGEM" type="text" id="VIAGEM" size="20" maxlength="14" />        
   </tr>
   <tr>
      <td width="50">NOVO STATUS:</td>
      <td width="835"><input name="NVSTATUS" type="text" id="NVSTATUS" size="1" maxlength="1" />        
   </tr>
   <tr>
      <td width="50">EMBARCACAO:</td>
      <td width="835"><input name="EMBARC" type="text" id="EMBARC" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA SAIDA:</td>
      <td width="835"><input name="DATSAI" type="text" id="DATSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA SAIDA:</td>
      <td width="835"><input name="HORSAI" type="text" id="HORSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA CHEGADA:</td>
      <td width="835"><input name="DATCH" type="text" id="DATCH" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA CHEGADA:</td>
      <td width="835"><input name="HORCHE" type="text" id="HORCHE" size="20" maxlength="10" />        
   </tr>   
   <tr>
	  <td colspan="2"><p>
        <input name="atualizar" type="submit" id="atualizar" value="ATUALIZAR" /> 
        <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function validaCampoLoca()
{
if(document.localizacao.CNPJ.value=="")
	{
	alert("O Campo CNPJ é obrigatorio!");
	return false;
	}
else	
return true;
}
function validaCampoAltera()
{
if(document.alteracoes.VIAGEM.value=="")
	{
	alert("O Campo VIAGEM é obrigatório!");
	return false;
	}
else
return true;
}
// Fim do JavaScript que validará os campos obrigatórios!
</script>
	<!-- Lista cada documento de acordo com o CNPJ e o STATUS-->		
<table width="100%" border="1">
	<thead><tr>
	<th align="center">CNPJ</th>
	<th align="center">Data rec</th>
	<th align="center">Tipo Doc</th>
	<th>N&ordm; Doc</th>
	<th>Quant. Vol</th>
	<th>Processo</th>
	<th>Loc. Ent.</th>
	<th>Fornec</th>
	<th>Status</th>
	</tr></thead>
	
	<tbody>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		
		</tr>
		
	</tbody></table>

</body>

javascript html css

  • Dude, where’s the style sheet (CSS) file? .

  • Since you make use of tables, create a table with two columns and in each column put a form

  • Research on CSS flexbox, is by far the most rational way.

1 answer

1


There is the attribute align="left" (<table align="left">) which makes the table aligned to the left of the following elements, but this attribute has become obsolete in HTML5. You can use float: left that the tables shall be side-by-side, unless the screen is too narrow where the minimum width of the tables does not allow one to be next to the other.

Since the last table has a total width of 100%, it will always be below the first two (run the example below in full screen):

table{
   float: left;
}
<form id="localizacao" name="localizacao" method="post" action="rastreamento.php" onsubmit="return validaCampoLoca(); return false;">
  <table width="50%" border="1">
      <tr><div align="center"><img src=img/logo.jpg></div></tr>
	  <tr><th colspan="5" align="center" valign="top"><h2>Localizacao de Carga</h2></th>
	  </tr>
    <tr>
      <td width="50">CNPJ:</td>
      <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
        <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
		<td width="156">Selecione o STATUS:</td>
		<td><select name="status" id="status">
		    <option value="0">Recebido</option>
  			<option value="1">Em trânsito</option>
  			<option value="2">Encerrado</option>
  			</select></td>		
    </tr>    	
    <tr>
	  <td colspan="2"><p>
        <input name="cadastrar" type="submit" id="cadastrar" value="OK" /> 
        <br />
          <input name="limpar" type="reset" id="limpar" value="Limpar!" />
          <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<form id="alteracoes" name="alteracoes" method="post" action="rastreamento.php" onsubmit="return validaCampoAltera(); return false;">  
  <table width="50%" border="1">
   <tr><th colspan="5" align="center" valign="top"><h2>Alteracoes</h2></th></tr>
   <tr>
      <td width="50">VIAGEM:</td>
      <td width="835"><input name="VIAGEM" type="text" id="VIAGEM" size="20" maxlength="14" />        
   </tr>
   <tr>
      <td width="50">NOVO STATUS:</td>
      <td width="835"><input name="NVSTATUS" type="text" id="NVSTATUS" size="1" maxlength="1" />        
   </tr>
   <tr>
      <td width="50">EMBARCACAO:</td>
      <td width="835"><input name="EMBARC" type="text" id="EMBARC" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA SAIDA:</td>
      <td width="835"><input name="DATSAI" type="text" id="DATSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA SAIDA:</td>
      <td width="835"><input name="HORSAI" type="text" id="HORSAI" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">DATA CHEGADA:</td>
      <td width="835"><input name="DATCH" type="text" id="DATCH" size="20" maxlength="10" />        
   </tr>
   <tr>
      <td width="50">HORA CHEGADA:</td>
      <td width="835"><input name="HORCHE" type="text" id="HORCHE" size="20" maxlength="10" />        
   </tr>   
   <tr>
	  <td colspan="2"><p>
        <input name="atualizar" type="submit" id="atualizar" value="ATUALIZAR" /> 
        <br />
          </p>
      </td>
    </tr>
  </table>
</form>
<table width="100%" border="1">
	<thead><tr>
	<th align="center">CNPJ</th>
	<th align="center">Data rec</th>
	<th align="center">Tipo Doc</th>
	<th>N&ordm; Doc</th>
	<th>Quant. Vol</th>
	<th>Processo</th>
	<th>Loc. Ent.</th>
	<th>Fornec</th>
	<th>Status</th>
	</tr></thead>
	
	<tbody>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		
		</tr>
		
	</tbody></table>

  • That’s what the system needed. Just one question, flexbox would also solve this question?

  • I think I would, but I think for a simple thing it’s not necessary to use flexbox.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.