Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Felipe Granja
Felipe Granja
4,824 Points

Form Positioning

Hello, everybody.

I was doing some HTML practice exercises and stumbled upon a problem. I want to replicate what this code generates:

<html>
    <head>
        <title> 
            6.470 HTML Exercise 6 
        </title>
    </head>
<body>

<h3>Form for sending an e-mail</h3>

<form action="" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="" /><br />
E-mail:<br />
<input type="text" name="mail" value="" /><br />
Comment:<br />
<textarea rows=5 cols=15 name="comment" wrap=virtual></textarea>
<br /><br />
<input type="submit" value="Send">

</form>
</body>
</html>

The code I came up with was the following:

<html>
    <head>
        <title>Exercise 06</title>
    </head>

    <body>
        <h3>Form for sending an e-mail</h3>
        <form action="" method="post" enctype="text/plain">
            <label>
                Name:<br>
                <input type="text" name="name"><br>
            </label>
            <label>
                E-mail:<br>
                <input type="text" name="email"><br>
            </label>
            <label>
                Comment:<br>
                <textarea name="comment" cols="15" rows="5"></textarea><br><br>
            </label>
            <input type="submit" name="send" value="Send">
        </form>
    </body>
</html>

The problem is, the submit buttons are not positioned exactly the same. In the code I came up with, it's a little bit higher. I can't find the reason why. Does anybody know why they aren't the same?

Thanks in advance!

3 Answers

Richmond Lauman
Richmond Lauman
28,793 Points

I only noticed a very small difference in the positioning of the submit button when viewing in Chrome (it was actually lower using your code) and saw no difference in Firefox or IE.. I have heard that some browsers display differently when input tags are wrapped in label tags. Perhaps that is causing the minor difference. Of course if you change your code so label tags are wrapping only the text and not input tags, you will need to add id attributes to your input tags and for attributes to your label tags, like so:

 <label for="comment">
                Comment:</label><br>
                <textarea name="comment" id="comment"  cols="15" rows="5"></textarea><br><br>

            <input type="submit" name="send" value="Send">

I have not tried this with your code, but if you do, let me know if it makes a difference.

Felipe Granja
Felipe Granja
4,824 Points
Felipe Granja
Felipe Granja
4,824 Points

Thanks for your answer, Richmond. I did try using the label tag to wrap only the text itself, but the results were the same.

Safari positions the buttons just like Chrome does, so I imagine it's something related to Webkit.

Again, thank you! :)

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

You're welcome :-)