How do I make spaces between sentences and radio buttons and text boxes? (HTML)

806 views Asked by At

I have the following code and would like to separate the following items about 10 inches apart from each other. I am creating a form where a user are able to read their inputs. Here is How I would like for it to be: Name:.......................... TEXTBOX (Without the periods)

<body>
<lable>Name:</label> <input type="text" name="name" value="<?php echo $name;?>">
<lable>
<p>E-mail:
</label>     
<input type="text" name="email" value="<?php echo $email;?>">
</p>
<lable>
Website:</label>  <input type="text" name="website" value="<?php echo $website;?>">
<lable>
<p>&nbsp;</p>
<lable>
Hello Gender:
           <input type="radio" name="gender"
<?php if (isset($gender) && $gender=="female") echo "checked";?>
value="female">Female
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="male") echo "checked";?>value="male">Male
</body>
</html>
3

There are 3 answers

0
Bilal Ahmad On BEST ANSWER

You can use margin-left property.

use this css for your code and it should work.

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
    margin-left:30px
}

and form goes like this

<body>
<label>Name:</label> <input type="text" name="name" value="<?php echo $name;?>">
<label>E-mail:</label>     
<input type="text" name="email" value="<?php echo $email;?>">
<label> Website:</label>  <input type="text" name="website" value="<?php echo $website;?>">
<label>

</body>
</html>

http://jsfiddle.net/qAhQf/213/

0
santho On
   <label for="dummy1">title for dummy1:</label>
   <input id="dummy1" name="dummy1" value="dummy1">
   <label for="dummy2">longer title for dummy2:</label>
   <input id="dummy2" name="dummy2" value="dummy2">
   <label for="dummy3">even longer title for dummy3:</label>
   <input id="dummy3" name="dummy3" value="dummy3">

css:

label {
    width:250px;
    clear:left;
    text-align:right;
    padding-right:50px;
}

input, label {
    float:left;
} 

Is it what you want?

2
afzalex On

Use table to get as you want. Then you can give width for whole column by providing width to first cell of table.

<body>
    <table>
        <tr>
            <td width=100><lable>Name:</label> </td>
            <td><input type="text" name="name" value="<?php echo $name;?>"></td>
        </tr>
        <tr>
            <td><lable>E-mail:</label></td>
            <td><input type="text" name="email" value="<?php echo $email;?>"></td>
        </tr>
        <tr>
            <td><lable>Website:</label></td>
            <td><input type="text" name="website" value="<?php echo $website;?>"></td>
        <tr>
            <td><label>Hello Gender:<label></td>
            <td>
                <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
                <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
            </td>
        </tr>
    </table>
</body>