Ir para conteúdo
Fórum Script Brasil
  • 0

Alinhamento de Formulário

Rodrigo Azevedo Lima

Perguntado por Rodrigo Azevedo Lima,

 Share

Pergunta

Rodrigo Azevedo Lima

Rodrigo Azevedo Lima

Postado
Postado

Olá para todos,

Estou desenvolvendo um sistema em PHP onde o usuário deverá preencher um determinado formulário e enviar os dados.

Criei o form e seus elementos necessários, mas na hora de alinhar os títulos com seus respectivos campos está dando uma série de erros. Em alguns browsers aparece corretamente, em outros fica desalinhado.

Como eu quero seguir o padrão Web standards, ou seja, não usar tabelas, gostaria que alguém me desse uma ajuda para solucionar o problema.

Vou postar os código abaixo:

Formulário

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Formulário de Exame Retinopatia da Prematuridade</title>
    
    <style type="text/css"> 
      @import url("../css/estilos.css");      
    </style>
    
    
    <link href="../calendario/calendar.css" rel="stylesheet">
    <script type="text/javascript" src="../calendario/calendar_br.js"></script>
    
  </head>
  
  <body>
    <!-- Início do Formulário de Exame ROP -->
    <form name="cad_exame" id="cad_exame" method="post" action="<?php $PHP_SELF; ?>" />
      
      <div id="box-geral">
      
        <fieldset>
          <h2></h2>
          
          <div id="box-topo">
            <label for="dt_exame">Data do Exame:</label>
            <input type="text" name="dt_exame" size="10" maxlength="10" />
            <script language="JavaScript">
              new tcal ({
                //Nome do formulário
                'formname': 'cad_exame',
                //Nome do input
                'controlname': 'dt_exame'
              });
            </script>
            <font id="txt_ajuda">dd/mm/aaaa</font>
          </div>
          
          <div id="box-esquerda">
            <div id="box-desc-rotulo">CAMPOS PARA PREENCHIMENTO</div>
            <p id="rotulo"><label for="d_pupilar">Diâmetro Pupilar <font id="txt_ajuda">(mm)</font>:</label></p>
            <p id="rotulo"><label for="d_vasos_iris">Dilatação Vasos Íris:</label></p>
            <p id="rotulo"><label for="t_vitrea">Turvação Vítrea:</label></p>
            <p id="rotulo"><label for="preplus">Preplus:</label></p>
            <p id="rotulo"><label for="plus">Plus:</label></p>
            <p id="rotulo"><label for="estagio">Estágio <font id="txt_ajuda">(0 a 5)</font>:</label></p>
            <p id="rotulo"><label for="zona">Zona <font id="txt_ajuda">(0 a 3)</font>:</label></p>
            <p id="rotulo"><label for="horas">Horas <font id="txt_ajuda">(0 a 12)</font>:</label></p>
            <p id="rotulo"><label for="rop1">ROP Tipo 1:</label></p>
            <p id="rotulo"><label for="rop2">ROP Tipo 2:</label></p>
            <p id="rotulo"><label for="limiar">Limiar:</label></p>
            <p id="rotulo"><label for="regressao">Em Regressão:</label></p>
            <p id="rotulo"><label for="regredido">Regredido:</label></p>
          </div>
          
          <div id="box-centro">
            <div id="box-desc-rotulo">OLHO DIREITO</div>
            <p id="campo"><input type="text" name="d_pupilar_od" size="3" maxlength="3" /></p>
            <p id="campo">
              <select name="d_vasos_iris_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="t_vitrea_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="preplus_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="plus_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="estagio_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="zona_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="horas_od" size="3" maxlength="1" /></p>
            <p id="campo">
              <select name="rop1_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="rop2_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="limiar_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regressao_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regredido_od" size="3" maxlength="1" /></p>
          </div>
          
          <div id="box-direita">
            <div id="box-desc-rotulo">OLHO ESQUERDO</div>
            <p id="campo"><input type="text" name="d_pupilar_oe" size="3" maxlength="3" /></p>
            <p id="campo">
              <select name="d_vasos_iris_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="t_vitrea_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="preplus_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="plus_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="estagio_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="zona_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="horas_oe" size="3" maxlength="1" /></p>
            <p id="campo">
              <select name="rop1_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="rop2_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="limiar_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regressao_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regredido_oe" size="3" maxlength="1" /></p>
          </div>
          
          <div id="box-rodape">
            <button type="submit" name="enviar">Enviar Dados</button>
          </div>
          
        </fieldset>
        
      </div>
      
    </form>
    <!-- Fim do Formulário de Exame ROP -->
    
  </body>
  
</html>
CSS
#box-geral{
  width:700px;
  margin:auto;
  padding:0;
  background:#FFFFFF;
  color:#333333;
  }
form fieldset{
  border:1px solid #999999;
  background-color:#F5F5F5;  
  margin:0;
  padding:0;
  }
form fieldset h2{
  width:698px;
  height:35px;
  background:url(../imagens/f_principal.jpg) no-repeat;
  margin:0;
  padding:0;
  }
form label{
  font-weight:bold;
  color:#000066;
  margin:0;
  padding:0;
  }
#rotulo{
  margin:0;
  padding:4px 0 10px 0;
  }
#campo{
  margin:0;
  padding:4px 0 8px 0;
  }
#box-topo{
  font:12px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  text-align:center;
  border-bottom:1px solid #CCCCCC;
  margin:4px 0 4px 0;
  padding:16px 0 16px 0;
  }
#box-desc-rotulo{
  font:12px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  color:#FFFFFF;
  background:#000000;
  margin:0;
  padding:0;
  }
#box-esquerda{
  width:226px;
  font:12px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  text-align:right;
  float:left;
  margin:0 0 0 4px;
  padding:0;
  }
#box-centro{
  width:230px;
  text-align:center;
  float:left;
  margin:0;
  padding:0;
  }
#box-direita{
  width:230px;
  text-align:center;
  float:left;
  margin:0 4px 0 0;
  padding:0;
  }
#box-rodape{
  text-align:center;
  border-top:1px solid #CCCCCC;
  margin:8px 0 4px 0;
  padding:8px 0 16px 0;
  clear:both;
  }
#txt_ajuda{
  font:10px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-style:italic;
  color:red;
  }
#legenda{
  font:15px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  color:red;
  }
input{
  color:#781351;
  background:#fff;
  border:1px solid #ccc;
  }
input:focus{
  color:#781351;
  background:#fff;
  border:1px solid #606060;
  }
button{
  font:10px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  color:#000000;
  background:#F9F9F9;
  border:1px solid #ccc;
  margin:10px 0 0 0;
  }

Desde já agradeço.

Rodrigo Lima

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
*FIT*

*FIT*

Postado
Postado

Legal, no caso você está usando 3 <p> por linha, até ai tudo bem, mas não seria mais fácil colocar um div em cada linha?

Sendo assim, a div se encarregaria de deixar os 3 <p> no mesmo alinhamento, ou mesmo sem a div, limitar uma altura para o <p>.

Link para o comentário
Compartilhar em outros sites
  • 0
Rodrigo Azevedo Lima

Rodrigo Azevedo Lima

Postado
  • Autor
Postado
Legal, no caso você está usando 3 <p> por linha, até ai tudo bem, mas não seria mais fácil colocar um div em cada linha?

Sendo assim, a div se encarregaria de deixar os 3 <p> no mesmo alinhamento, ou mesmo sem a div, limitar uma altura para o <p>.

FIT, eu já tentei limitar a altura para o <p>, mas os campos do form tem pequenas diferenças de altura dependendo do browser, e aí que está o problemas. Se você ajusta em um, no outro dá uma diferença.

Abraços,

Rodrigo

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...