Forms

Forms are a great way to enhance your page. You can have your readers submit data that you request through forms. Forms have the following tags: <form>, <select>, <option>, <input> and <textarea> with various attributes. Let’s take a look at how to use these tags in action.

<form action="formscript.php" method="post">
<p>Title:</p>
<select>
<option value="first option">Mr.</option>
<option value="second option">Mrs.</option>
<option value="third option">Miss</option>
</select>
<p>First Name:<br />
<input type="text" name="firstname" /></p>
<p>Last Name:<br />
<input type="text" name="lastname" /></p>
<p>Method of Travel:<br />
<input type="radio" name="vehicle" value="Automobile" checked="checked" />Automobile<br />
<input type="radio" name="vehicle" value="Motorbike" />Motorbike<br />
<input type="radio" name="vehicle" value="Bicycle" />Bicycle<br />
<input type="radio" name="vehicle" value="Walk" />Walk<br /></p>
<p>Feedback:</p>
<p>
<textarea name="feedback" rows="10" cols="30">
Please give us your feedback here!
</textarea></p>
<p><input type="submit" /></p>
<p><input type="reset" /></p>
</form>

Here’s how it will look:

And there you have it! It looks a little different in the blog than it does in an actual web page, but you get the idea. Now let’s explain a little what we are looking at here. So the <form> tag tells the browser it’s a form we are looking at and surrounds the rest of the form data. The <select> tag is used to make a dropdown list with and the <option> tag, nested within, states what each choice will be. Note the value attribute for the <option> tag describes what position the tag is in, but it does not control that, it’s the order you put it in. So what does value do as an attribute? This attribute is there for use when the input is sent to the server and tells the server what to do with the data, which is a little beyond the scope of this lesson but will be covered more later. The next tag is <input> and is fairly obvious, this is used to input certain data. There are four main types of input method, radial, checkbox, submit and reset. The type attribute states which type it will be. The name and value attributes are used for data processing at the server. The checked attribute when used can equate to “checked” and is used to pre-select a value (like when you sign up for a service and they have the box pre-selected to receive spam from their partners). This can come in handy if you want to have a default value.  The <textarea> tag is pretty self-explanatory and you can customize the sise of the text box with a statement inside like you see above.

Ok backing up to the <form> tag a moment, we see a couple of attributes I didn’t explain yet, action and method. Action states what the name of the document is that you will use to parse the input data into the server and how it will be output. These documents are usually ending in either .php or .asp (the Microsoft version). The method attribute equals either post or get, they both will put the data into a webpage for you. With post your data disappears on refresh, is more secure (for passwords) and is unlimited in how much data you can insert. Get is the opposite, but can be good for if you want people to be able to bookmark their submission results. So for instance our form above after going through our ficticious .php handler could output like so:

“Mr. John Smith, your chosen vehicle is a motorbike. Thanks for your submission!”

Now for additional knowledge purposes, you see how I got the box around my example with the title above? That is created by the <fieldset> tag, which the form tags are nested in. To include the header, this is done with the <legend> tag and this goes just before the initial <form> tag, within the <fieldset> tag like this:

<fieldset>
<legend>Title X</legend>
<form>
Form data
</form>
</legend>

And with that, you can now make forms too. Feel free to try it out and make as wacky a form as you want. See you next time for the full monte in putting it all together.

- Justin

<<–  Back …  Next  –>>