5 Replies - 50378 Views - Last Post: 26 January 2011 - 11:26 AM

#1 Dean_Grobler  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 390
  • Joined: 15-January 10

Align Textboxes in HTML (simple)

Posted 20 January 2011 - 05:30 AM

Hey!

I hardly work with html and haven't in so long I'm struggling to get this stupid thing right. When you look at the attached pic you'd see what I mean. In my HTML Form the stuff doesn't look neat. I want to align all the textboxes nice in a straight like and also move my 'cancel' button up a bit so that it is in line with the textboxes...

My code:
<!-- the NewContact Screen -->
<html>
<head>
<title>New Contact</title>
</head>

<body>
<h2>Create new Contact</h2>

<form>
Name: 		<input type="text" name="firstname" /><br/>
Surname: 	<input type="text" name="surname" /><br/>
Mobile: 	<input type="text" name="mobile" /><br/>
Home: 		<input type="text" name="home" /><br/>
Work: 		<input type="text" name="work" /><br/>
Email: 		<input type="text" name="email" /><br/>
<br/>
<input type="submit" value="Add Contact" />
<input type="button" value="Cancel" /><br/>
</form>

</body>
</html>



How would I go about doing this?

Sorry here's the pic...

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Align Textboxes in HTML (simple)

#2 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: Align Textboxes in HTML (simple)

Posted 20 January 2011 - 07:19 AM

Hi Dean

Try Using floats...

You could do something like


<!-- the NewContact Screen -->
<html>
<head>
<title>New Contact</title>
<style>
form { width: 400px; }
label { float: left; width: 150px; }
input[type=text] { float: left; width: 250px; }
.clear { clear: both; height: 0; line-height: 0; }
.floatright { float: right; }
</style>

</head>

<body>
<h2>Create new Contact</h2>

<form>
<label for="firstname">Name:</label> 		<input type="text" name="firstname" /><br/>
<label for="surname">Surname:</label> 	<input type="text" name="surname" /><br/>
<label for="mobile">Mobile:</label> 	<input type="text" name="mobile" /><br/>
<label for="home">Home: </label>		<input type="text" name="home" /><br/>
<label for="work">Work: </label>		<input type="text" name="work" /><br/>
<label for="email">Email: </label>		<input type="text" name="email" /><br/>
<br class="clear" />
<br />
<input type="submit" value="Add Contact" />
<input type="button" class="floatright" value="Cancel" /><br class="clear"/>
</form>

</body>
</html>





Cheers,

Tommyflint

This post has been edited by tommyflint: 20 January 2011 - 07:22 AM

Was This Post Helpful? 0
  • +
  • -

#3 Dean_Grobler  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 390
  • Joined: 15-January 10

Re: Align Textboxes in HTML (simple)

Posted 20 January 2011 - 09:17 AM

Whoaw, that code make everything look pretty weird. numbers from 02 - 32 all over the place??
So.. It did not work :butbut:
Was This Post Helpful? 0
  • +
  • -

#4 Janitor  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Re: Align Textboxes in HTML (simple)

Posted 20 January 2011 - 10:28 AM

Though you SHOULD NEVER use TABLES you asked for simple so here you go...CSS example underneath!

<!-- the NewContact Screen -->
<html>
<head>
<title>New Contact</title>
</head>
<body>
<h2>Create new Contact</h2>
<form><br/>
<table width="200">
  <tr>
    <td>Name: </td>
    <td><input type="text" name="firstname" /></td>
  </tr>
  <tr>
    <td>Surname:</td>
    <td><input type="text" name="surname" /></td>
  </tr>
  <tr>
    <td>Mobile:</td>
    <td><input type="text" name="mobile" /></td>
  </tr>
  <tr>
    <td>Home:</td>
    <td><input type="text" name="home" /></td>
  </tr>
  <tr>
    <td>Work:</td>
    <td><input type="text" name="work" /></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><input type="text" name="email" /></td>
  </tr>
  <tr>
    <td><input type="submit" value="Add Contact" /></td>
    <td><input type="button" value="Cancel" /></td>
  </tr>
</table>
<br/>
</form>
</body>
</html>



Or here in css

<!-- the NewContact Screen -->
<html>
<head>
<title>New Contact</title>
<style>
label{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
</style>
</head>
<body>
<h2>Create new Contact</h2>
<form>
<label for="firstname">Name:</label>        <input type="text" name="firstname" /><br/>
<label for="surname">Surname:</label>   <input type="text" name="surname" /><br/>
<label for="mobile">Mobile:</label>     <input type="text" name="mobile" /><br/>
<label for="home">Home: </label>        <input type="text" name="home" /><br/>
<label for="work">Work: </label>        <input type="text" name="work" /><br/>
<label for="email">Email: </label>      <input type="text" name="email" /><br/>
<br class="clear" />
<br />
<input type="submit" value="Add Contact" />
<input type="button" class="floatright" value="Cancel" /><br class="clear"/>
</form>
</body>
</html>



This post has been edited by Janitor: 20 January 2011 - 10:35 AM

Was This Post Helpful? 1
  • +
  • -

#5 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: Align Textboxes in HTML (simple)

Posted 24 January 2011 - 07:59 AM

View PostDean_Grobler, on 20 January 2011 - 04:17 PM, said:

Whoaw, that code make everything look pretty weird. numbers from 02 - 32 all over the place??
So.. It did not work :butbut:



You must of copied something wrong as it works perfectly here on my machine???

Edit: HAHA... I think i know what you did... you just copied it straight from this page without clicking view source so you got all the line numbers too.

This post has been edited by tommyflint: 24 January 2011 - 08:02 AM

Was This Post Helpful? 0
  • +
  • -

#6 jokham  Icon User is offline

  • D.I.C Head

Reputation: 10
  • View blog
  • Posts: 54
  • Joined: 08-May 10

Re: Align Textboxes in HTML (simple)

Posted 26 January 2011 - 11:26 AM

Modifying Janitor's code a little - you can try the following so that the labels start at the same position.
<!-- the NewContact Screen -->
<html>
<head>
<title>New Contact</title>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Create new Contact</h2>
<form>
<label for="firstname">Name:</label>        <input type="text" name="firstname" /><br/>
<label for="surname">Surname:</label>   <input type="text" name="surname" /><br/>
<label for="mobile">Mobile:</label>     <input type="text" name="mobile" /><br/>
<label for="home">Home: </label>        <input type="text" name="home" /><br/>
<label for="work">Work: </label>        <input type="text" name="work" /><br/>
<label for="email">Email: </label>      <input type="text" name="email" /><br/>
<br class="clear" />
<br />
<input type="submit" value="Add Contact" />
<input type="button" value="Cancel" /><br />
</form>
</body>
</html>




This post has been edited by jokham: 26 January 2011 - 11:32 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1