Website Forms Tutorial

Forms Tutorial

Forms are a method of creating interactive pages where the reader can answer questions and send their response to you. Forms are a very complex topic, and cannot be fully covered in one small period, so this will just be a very basic introduction.

At the start of any form area, you must declare that you are making a form, and give some information to the browser about what to do with it. This is done in the form tag, through the two required parameters, action and method.

To create a form which uses the mailto action:

The action parameter specifies where the results from the form will be sent, and the method parameter specifies how that information will be sent there. At the end of the form, you must close the form tag (</form>).

Inside the Form

Inside of the form, you can specify any kind of HTML codes you wish, but the only ones which will be important for the form are the input types and the submit tags. The name parameter are the headings that appear on the form and help to organize the data within.

The following are different input types:

radio - click the appropriate choice of buttons
checkbox
name - gives a one line box to enter information
hidden - important information that is not visible on the screen

An example of a radio box and a checkbox:

Do you like this example? Yes No
Do you understand so far? Yes No

The coding that created the above radio form:

<input type="radio" value="Yes" name="Do you like this?">Yes
<input type="radio" value="No" name="Do you like this?">No

The coding that created the above checkbox form:

<input type="checkbox" value="Yes" name="Do you understand?">Yes
<input type="checkbox" value="No" name="Do you understand?">No

An example of a name input:

Your Comments:

The coding that created the above textarea input box:

Your Comments: <textarea name="Your Comments" rows="5" cols="20">
</textarea>

The box is 5 rows top to bottom, 20 columns left to right. Note that the textarea must be closed afterwards.

An example of hidden text:

These are necessary to send the form to the correct recipient with an appropriate subject heading for easy identification.

Select - gives you a menu list to choose from. An example:

Your overall impression of this tutorial was:

The coding that created the above menu selection:

<select name="Impression of Tutorial">
<option value="Very Useful">Very Useful</option>
<option value="Somewhat Useful">Somewhat Useful</option>
<option value="Below Expectations">Below Expectations</option>
<option value="You Really Don't Want To Know">
You Really Don't Want To Know
</option>
</select>

Note that the option tag is closed at the end of each choice, and the select tag is closed at the end of all the choices. The value parameter is the text printed in the menu choices.

Submit buttons - are used to send the information off to wherever it is going. The reset button clears any entered data.

The coding that created the above submit and reset buttons:

<input type="submit" value="submit">
<input type="reset" value="reset">