Archives: 2007

Text

The code

HTML

<form action="someScript" method="post"> <fieldset> <label for="name">Name</label> <input type="text" class="text" name="name" value="Your Name"> <label for="email">Email</label> <input type="text" class="text" name="lastname" value="Your Email"> <label for="comment">Comment</label> <textarea name="comment" rows="15" cols="80">Your comment goes here</textarea> <input type="submit" value="Submit"> <input type="reset" value="Clear"> </fieldset> </form>

Textarea

Is used to collect more than one line of text from the user. It comes with several attributes like rows and cols which tells it how big to be. However, I reccomend that you use CSS to size your textareas.

Example

Creative Styling

The code

HTML

<form action="someScript" method="post"> <fieldset> <label for="name">Name</label> <input type="text" class="text" name="name" value="Your Name"> <label for="email">Email</label> <input type="text" class="text" name="lastname" value="Your Email"> <label for="comment">Comment</label> <textarea name="comment" rows="15" cols="80">Your comment goes here</textarea> <input type="submit" value="Submit"> <input type="reset" value="Clear"> </fieldset> </form>

CSS

textarea{ margin:0.5em 0; border:1px solid #9df3fb; padding:5px; background:#FFF url(/2008/assets/docs/pres/session12/form/textarea-bg.png) left top repeat-x; display:block; } textarea:focus{ border-color:#87d1d8; }

Example

More Form Elements