7
To facilitate the development of responsive forms it is very common to put 100% width on inputs, and control their size through the width of a div as container, this technique helps when manipulating the media queries of these inputs. This can be a problem when we have labels bigger than the input for example. The most common way to do this is according to 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 principles of affordance, an input should have the ideal width for the data that can be entered. If the maximum is 10 characters, it should have a 10-character width. So what are the alternatives best way to treat the input width, 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 --
The question here is how it would be possible to balance these concepts, because if we choose only the easiest, affordance is harmed. If we did all the custom inputs for your content, maintenance would be very complicated.
Very good question, I would give + 1, but I’ve already exhausted the votes today :)
– Artur Trapp
"But following the principles of affordance, an input should have the ideal width for the data that can be entered.". While agreeing that input should ideally be the size of input data, this is not affordance. Regardless, I would still take the "ux" tag off your question because it deals with the width programming, and not your justification/goal (actually I’ve already done an issue taking - if you don’t agree, just go back).
– Luiz Vieira
Affordance means recognition, so recognizing what kind of information should be typed through input size is also affordance and thus also dealing with user experience. But thanks.
– Alex Machado
You’re back to tag [tag:ux]. Okay. But note that your question does not question whether setting the size of an input according to the maximum content is right or not. You assume it’s right (which I agree with, by the way), and ask how to implement. The choice to leave the tag is essentially yours, but I insist that it makes very little sense in the current scope (of implementation) of the question. Good luck.
– Luiz Vieira
About affordance, you’re right, sorry. Although it has no direct relationship with possible actions about an input, the size certainly has some relation to the "how much" can be typed. :)
– Luiz Vieira