CODEWITHSUNDEEP
html
mrghost1988
mrghost1988

Reputation: 87

html field alignment

Good afternoon,

I am new to html. I have added html form fields into my application. The textfields are not aligned and they look really untidy. This is because i have field names like 'first tag' and 'second tag' which have a text field beside it. The text field for second tag appears more towards the left compared to the first. Is there a way i can align them without using a table? if i use a table, may i know how should i do it? i am sorry i cant upload any photos since i am a new user.

below is my html code.

Thank you for any help!

Cheers, ZhengHong

<div class="rightsettings">
        <form name="addsubject" action="html_form_action.asp" method="get">
        <br>Subject: <input type="text" name="user" /></br>
        <br>Number of tags<select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()">
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
            <option value=4>4</option>
            <option value=5>5</option>
        </select></br>
        <div id="addfirsttag">
        <br>First Tag: <input type="text" name="tag1"/></br>
        <div id = "addsecondtag" style="visibility:hidden">
        <br>Second Tag: <input type="text" name="tag2"/></br>
        </div>
        <div id = "addthirdtag" style="visibility:hidden">
        <br>Third Tag: <input type="text" name="tag3"/></br>
        </div>
        <div id = "addfourthtag" style="visibility:hidden">
        <br>Fourth Tag: <input type="text" name="tag4"/></br>
        </div>
        <div id = "addfifthtag" style="visibility:hidden">
        <br>Fifth Tag: <input type="text" name="tag5"/></br>
        </div>
        <br><input type="submit" value="Submit" /></br>
        </form>
    </div>

Upvotes: 0

Views: 235

Answers (3)

user1423506
user1423506

Reputation:

try this one

   <table>
    <tr style="visibility:hidden"><td>First tag :><td><input type="text" name="tag1"/></td></tr>
    <tr style="visibility:hidden"><td>Second tag :><td><input type="text" name="tag2"/></td></tr>
    <tr style="visibility:hidden"><td>Third tag :><td><input type="text" name="tag3"/> </td></tr>
   <tr><td colspan="2" align="center"><input type="submit"></td></tr>
    </table>

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

I recommend you to insert your forms into tables.

<div class="rightsettings">
    <form name="addsubject" action="html_form_action.asp" method="get">
        <table cellpadding="1" cellspacing="1" border="0">
            <tr><td>Subject:</td><td><input type="text" name="user" /></td></tr>
            <tr><td>Number of tags::</td><td><select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()"> 
                <option value=1>1</option> 
                <option value=2>2</option> 
                <option value=3>3</option> 
                <option value=4>4</option> 
                <option value=5>5</option> 
            </select></td></tr>

            <tr><td>First Tag:</td><td><div id="addfirsttag"><input type="text" name="tag1"/></div></td></tr>
             <!-- all your tags like the one above -->
            <tr><td colspan="2" align="center"><input type="submit" value="Submit" /></td></tr>
        </table>
    </form> 
</div>

Upvotes: 1

Phebus40
Phebus40

Reputation: 173

with a table

<table>
<tr><td>First Tag</td><td><input ... /></td></tr>
<tr><td>Second Tage</td><td><input ... /></td></tr>
...
</table>

with css

css part : 

label
{
    display: block;
    width: 150px;
    float: left;
}

html part :

<label for="tag1">First Tag:</label><input ... /><br />
<label for="tag2">Second Tag:</label><input ... /><br />

Upvotes: 0

Related Questions