Simple HTML question

ALInux · 11-06-2005, 05:16 AM

<html>
<label>Name :</label><input name="username" type="text" size="20" maxlength="20"><br>
<label>Password :</label><input name="password" type="password" size="20" maxlength="20"><br>
</html>

In the above html fragment....what should I do so that the two input fields apear on the same vertical ident.....

keefaz · 11-06-2005, 05:26 AM

Add a css style for label

PHP Code:



<style> 
label { 
    display: inline; 
    float: left; 
    width: 7em; /* change this value to suit your needs */ 
    margin-right: 1em; 
} 
</style>

keefaz · 11-06-2005, 05:30 AM

Also you should specify what for label are, eg :

PHP Code:



<html> 
<label for="username">Name :</label> 
<input name="username" type="text" size="20" maxlength="20" /><br /> 
<label for="password">Password :</label> 
<input name="password" type="password" size="20" maxlength="20" /><br /> 
</html>

ALInux · 11-06-2005, 05:35 AM

I just visited www.w3schools to learn about css...but I still have a question.. if I use the method in your first thread...wouldnt that just push all the text fields the same distance to the right leaving them still in a disordered fashion.

Another question, if I specify what the labels are for...would I benefit some function or does it just make my code clearer ?

spooon · 11-06-2005, 06:34 AM

Use tables.

Code:

<html>
<table>
<tr><td><label for="username">Name :</label></td>
  <td><input name="username" id="username" type="text" size="20" maxlength="20"></td></tr>
<tr><td><label for="password">Password :</label></td>
  <td><input name="password" id="username" type="password" size="20" maxlength="20"></td></tr>
</table>
</html>

keefaz · 11-06-2005, 06:50 AM

Try set the width to a higher value just in case

More infos on the label tag here :
http://www.w3schools.com/tags/tag_la...p?output=print

ALInux · 11-06-2005, 06:50 AM

Thanks spoon.........but keefaz hit the bulleye...that is exactly what i want ...now if someone could answer me about the label naming part

keefaz · 11-06-2005, 06:57 AM

See the link above, the for refers to the id of the input element
(and not the name which I believed)

When for is set to the id of the input element, when you click on the
text of the label, the input element is activated

ALInux · 11-06-2005, 07:15 AM

you mean if I disabled it first it will get enabled .....or do you mean that it gets focus ?

B.T.W Thanks for walkin the path with me keefaz

keefaz · 11-06-2005, 07:19 AM

I mean that it gets focus, try the example on the link

ALInux · 11-06-2005, 07:44 AM

Did that ...everything is fine now thanks for the support

ALInux · 11-06-2005, 07:57 AM

Just one more question... if I want to increase the spacing btw lines in an html document what css code should I insert ?

keefaz · 11-06-2005, 02:33 PM

You could set this for all the document with :

PHP Code:



body { 
    line-height: 4em; 
}

Or for individual parts, in this case add line-height style for each tag you want to set

ALInux · 11-07-2005, 02:19 AM

That is smooth thanks