Reputation: 79
I don`t know how to do this:
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!
Upvotes: 0
Views: 54
Reputation: 2182
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;
}
Upvotes: 1
Reputation: 392
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.
Upvotes: 0
Reputation: 8457
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>
Upvotes: 1