Fields to right

Question

I don`t know how to do this:

From:

from

To:

HTML/CSS:

<style>
                input[type='text'] {
                    width:246px;
                    margin:2px 1px;
                    padding:2px;
                }
                </style>
                <form action="/Handeler/control.php?p=add#" method="POST">
                    <strong>Let op: Als je een file via FTP of gewoon in de map uploads zet weet dan zeker dat de file match id(<u>yYW3D7</u>) het zelfde is als de bestandsnaam!!!</strong> <br />
                    File match ID: <input type="text" name="code" value="yYW3D7" disabled> <br />
                    Code: <input type="text" name="code" placeholder="Download code hier..." value=""> <br />
                    Verloopt op: <input type="text" name="code" placeholder="Download code hier..." value=""> <br />
                    Aantal keer gebruiken: <input type="text" name="code" placeholder="Aantal downloads hier..." value=""> <br />
                    IP whitelist:  <input type="text" name="code" placeholder="IP hier. (laat leeg voor geen whitelist)" value=""><br />
                </form>

I have tried position:absolute and relative also float:right; but thats not working.

Thank you!

Do not just "Use a ``". Using CSS for layouts is not simply "being table-less", it means being easier to maintain your code. Suppose you want to change your layout from lined left-to-right to up-to-down someday. To change it using tables, you'll do lots of Cutting-Pasting in all your project files; Using CSS, you'll only need to change some rules. So, keep on learning and practicing CSS, you're on the right way. — André Leria, Nov 17 '13 at 17:53
@AndréLeria, you can style a `table` element too. Old versions of IE are still a problem, as usual, but don’t confuse this with logical arguments. — Jukka K. Korpela, Nov 17 '13 at 19:14
possible duplicate of [Align HTML input fields by :](http://stackoverflow.com/questions/10868640/align-html-input-fields-by) — Jukka K. Korpela, Nov 17 '13 at 20:17
This is a frequently asked question, with several duplicates (mostly with inferior answers, suggesting contrived styling instead of the robust and logical approach of using a table, but still). — Jukka K. Korpela, Nov 17 '13 at 20:19
I know tables can be styled -- must be styled if you use CSS. But they should be used for tabled data, as the name suggests. However, you've got a point for IE6/7 -- but I'd sincerely discard support for it. Someone that uses IE6/7 until today probably don't know how to 'use' the internet, and will most probably not _need_ to use it. (And if they find your website 'ugly', they should think about switching / updating browsers again); — André Leria, Nov 17 '13 at 20:19

jameslafferty · Accepted Answer · 2013-11-17T19:29:39.763

Here's a way to start approaching it with css.

CSS

input[type='text'] {
    width:246px;
    margin:2px 1px;
    padding:2px;
}

label {
    display : block;
}

label span {
    display : inline-block;
    width : 150px;
}

Html:

<form action="/Handeler/control.php?p=add#" method="POST">
    <strong>Let op: Als je een file via FTP of gewoon in de map uploads zet weet dan zeker dat de file match id(<u>yYW3D7</u>) het zelfde is als de bestandsnaam!!!</strong> 
    <label>
        <span>File match ID:</span>
        <input type="text" name="code" value="yYW3D7" disabled />
    </label>
    <label>
        <span>Code:</span>
        <input type="text" name="code" placeholder="Download code hier..." value="" />
    </label>
    <label>
        <span>Verloopt op:</span>
        <input type="text" name="code" placeholder="Download code hier..." value="" />
    </label>
    <label>
        <span>Aantal keer gebruiken:</span>
        <input type="text" name="code" placeholder="Aantal downloads hier..." value="" />
    </label>
    <label>
        <span>IP whitelist:</span>
        <input type="text" name="code" placeholder="IP hier. (laat leeg voor geen whitelist)" value="" />
    </label>
</form>

If you don't like setting width on the label span, you can use display : table-cell; to style the same markup with the width dependent on the containing form instead. There's a forked fiddle here that does that.

Css:

form {
    display : table;
    width : 425px;
}
input[type='text'] {
    width:246px;
    margin:2px 1px;
    padding:2px;
}

label {
    display : table-row;
}

label span {
    display : table-cell;
}

This means setting an arbitrary width in pixels. Much less flexible than using a table. — Jukka K. Korpela, Nov 17 '13 at 19:15
@JukkaK.Korpela I've updated the styling on my answer to address your concern. The big issue with using tables here is that the table is non-semantic, and we can achieve an equally (or arguably more) flexible layout using css. — jameslafferty, Nov 17 '13 at 19:31

score 1 · Answer 2 · answered Nov 17 '13 at 17:56

1

You need to tag the label side of the input and make it a specific width, then all of your inputs will know to begin at a specified horizontal position. And maybe you should think about using different names for your inputs? Your form values are going to be very confused when you submit.

input[type='text'] {
  width:246px;
  margin:2px 1px;
  padding:2px;}
label {
   width:225px;
   float:right;
   display: inline-block;
}
</style>
<form action="/Handeler/control.php?p=add#" method="POST">
<strong>Let op: Als je een file via FTP of gewoon in de map uploads zet weet dan zeker dat de file match id(<u>yYW3D7</u>) het zelfde is als de bestandsnaam!!!</strong> <br />
<label for="code">File match ID: </label><input type="text" name="code" value="yYW3D7" disabled> <br />
<label for="code">Code: </label><input type="text" name="code" placeholder="Download code hier..." value=""> <br />
<label for="code">Verloopt op: </label><input type="text" name="code" placeholder="Download code hier..." value=""> <br />
<label for="code">Aantal keer gebruiken: </label><input type="text" name="code" placeholder="Aantal downloads hier..." value=""> <br />
<label for="code">IP whitelist:  </label><input type="text" name="code" placeholder="IP hier. (laat leeg voor geen whitelist)" value=""><br />
</form>

answered Nov 17 '13 at 17:56

DevlshOne

8,357
1
29
37

My understanding is that the for attribute takes the id of the input field. That's kind of why I prefer the nested markup I have above, because I can avoid giving inputs ids (which helps when there's more than one form of a similar kind on a document, and which avoids the bloat of needless ids). Admittedly, using for and ids seems to be a lot more common. Really cool discussion of the options here http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag – jameslafferty Nov 17 '13 at 18:06
The `for` attribute of the label [does take the attribute of the ID field](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) but I specifically wanted to point out that in this case, the same `name` property is repeated. – DevlshOne Nov 17 '13 at 18:10
Ah... totally got it. Good to make sure the OP knows that for should take the ID, and that they're aware that they'll only get one of the code values on the server. – jameslafferty Nov 17 '13 at 18:12
1

@jameslafferty I just read through that `label` placement discussion. Seems like there are good points throughout about the use of `id` and the objectivity of the `input` type regarding the placement. IMHO, as long as your consistent throughout your code, it's a personal preference thang. – DevlshOne Nov 17 '13 at 18:17

score 0 · Answer 3 · answered Nov 17 '13 at 18:00

Lay out your HTML kinda like this...

<div>
  <label for="code">File Match ID:</label>
  <input id="code" type="text" />
<div>
<!-- and repeat... -->

And CSS your way into:

div {
  width: 300px;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  width: 200px;
}

Remember to class up your HTML and CSS, and also to adjust the values for your needs. This was just an example.

Fields to right

3 Answers3