Geek Answers Handbook

How to evenly add space between the label and the input field, regardless of the length of the text?

Let's say I have 10 input fields and in front of the input fields on the left, I have a span tag that contains text indicating what the user should enter in the field. I did some things, but I'm not sure how to add space between the span tag and the input field no matter how big the text is?

Like this:

enter image description here

+14
html css css3 forms
source share
5 answers

2019 answer:

Some time passed, and now I have changed my approach to building forms. I have made thousands of them until today and am very tired of typing id for each label/input pair, so this was dumped into the toilet. When you enter input directly into the label , everything works the same way, identifiers are not needed. I also took advantage of flexbox that flexbox was very flexible.

HTML:

 <label> Short label <input type="text" name="dummy1" /> </label> <label> Somehow longer label <input type="text" name="dummy2" /> </label> <label> Very long label for testing purposes <input type="text" name="dummy3" /> </label>

CSS:

 label { display: flex; flex-direction: row; justify-content: flex-end; text-align: right; width: 400px; line-height: 26px; margin-bottom: 10px; } input { height: 20px; flex: 0 0 200px; margin-left: 10px; }

Violin DEMO

Original answer:

Use label instead of span . It is designed to interface with inputs and retains some additional functions (clicking a label focuses the input).

This may be exactly what you want:

HTML:

 <label for="dummy1">title for dummy1:</label> <input id="dummy1" name="dummy1" value="dummy1"> <label for="dummy2">longer title for dummy2:</label> <input id="dummy2" name="dummy2" value="dummy2"> <label for="dummy3">even longer title for dummy3:</label> <input id="dummy3" name="dummy3" value="dummy3">

CSS:

 label { width:180px; clear:left; text-align:right; padding-right:10px; } input, label { float:left; }

jsfiddle demo here.

+18
source share

This can be achieved with a completely new display: grid CSS display: grid ( browser support )

HTML:

 <div class='container'> <label for="dummy1">title for dummy1:</label> <input id="dummy1" name="dummy1" value="dummy1"> <label for="dummy2">longer title for dummy2:</label> <input id="dummy2" name="dummy2" value="dummy2"> <label for="dummy3">even longer title for dummy3:</label> <input id="dummy3" name="dummy3" value="dummy3"> </div>

CSS:

 .container { display: grid; grid-template-columns: 1fr 3fr; }

When using the CSS grid, the default elements are column by column, and then line by line. The grid-template-columns rule creates two grid columns, one of which occupies 1/4 of the total horizontal space, and the other 3/4 of the horizontal space. This creates the desired effect.

grid

JS-FIDDLE

+5
source share

You can also use below code

 <html> <head> <style> .labelClass{ float: left; width: 113px; } </style> </head> <body> <form action="yourclassName.jsp"> <span class="labelClass">First name: </span><input type="text" name="fname"><br> <span class="labelClass">Last name: </span><input type="text" name="lname"><br> <input type="submit" value="Submit"> </form> </body> </html>
+2
source share

You can use the table

 <table class="formcontrols" > <tr> <td> <label for="Test">FirstName:</label> </td> <td style="padding-left:10px;"> <input id="Test" name="Test" value="John"> </td> </tr> <tr> <td> <label for="Test">Last name:</label> </td> <td style="padding-left:10px;"> <input id="lastName" name="lastName" value="Travolta"> </td> </tr> </table>

Result: ImageResult

+2
source share

You can always use the 'pre' tag inside the label and just enter spaces in it, so you can always add the same or different number of required spaces

 <form> <label>First Name :<pre>Here just enter number of spaces you want to use(I mean using spacebar to enter blank spaces)</pre> <input type="text"></label> <label>Last Name :<pre>Now Enter enter number of spaces to match above number of spaces</pre> <input type="text"></label> </form>

I hope you enjoy my answer. This is a simple and effective hack.

-one
source share

More articles:


All Articles