css based form does not work with <textarea name=”…….”….>

[Ron Wolpa]

I´ve read the tutorial written by Cameron Adams (posted @ http://www.sitepoint.com/article/fancy-form-design-css/) in order to attempt to adapt what I´ve learned from it to a form on which there is the element <textarea name=”…….”….>.

C.Adam´s form , which does not include any textarea element , works perfectly. However as I include a textarea the form turns to a mess : the submission and clear buttons are not shown , the message field where the message is supposed to be typed exhibits a </li> ; it happens with IE7 , Firefox but not with Opera that seems normal despite the fact that the clear button is shown exactly like a text field (? …. I am missing the tables time); the text into the <legend> appears above the encircling line ;
I´ve pasted below the codes for anyone who would like to take a look and tell me how to mend this trouble;

Thank you very much.

css :
fieldset {
margin: 1.5em 0 0 0;
padding: 0;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
}
fieldset.submit {
border-style: none;
}

html form code
<form method="POST" action="../php/mailer.php">
<legend>Informações</legend>
<fieldset>
<ol>
<li>
<label for="empresa">Empresa /label>
<input type="text" name="empresa" id="empresa" class="text"/>
</li>
<li>
<label for="estado">Estado /label>
<select name="estado" id="estado" class="text"/>
<option value="value">( Selecione )</option>
<option selected>x</option>
<option>y</option>
</select>
</li>
<li>
<label for="segmento_de_mercado">Segmento /label>
<select name="segmento_de_mercado" id="segmento_de_mercado" class="text">
<option selected>(selecione)</option>
<option>z</option>
<option>n</option>
<option>outro</option>
</select>
</li>
<li>
<label for="nome_do_visitante">Nome :&nbsp;&nbsp;&nbsp;</label>
<input type="text" name="nome_do_visitante" id="nome_do_visitante" class="text" >
</li>
<li>
<label for="cargo">Cargo /label>
<input type="text" name="cargo" id"cargo" class="text">
</li>
<label for="sistemagestao">Sistema de Gestão /label>
<input type="checkbox" name="check[]" value="sistemagestao" >
</li>
<li>
<label for="softwaremanutindustrial">Sistema Manutenção Industrial /label>
<input type="checkbox" name="check[]" value="softwaremanutindustrial" >
</li>
<li>}
<label for="mensagem">Mensagem /label>
<textarea name="mensagem" id="mensagem" class="text" > </li></ol> </fieldset>
<fieldset class="submit>
<input class="submit" type="Submit" value="Enviar"/></fieldset>
</form> <fieldset class="reset">
<input class="reset" type="Submit2" value="Limpar"/>
</fieldset>

[Dan Grossman]

You're missing the </textarea>. All HTML tags must be closed (or self-closing />, but textarea isn't self-closing)

[Ron Wolpa]

I think I need some sleep ........css learning is driving me out of my head ;
it worked fine , but the clear button is still missing ; i am not quite sure whether "clear " button is somewhat useful (?)
Thank you very much for your help

[Stomme poes]

</form> <fieldset class="reset">
<input class="reset" type="Submit2" value="Limpar"/>
</fieldset>

How could the reset (clear) button appear in the form when you've got it outside the form? See, you closed the form and THEN added an extra fieldset (outside the form!) with the input.


I can't belive Sitepoint is encouraging people to write forms as lists. Bah. Might as well write them in tables then too. What's the difference?

i am not quite sure whether "clear " button is somewhat useful (?)

Depends on your form, but I totally think they can be useful:

Why a Reset button on forms?

* To undo all those "helpful" preselects of the most popular options
* To get another quote for a completely different vehicle
* To sign your friends up for the same service
* To make sure that error wasn't from something accidentally selected

Try getting an car insurance quote at ditzo.nl and then with another car. You can't. You're stuck with the original settings. Nasty.
Although another way around it is to have the back end, which is running that script you're calling in the action="blah.php", clear that form when it refreshes the page. That way, people can re-fill in the form with new values, and the reset button isn't needed.

What you DON'T want is a reset that looks like or is placed where "Submit" normally sits. How many times have I filled in a really long form, then hit the first button that looks like a submit, only to find that I've lost everything I filled in? Lawlz.

[Ron Wolpa]

What you DON'T want is a reset that looks like or is placed where "Submit" normally sits. How many times have I filled in a really long form, then hit the first button that looks like a submit, only to find that I've lost everything I filled in? Lawlz.

Much to my chagrin it has happened many times with me ;
thank you for posting an answer