Jump to content
JoseVitor

Formulário Responsivo.

Recommended Posts

Tenho um formulário de contato só que quando abro no celular os inputs continuam do mesmo tamanho, mesmo quando já troquei o width deles para porcentagem.

Segue codigo Html e CSS,

 

-------------------------------------------------HTML---------------------------------------------------------

<div class="tab-content">
     <div id="pessoaFisica" class="tab-pane fade in active">
       <form action="contact-bra.php" method="post" >
       <?php include("enviarPessoaFisica.php")?>  
<table border="0" cellpadding="0" cellspacing="2"> 
<tr>
<td colspan="3"><p class="text-1 space">Dados Pessoais</p></td>
</tr>
<tr>
<td colspan="3">
<fieldset><label class ="labels space" for="nome">*Nome</label><br>
<input name="nome" class="required input-extrabig space" id="nome" type="text" value="<?echo $nome ;?>"></fieldset>
</td>
</tr>
<tr>
<td>
<fieldset><label class="labels space" for="cpf">*CPF</label><br>
<input name="cpf" class="required input-big-left space" placeholder=" 000.000.000-000" id="cpf" type="text" value="<?echo $cpf ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="rg">*RG</label>
<input name="rg" class="required input-medium-center space" placeholder=" 00.000.000-000" id="rg" type="text" value="<?echo $rg ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="nascimento">Data de Nascimento</label>
<input name="nascimento" class="required input-medium-right space" placeholder=" DD/MM/AAAA" id="nascimento" type="text" value="<?echo $nascimento ;?>"></fieldset>
</td>
</tr> 
<tr>
<td colspan="3"><p class="text-1 space">Endereço</p></td>
</tr>
<tr>
<td colspan="2">
<fieldset><label class="labels space" for="endereco">*Endereço</label><br>
<input name="endereco" class="required input-big-left space" id="endereco" type="text" value="<?echo $endereco ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="numero">Número</label>
<input name="numero" class="required input-medium-right space" id="numero" type="text" value="<?echo $numero ;?>"></fieldset>
</td>
</tr>
<tr>
<td>
<fieldset><label class="labels space" for="complemento">Complemento</label>
<input name="complemento" class="input-big-left space" id="complemento" type="text" value="<?echo $complemento ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="bairro">Bairro</label>
<input name="bairro" class="required input-medium-center space" id="bairro" type="text" value="<?echo $bairro ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space"for="cep">*CEP</label>
<input name="cep" class="required input-medium-right space" placeholder=" 00000-000" id="cep" type="text" value="<?echo $cep ;?>"></fieldset>
</td>
</tr>
<tr>
<td colspan="2">
<fieldset><label class="labels space" for="cidade">Cidade</label><br>
<input name="cidade" class="required input-big-left space" id="cidade" type="text" value="<?echo $cidade ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="estado">Estado</label>
<input name="estado" class="required input-medium-right space" id="estado" type="text" value="<?echo $estado ;?>"></fieldset>
</td>
</tr>
<tr>
<td colspan="3"><p class="text-1 space">Contato</p></td>
</tr>
<tr>
<td>
<fieldset><label class="labels space" for="email">E-mail</label>
<input name="email" class="required input-big-left space" id="email" type="text" value="<?echo $email ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="celular">Celular</label>
<input name="celular" class="input-medium space" placeholder=" (DDD)9-0000-0000" id="celular" type="text" value="<?echo $celular ;?>"></fieldset>
</td>
<td>
<fieldset><label class="labels space" for="telefone">Telefone</label>
<input name="telefone" class="required input-medium space" placeholder=" (DDD)0000-0000" id="telefone" type="text" value="<?echo $telefone ;?>"></fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<label class="labels space" for="mensagem">Mensagem</label>
<textarea id="mensagem" class="space" cols="55" rows="5" name="mensagem"><?echo $mensagem;?></textarea><br/>
</fieldset>
</td>
</tr>
<tr>
<td colspan="3"><input name="enviarPessoaFisica" type="submit" class="bt-form right" value="Enviar"></td>
</tr>
        </table> 
</form>
</div>
   </div> 
------------------------------------------------------------------CSS-----------------------------------------------------------------------------------

fieldset {
    margin: 0 0 20px 0;
    border: 0;
    margin: 0;
    padding: 0;
}
button, input {
    line-height: normal;
}
 
label{
    display: block;
    font-style: italic;
    color: #6e6e6e;
    font-size: 13px;
    line-height: 100%;
}
input, textarea {
    border: 1px solid #bfc2c4;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
    font-size: 13px;
    color: #333;
    padding: 10px;
}
td{
margin:0px 0px 0px 0px;
vertical-align: top;
}
table {
    border-collapse: collapse;
    border-spacing: 0px;
    margin-left: 100px;
}
.space{
margin-left: 20px;
}
.labels{
margin-top: 20px;
}
.input-extrabig {
    width: 97%;
}
.input-big-left{
width: 95%;
}
.input-medium-center {
    width: 85%;
}
.input-medium-right {
    width: 88%;
}
.input-medium {
    width: 230px;
}
.text-1{
color: #333333;
font-style: italic;
font-weight: 600;
font-size: 13px;
line-height: 140%;
margin-top: 20px;
}
.right {
    float: right;
    margin-bottom: 10px;
    margin-top: 10px;
}
.bt-form{
    border-radius: 3px;
    border: 1px solid #bdbfc0;
    padding: 10px 15px;
    font-size: 13px;
    color: #374452;
    background: -moz-linear-gradient(top,#fff 0,#f5f5f5 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f5f5f5));
    background: -o-linear-gradient(top,#fff 0,#f5f5f5 100%);
    background: linear-gradient(top,#fff 0,#f5f5f5 100%);
}
.bt-form:focus{
    background: -moz-linear-gradient(top,#ededed 0,#fff 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ededed),color-stop(100%,#fff));
    background: -o-linear-gradient(top,#ededed 0,#fff 100%);
    background: linear-gradient(top,#ededed 0,#fff 100%);
    outline:none;
}
 
.bt-form:hover{
    border: 1px solid #a7a7a7;
    background: -moz-linear-gradient(top,#fff 0,#ededed 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#ededed));
    background: -o-linear-gradient(top,#fff 0,#ededed 100%);
    background: linear-gradient(top,#fff 0,#ededed 100%);
}
  
Agradeço qualquer ajuda. Edited by William Bruno
Adicionar code

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.