Responsive form in HTML?

Question

I am using the following code below, where the span controls the description text, the <p> controls a line of form, and the id of input specifies its size, this defined 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 so that the form it was more pleasant, I had to center it, but it still wasn’t that nice, I wanted to get it aligned as a rectangle, the lines starting and ending at the same point, and in addition left it responsive.

Answer 1

Leonardo, although there is not a single correct way to make a responsive Designer, what we can do is share our personal practice.

In my case, I don’t usually set a size for the inputs, but for the div that contains the input, label, etc.

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

I particularly prefer to work with the concept of Mobile-First, first I define my rules for small screens, then I adapt the layout for 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>

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 several resolutions. And you can use more than a "set" of <label> in a <p> to leave a field next to each other.
There goes your imagination using CSS to organize the elements. This has been meeting all my needs to date.

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