1

Estou usando o seguinte código abaixo, onde o span controla o texto de descrição, o <p> controla uma linha do form, e o id do input especifica o tamanho do mesmo, isto definido no CSS:

#cmpG {width: 32%;}
#cmpM {width: 22%;}
#cmpP {width: 12%;}
span {
    font-weight: 100;
    display:grid;
    margin-left: 2%;
    margin-right: 0.5%;
    text-align: left;
}
form p {text-align:center;}

@media screen and (max-width: 800px) {
    span {font-size: 10px;}
    #cmpG {width: 28%;}
    #cmpM {width: 19%;}
    #cmpP {width: 13%;}
}
<form>
    <span><p>Nome da Empresa:</p></span>
    <input id="cmpG" type="text" size=80 name="empnome" maxlength=80/>
    <span>Fundação: </span>
    <input id="cmpM" type="date" size=50 name="data" maxlength=10/>
</form>

Porém para que o form ficasse mais agradável, eu tive que centralizá-lo, mas ainda não ficou tão agradável assim, queria deixar ele alinhado como um retângulo, as linhas começando e terminando no mesmo ponto, e além disso deixado-o responsivo.

1
  • 1
    Pelo que eu entendi, basta definir a propriedade min-width no seu input. 19/08/2015 às 15:48

2 Respostas 2

1

Leonardo, apesar de não existir uma unica forma correta de se fazer um Designer responsivo, o que podemos fazer é compartilhar a nossa pratica pessoal.

No meu caso, não costumo definir um tamanho para os inputs, mas sim para a div que contem o input, label, etc.

O segundo ponto, é definir um tamanho minimo para o form/div que contem todos os inputs, no meu caso eu defino um tamanho minimo de 320px, mas isto fica ao seu encargo. Outro ponto interpresante, um definir um tamanho máximo para o form/div.

Eu particularmente prefiro trabalhar com o conceito de Mobile-First, primeiro defino as minhas regras para telas pequenas, então vou adaptando o layout para telas grandes.

.linha {
    clear: both;
    min-width: 320px;
    max-width: 65em;
    position: relative;
    right: 0px;
    left: 0px;
    margin: auto;
}

.coluna {
    float: left;
}

.coluna label,
.coluna input {
    width: 100%;
}

.coluna label:after {
    content: ':'
}
@media only screen {
    .pequeno-12 {
        width: 100%;
    }
}

@media only screen and (min-width: 40em) {
    .coluna label {
        float: right;
        text-align: right;
        margin-top: 2px;
        margin-right: 5px;
    }
    
    .mediano-4 {
        width: 33.33333%;
    }

    .mediano-8 {
        width: 66.66667%;
    } 
}

@media only screen and (min-width: 65em) {
    .grande-2 {
        width: 16.66667%;
    }

    .grande-4 {
        width: 33.33333%;
    } 
}
<form>
    <div class="linha">
        <div class="coluna pequeno-12 mediano-4 grande-2">
            <label for="cmpA">Nome da Empresa</label>
        </div>
        <div class="coluna pequeno-12 mediano-8 grande-4">
            <input id="cmpA" type="text" name="empnome" maxlength=80/>
        </div>
        <div class="coluna pequeno-12 mediano-4 grande-2">        
            <label for="cmpB">Criada Em</label>
        </div>
        <div class="coluna pequeno-12 mediano-8 grande-4">
            <input id="cmpB" type="date" name="data" maxlength=10/>
        </div>
    </div>
    <div class="linha">
        <div class="coluna pequeno-12 mediano-4 grande-2">
            <label for="cmpC">Responsavel</label>
        </div>
        <div class="coluna pequeno-12 mediano-8 grande-4">
            <input id="cmpC" type="text" name="empnome" maxlength=80/>
        </div>
        <div class="coluna pequeno-12 mediano-4 grande-2">        
            <label for="cmpD">Ultima Vistoria</label>
        </div>
        <div class="coluna pequeno-12 mediano-8 grande-4">
            <input id="cmpD" type="date" name="data" maxlength=10/>
        </div>
    </div>
</form>

0

Eu uso os meus forms assim:

<form>
    <p>
        <label>
            <span>Nome do campo</span>
            <input type="text"/>
        </label>
    </p>
</form>

Assim eu tenho mais opções de como organizar os elementos em diversas resoluções. E você pode usar mais que um "conjunto" de <label> em um <p> para deixar um campo ao lado do outro.
Aí vai da sua imaginação usar o CSS para organizar os elementos. Isso tem vindo a atender a todas minhas necessidades até hoje.

Aproveitando, seu código está com um problema, você fechou a primeira <span> sem fechar a <p>. Se esse código estiver em uso vai dar problema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .