Alinhamento de campos de formulários

degtr · Junho 21, 2013

Pessoal como eu consigo alinhar os campos deste meu formulário, estou usando o Dreamweaver CS6 e os campos de texto estão desalinhados se comparar as bordas.

Alguém pode me ajudar?

Vejam o código:

<!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=utf-8" />
<title>Cadastramento de Locatarios</title>
<style type="text/css">
<!--
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
#apDiv1 {
	position: absolute;
	left: 16px;
	top: 43px;
	width: 183px;
	height: 51px;
	z-index: 1;
}
.normal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.style5 {font-weight: bold}
.g {
	color: #FFF;
}
-->
</style>
</head>

<body>
<div id="apDiv1"><img src="Socicam_t.png" width="181" height="51" /></div>
<form><table width="878" height="636" border="0" cellpadding="1">
  <tr bgcolor="#CCCCCC">
    <td height="60" colspan="2" bgcolor="#CCCCCC"><div align="center" class="style5">
      <p><span class="style3">PLANILHA DE CADASTRAMENTO DE LOCATARIO</span><br />  
        <span class="style3">BILHETERIAS</span></p>
      </div>
    <p>
      <label></label>
    </p></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal"><label>
      <span class="style3">
        <input type="radio" name="radio" id="chkInclusao" value="chkInclusao" />
        </span><span class="normal">INCLUSAO  </span></label>
      
      <span class="normal">
        <label>
          <input type="radio" name="radio" id="chkAlteracao" value="chkAlteracao" />
        ALTERACAO</label>
        <label>   
          <input type="radio" name="radio" id="chkBaixa" value="chkBaixa" />
        BAIXA</label>
        </span>
      <label></label>
      
      <label></label>
      <label>
            Data:
      <input name="data2" type="text" id="data2" size="10" />
Terminal:
<input name="terminal" type="text" id="terminal" size="58" />
<div align="left"></div>
      <div align="right"></div>
      <div align="center"></div>
      </label>
      <div align="left"></div></td>
    </tr>
  <tr>
    <td height="24" colspan="2" class="normal"><div align="left"><span class="normal">Razao Social / Nome Fantasia:   
          <input name="txt_nome_fantasia" type="text" id="txt_nome_fantasia" size="109" />
    </span></div></td>
    </tr>
  <tr>
    <td width="255" height="24" class="normal"><span class="normal">Cod. Cliente:</span>      <input name="CodCliente" type="text" id="CodCliente" size="20" />      </td>
    <td width="613" height="24" class="normal"><div align="left"> Nome Fantasia:  
        <input name="txtNomeFantasia" type="text" id="txtNomeFantasia" size="79" />
    </div>
    </td>
    </tr>
  
  <tr>
    <td height="24" colspan="2" class="normal">Endereco:
      <input name="endereco" type="text" id="endereco" size="29" />
       Numero:
     <input name="numero_empresa" type="text" id="numero_empresa" size="1" />
      Bairro:
      <input name="bairro_empresa" type="text" id="bairro_empresa" size="19" />
      Complemento:
      <input name="complemento_empresa" type="text" id="complemento_empresa" size="8" />
      CEP:
      <input name="cep_empresa" type="text" id="cep_empresa" size="9" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">CNPJ / CPF:
      <input name="cnpj_cpf" type="text" id="cnpj_cpf" size="25" />
              I.E:
            <input name="ie" type="text" id="ie" size="20" />
       Telefone:
     <input name="telefone" type="text" id="telefone" size="20" />
 Celular:
      <input name="celular" type="text" id="celular" size="19" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">E-mail:
    <input name="email" type="text" id="email" size="35" /> 
    Natureza de Locacao:
    <input name="natureza_de_locacao" type="text" id="natureza_de_locacao" size="35" />
    Metro Quadrado:
    <input name="m²" type="text" id="m²" size="12" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Ramo de Atividade:
    <input type="text" name="romo_de_atividade" id="romo_de_atividade" />
    Atividade Principal:
    <input type="text" name="Atividade_Principal" id="Atividade_Principal" />
      Codigo Ramo Atividade:
    <input name="Codigo_Ramo_Atividade" type="text" id="Codigo_Ramo_Atividade" size="25" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Inicio do Contrato:
    <input name="Inicio_do_Contrato" type="text" id="Inicio_do_Contrato" /> 
    Prazo de Duracao:
    <input type="text" name="Prazo_de_Duracao" id="Prazo_de_Duracao" /> 
    Termino:
    <input name="Termino" type="text" id="Termino" size="15" />
    Indice:
    <input name="Indice" type="text" id="Indice" size="14" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Valor Min / Al. Fixo:
      <input name="Valor_Minimo_Aluguel_Fixo" type="text" id="Valor_Minimo_Aluguel_Fixo" size="11" /> 
    Data de Venc:
    <input name="Data_de_Vencimento" type="text" id="Data_de_Vencimento" size="10" />
     
    Defasagem:
    <input name="Defasagem" type="text" id="Defasagem" size="9" /> 
    Data Base:
    <input name="Data_base" type="text" id="Data_base" size="10" /> 
    Periodicidade:
    <input name="Periodicidade" type="text" id="Periodicidade" size="5" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Acresc%:
<input name="Acrescimo_no_Periodo" type="text" id="Acrescimo_no_Periodo" value="" size="4" />
      Mes:
      <input name="mes" type="text" id="mes" value="" size="9" />
      %:
      <input name="Acrescimo_no_Periodo1" type="text" id="Acrescimo_no_Periodo1" value="" size="5" />
      Mes:
      <input name="mes1" type="text" id="mes1" value="" size="9" /> 
      %:
      <input name="Acrescimo_no_Periodo2" type="text" id="Acrescimo_no_Periodo2" value="" size="5" /> 
      Mes:
      <input name="mes2" type="text" id="mes2" value="" size="9" />
      %:
      <input name="Acrescimo_no_Periodo3" type="text" id="Acrescimo_no_Periodo3" value="" size="5" />
      Mes:
      <input name="mes3" type="text" id="mes3" value="" size="9" /></td>
     
  </tr>
  <tr>
    <td height="24" colspan="2" bgcolor="#CCCCCC" class="normal"><div align="center"><strong>QMCL</strong></div></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Vencimento:
    <input name="Data_de_Vencimento_qmcl" type="text" id="Data_de_Vencimento_qmcl" size="10" />
    Coeficiente:
    <input type="checkbox" name="coeficiente_qmcl" id="coeficiente_qmcl" />
    Percentual
    <input type="checkbox" name="percentual_qmcl" id="percentual_qmcl" />
                          Limite Sobre Aluguel:
    <input name="limite_sobre_aluguel_qmcl" type="text" id="limite_sobre_aluguel_qmcl" size="11" />
    Aluguel
    <input type="checkbox" name="aluguel_qmcl" id="aluguel_qmcl" />
    Faturamento
    <input type="checkbox" name="faturamento_qmcl" id="faturamento_qmcl" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" bgcolor="#CCCCCC" class="normal"><div align="center"><strong>RATEIO</strong></div></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Agua vencimento:
      <input name="agua_venc_rateio" type="text" id="agua_venc_rateio" size="10" />
Valor Fixo:
<input name="valor_fixo_rateio" type="text" id="valor_fixo_rateio" size="20" />
Indice:
<input name="indice_rateio" type="text" id="indice_rateio" size="20" />
  Defasagem:
<input name="defasagem_rateio" type="text" id="defasagem_rateio" size="22" />
 </td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Data Base:
      <input name="database_rateio" type="text" id="database_rateio" size="10" />
                 
Metro Cubico Fixo:
<input name="metro_cubico_fixo_rateio" type="text" id="metro_cubico_fixo_rateio" size="6" />
             % Sobre Total:
<input name="sobretotal_rateio" type="text" id="sobretotal_rateio" size="10" />
        Leitura:
<input name="leitura_rateio" type="text" id="leitura_rateio" size="26" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Agua vencimento:
      <input name="agua_venc_rateio1" type="text" id="agua_venc_rateio1" size="10" />
Valor Fixo:
<input name="valor_fixo_rateio1" type="text" id="Data_de_Vencimento6" size="20" />
 Indice:
<input name="indice_rateio1" type="text" id="Data_de_Vencimento7" size="20" />
  Desafasagem:
<input name="defasagem_rateio1" type="text" id="defasagem_rateio1" size="19" />
 </td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Data Base:
      <input name="txt_database_rateio1" type="text" id="txt_database_rateio1" size="10" />
                  Metro Cubico Fixo:
      <input name="metro_cubico_fixo_rateio1" type="text" id="metro_cubico_fixo_rateio1" size="6" />
             % Sobre Total:
<input name="sobretotal_rateio1" type="text" id="sobretotal_rateio1" size="10" />
        Leitura:
<input name="leitura_rateio1" type="text" id="leitura_rateio1" size="26" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">IPTU venc:
      <input name="txt_iptu_vencimento" type="text" id="txt_iptu_vencimento" size="10" />
                  % sobre total:
      <input name="txt_percentual_sobretotal" type="text" id="txt_percentual_sobretotal" size="10" /> 
                  Seguro venc:
      <input name="txt_Seguro_venc" type="text" id="txt_Seguro_venc" size="10" />
                % sobre total:
      <input name="txt_percentual_sobre_total1" type="text" id="txt_percentual_sobre_total1" size="21" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Multa:
      <input name="txt_multa" type="text" id="txt_multa" size="30" />
      Juros:
<input name="txt_juros" type="text" id="txt_juros" size="30" /></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">Observações:
      <textarea name="txt_observacoes" cols="95" id="txt_observacoes"></textarea></td>
  </tr>
  <tr>
    <td height="24" colspan="2" class="normal">           RESP. PREENCH.           GEST. DE CONTRATOS                      JURIDICO                       DIR. DE OPERACOES                   CADASTRO</td>
    </tr>
  <tr>
    <td height="24" colspan="2" class="normal"><input type="text" name="txt_responsavel" id="txt_responsavel" />
      <input type="text" name="txt_gestor_de_contratos" id="txt_gestor_de_contratos" />
      <input type="text" name="txt_juridico" id="txt_juridico" />
      <input type="text" name="txt_diretor_operacoes" id="txt_diretor_operacoes" />
      <input type="text" name="txt_cadastro" id="txt_cadastro" /></td>
  </tr>
</table>
</form>
<blockquote> 	</blockquote>
</body>

</html>

bruno_mosciatti · Junho 21, 2013

Pra começar, cade o CSS?

Você não está se baseando pelo design view do Dreamweaver né? Espero que não.

degtr · Junho 21, 2013

não...eu teste ele no navegador internet explorer, chrome e firefox e em todos tenho desalinhamento dos últimos campos.

eu sou novato em html e por isso uso o CS6 para me ajudar...

bruno_mosciatti · Junho 21, 2013

Dê um tamanho fixo para suas labels.

degtr · Junho 21, 2013

Mas todas as tabelas ja possuem um tamanho fixo. O problema são os campos de formulários, que ficam desalinhados

bruno_mosciatti · Junho 21, 2013

Mas todas as tabelas ja possuem um tamanho fixo. O problema são os campos de formulários, que ficam desalinhados

Não disse para colocar tamanho fixo na tabela, mas sim nas labels! Veja qual é a maior label e pegue seu tamanho como um padrão para todas.

degtr · Junho 21, 2013

se eu tento igualar elas, acaba estourando o espaço elas vão para baixo empurrando as demais e acaba desalinhando todo o formulario

bruno_mosciatti · Junho 22, 2013

se eu tento igualar elas, acaba estourando o espaço elas vão para baixo empurrando as demais e acaba desalinhando todo o formulario

bom, você está trabalhando com tabela, totalmente inviável... espero que outra pessoa possa ajudar, poque eu não costumo faze formulários com tabela.

Heitor Sousa · Junho 24, 2013

Cara o mais fácil é você fazer sem tabela, estude sobre Tabless.

Se você deseja alterar o tamanho do input em um formulário pode usar:

#namedoform input{

width: 100px

height:30px

}

Bru_ce · Junho 24, 2013

OBS: Heitor, esta errado a forma que você escreveu.

O que seria tabless ? O correto seria tableless !

Cara, tira essas tabelas daí e faça tudo novamente.
Caso prossiga você vai ter dor de cabeça no futuro.

Abs

Arquivado

Alinhamento de campos de formulários

Recommended Posts

degtr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

bruno_mosciatti 22

Compartilhar este post

Link para o post

Compartilhar em outros sites

degtr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

bruno_mosciatti 22

Compartilhar este post

Link para o post

Compartilhar em outros sites

degtr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

bruno_mosciatti 22

Compartilhar este post

Link para o post

Compartilhar em outros sites

degtr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

bruno_mosciatti 22

Compartilhar este post

Link para o post

Compartilhar em outros sites

Heitor Sousa 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante