Creating forms

We ended up creating a form which would allow you to insert your first and last name, which when you click the submit button, it will show it in the form of a table on a website that it was linked to.

Initially we figured out how to create a text box, which looked something like this;

<form name=”testForm”>
<input type=”text” name=”textbox1” size=”20” maxLength=”30” value=”type here” />
<input type=”password” name=”passbox1” size=”20” maxLength=”30” value=”” />
</form>

The pieces of information highlighted in red are changeable depending on what you want to be said, and how you want things to be laid out. For example, testForm, textbox1 and passbox1 are given a name merely for organisation, to help keep things in a certain order, it is best to use numbers for each textbox, password or any other device that you include. The value will be what text will be initially displayed for you, to help give an understanding of what you need to do.

We then included Submit and Reset buttons, so that the user could both submit, and ammend what they type into the boxes.

<form name=”testForm” action=”targetURL.html” method=”post”>
<input type=”text” name=”textbox1” size=”20” maxLength=”30” value=”” />
<input type=”reset” value=”clear details” />
<input type=”submit” value=”submit details” />
</form>

Again, those in red are changeable according to what you want to use the buttons for, and what text/sizing you wish to include.

If you wanted to include a checkbox, for maybe a questionairre you are creating, then this would be the code to use;

<form name=”testForm”>
<input type=”checkbox” name=”checkbox1” value=”value1” />
<input type=”checkbox” name=”checkbox2” value=”value2” />
<input type=”checkbox” name=”checkbox3” value=”value3” checked />
</form>

A radio button is probably more preferred, as it uses small circles which can be selected rather than checkboxes.

<form name=”testForm”>
<input type=”radio” name=”radio1” value=”value1” />
<input type=”radio” name=”radio1” value=”value2” />
<input type=”radio” name=”radio1” value=”value3” checked />
</form>

If you were wanting to include alot of text, then a text area/box would be used. This allows text to be placed within a specific area of columns and rows.

<form name=”testForm”>
<textarea cols=”40” rows=”10” name=”area1”>
This will initially appear in the text area</textarea>

Also in questionairres you could use a select list/dropdown menu. This helps to show many possible answers without having them directly shown on the page.

<form name=”testForm”>
<select name=”selectlist1”>
 <option value=”option1”>The first option</option>
 <option value=”option2”>The second option</option>
 <option value=”option3”>The third option</option>
 <option value=”option4”>The fourth option</option>
</select>
</form>
To enable the select list to have multiple options, you simple rename <select name=”selectlist1”>
 to <select name=”selectlist1” size=”3” multiple>