terryds Posted May 7, 2013 Share Posted May 7, 2013 My form has untidy radio buttons.. Look ! The label male and female and the radio buttons are very awful.. Please help me fix this... Link to comment Share on other sites More sharing options...
Ingolme Posted May 7, 2013 Share Posted May 7, 2013 Well, why are they like this? And what would you like them to look like? I can think of many different ways to make a page look like that image, I can't guess what your code is like. Link to comment Share on other sites More sharing options...
terryds Posted May 7, 2013 Author Share Posted May 7, 2013 My html : <!DOCTYPE html><html><head><title>Sign Up Now!</title><link rel="stylesheet" type="text/css" href="signup.css" /></head><body><h1>Sign up now and get the gifts!</h1><h3>Type down your identity !</h3><form method="post" action="report.php"><fieldset><legend>Sign Up</legend><label>First Name:</label><input type="text" id="fname" name="fname" /><br /><label>Last Name:</label><input type="text" id="lname" name="lname" /><br /><label>Email</label><input type="text" id="email" name="email" /><br /><label>Country</label><input type="text" id="country" name="country" /><br /><label>Gender</label><label for="male">Male</label><input id="male" name="gender" type="radio" value="male"><label for="female">Female</label><input id="female" name="gender" type="radio" value="female"><br /><label>Why do you want to join us ?</label><textarea id="reason" name="reason"></textarea><br /><input type="submit" value="Sign Up!" name="submit" /></fieldset></form></body></html> My CSS : h1 {color: red;} legend {font-size: 20px;} label {width: 300px;float: left;text-align: left;} Link to comment Share on other sites More sharing options...
davej Posted May 7, 2013 Share Posted May 7, 2013 (edited) "Type down your identity" is pretty strange syntax too. The obvious problem is the width of 300px that is assigned to all label tags. <!DOCTYPE html><html><head><title>Sign Up Now!</title><style>h1 {color: red;}legend {font-size: 20px;}span {width: 300px;float: left;text-align: left;}</style></head><body><h1>Sign up now and get the gifts!</h1><h3>Type in your identity !</h3><form method="post" action="report.php"><fieldset><legend>Sign Up</legend><span>First Name:</span><input type="text" id="fname" name="fname" /><br /><span>Last Name:</span><input type="text" id="lname" name="lname" /><br /><span>Email</span><input type="text" id="email" name="email" /><br /><span>Country</span><input type="text" id="country" name="country" /><br /><span>Gender</span><label for="male">Male</label><input id="male" name="gender" type="radio" value="male"><label for="female">Female</label><input id="female" name="gender" type="radio" value="female"><br /><span>Why do you want to join us ?</span><textarea id="reason" name="reason"></textarea><br /><input type="submit" value="Sign Up!" name="submit" /></fieldset></form></body></html> Edited May 7, 2013 by davej Link to comment Share on other sites More sharing options...
Ingolme Posted May 7, 2013 Share Posted May 7, 2013 "float: left" is what's causing the gender section to have a problem. I don't think you need the float to begin with. Link to comment Share on other sites More sharing options...
terryds Posted May 8, 2013 Author Share Posted May 8, 2013 Please tell me why we should use <span> tag instead of <label> tag? Link to comment Share on other sites More sharing options...
Ingolme Posted May 8, 2013 Share Posted May 8, 2013 <label> is preferable, it has a semantic meaning. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now