To facilitate the development of responsive forms it is very common to place 100% of width in the inputs, and to control its size through the width of a container div, this technique helps when manipulating the media queries of these inputs. This can be a problem when we have labels larger than the input data for example. The most common way to do this is as html below.
<!-- html-->
<div class="form-control classe-controladora">
<label>Endereço</label>
<input type="text">
</div>
<!-- css-->
label, input{
display: block;
width: 100%;
}
.classe-controladora{
width: 30%;
}
But following the affordance principles, an input must have the optimal width for the data that can be entered. If the maximum is 10 characters, it should be 10 characters long. So what are the best way to handle the width of inputs, using the size attribute? using css?
I think that at first, the controlling class should perhaps manipulate only the input, the problem would be in a very large system where the variation of widths would be difficult to maintain (especially if we treat the responsive)
.classe-controladora input{
width: 30%
}
- Edit -
Doubt here is how it would be possible to balance these concepts, because if we choose only the easiest, affordance is impaired. If we make all the custom inputs for your content, maintenance would be very complicated.