Why is my HTML code showing in my forms text area? - html

Question

I'm trying to create a two column form in HTML using the below code.
<div id="form-wrapper">
<form class="contact_form" action="" method="post" name="contact_form">
<ul>
<div id="form_left">
<li>
<span class="required_field"> * Denotes a required field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe">
</li>
<li>
<label for="telephone">Contact Number:</label>
<input type="tel" name="telephone" placeholder="[phone]">
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email address" placeholder="example#example.com">
</li>
</div>
<div id="form_right">
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" >
</li>
</div>
</ul>
</form>
</div>
(http://jsfiddle.net/qrttZ/)
But for some reason, it is showing the bottom half of my HTML code inside of the text area window.
I can't see any open tags so i'n not sure why this is.

Answer 1

The fact that HTML doesn't need the XHTML self closing short tags, e.g. <input /> means it's very easy for rookies to make this mistake as textarea performs a very similar purpose. It's just that for a very good reason it needs closing.
<textarea name="message" cols="40" rows="6" ></textarea>
...
That done, this
<ul>
<div id="form_left">
<li>
is bad. <li> show follow <ul> there should not be a <div> there.
Also
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe">
Without an id in the input, that for is useless.
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="John Doe">
But if you're going to use a label with no markup between it and the input and if you're not styling it
<label>Name: <input type="text" name="name" placeholder="John Doe"></label>
is less to output