Form responsive in HTML?

Question

Form responsive in HTML?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm using the following code, where span controls the description text, <p> controls a form line, and id input specifies its size, this set in 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>

But for form to be more enjoyable, I had to centralize it, but it still did not look so nice, I wanted to leave it aligned as a rectangle, the lines starting and ending at the same point, and moreover left -or responsive.

html5 css3

asked by anonymous 19.08.2015 / 15:20

2 answers

Change style of overflow-y: scroll [duplicate] Separate Styles in the Three Column Division

score 1 · Answer 1

Leonardo, while there is no one right way to become a Responsive Designer, what we can do is share our personal practice.

In my case, I do not usually define a size for the inputs, but rather for the div that contains the input, label, etc.

The second point is to define a minimum size for the form / div that contains all the inputs, in my case I define a minimum size of 320px, but this is up to you. Another interlining point, a set a maximum size for the form / div.

I particularly prefer to work with the Mobile-First concept, first I define my rules for small screens, so I'm adapting the layout to large screens.

.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>

score 0 · Answer 2

I use my forms like this:

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

So I have more options on how to organize the elements in different resolutions. And you can use more than a "set" of <label> in a <p> to leave one field next to the other. It goes from your imagination to use CSS to organize the elements. This has been serving all my needs to this day.

Enjoying, your code has a problem, you closed the first <span> without closing <p> . If this code is in use it will give you a problem.