Forms - part 1

<input type="text" name="email" size=30 value="any@any.com" maxlength=45>

The <input> tag can be used for other things and that is why you must specify "type=text". The "name" attribute, as I mentioned earlier, must always be set. "Size" sets the width of the box and "maxlength" sets the maximum number of characters the visitor can type. If you want a default value then you can use the "value" attribute.

These are the two most common types of input used in forms. To see examples of these then you should check out the comments sections of my sites: http://www.usheen.com/html/comment.html and http://www.usheen.com/friends/comment.ht... apart from the buttons at the end of the forms these are the only two types of input I use in the forms.

If you want your visitor to enter a password you could use the password field. This has the exact same properties and attributes as the input box above but displays an asterisks (*) instead of the character typed. To use one of these just set "type" to "password".

<input type="password" name="pass" size=20 maxlength=10>

I think I'll leave it there for now. I don't want to throw too much at you! You should experiment making your own pretend forms. I'll do my own pretend one here:

<form>
Name: <input type="text" name="name" size=30><br>
Email: <input type="text" name="email" size=30><br>
Subject: <input type="text" name="email" size=30><br>
Comment: <textarea name="comment" rows=4 cols=36></textarea>
</form>

If you try out the above code you will notice that the form looks very messy, as opposed to the forms you will see at my sites. The best way to lay out a form is to use a table. Place the title ("Name:", "Email"...) in one column and the input fields in another:

<form>
<table border=0>
<tr><td width=100>Name: </td><td><input type="text" name="name" size=30></td></tr>
<tr><td width=100>Email: </td><td><input type="text" name="email" size=30></td></tr>
<tr><td width=100>Subject: </td><td><input type="text" name="email" size=30></td></tr>
<tr><td width=100 valign=top>Comment:
</td><td><textarea name="comment" rows=4 cols=36></textarea></td></tr>
</table>
</form>

I hope you will return next month for the second part of this article. Please rate the article below.

Yours,
Oisin

Visit the comments pages, to see good examples:
http://www.usheen.com/friends/comment.htm
http://www.usheen.com/html/comment.html

Go To Page: 1 2