Here is a mini tutorial based on the above mentioned article:
Step 1:
Let's make a basic form first:
<form>
<input name="email" /><br />
<input name="password" /><br />
<input type="submit" name="submit" value="Login" />
</form>
Now, Let's add some labels:
<form>
<label for="email">Email:</label>
<input name="email" id="email" /><br />
<label for="password">Password:</label>
<input name="password" id="password" /><br />
<label for="submit"> </label>
<input type="submit" name="submit" id="submit" value="Login" />
</form>
time to style the form, first we use a basic CSS :
<style>
label, input { display:block; float:left;}
br {clear:left;}
</style>
Step 4:
What left now is, to specify a width for the labels and right justify them, also put some padding and margins to make it look nicer, here are the modified CSS for that task:
label, input { display:block; float:left; margin-bottom:10px;}
label {width:75px; text-align:right; padding-right:10px;}
br {clear:left;}
1 comment:
seems no need to use display:block, here is another basic CSS for form:
<style>
label, input {float:left}
label {width:100px; text-align:right;}
br {clear:left;}
</style>
Post a Comment