This page contains a number of forms that illustrate the various forms of input controls that you can employ. None of the forms do anything! Clicking on a submit button will simply result in an alert box appearing. These examples exist merely to illustrate input elements and layouts.
This form has three text input fields and a submit button. There really are three input fields, but one is "hidden" (you can see it if you "view source"). As explained in the text, hidden fields can be used to hold state data. One of the examples in the PHP chapter utilizes this mechanism. Another of the input fields is a "password" field. This doesn't give any security! The data that you enter in this field are not displayed (filler characters are shown instead); but the data are transmitted as clear text when you submit the form.
The form is displayed using your browsers default "flow layout".
The form definition is:
<form name="form1" onsubmit="alert('This is just a demo')">
<input type="hidden" name="PreservedStateData" value="Whatever" />
Input field: <input type="text" name="plaintextfield" value="Default value, change me" />
Password field: <input type="password" name="pfield" />
<input type="submit" value="DoIt" />
You will note that it does not have a "method" and an "action" defined; the form data are not going to get sent anywhere.
This is the same form, but when you submit this it will ask the browser to make a "get" style request to "nohost.nodomain2.notopdomain". You should see the data that were entered on your browser's location line (as a query string). Your browser will eventually report a DNS lookup error on the non-existent server.
This is another simple example using input type text and textarea controls. It also contains some tiny amounts of in-line Javascript coding that causes messages to appear in your browser's status bar. Textareas are for bulk text input; you can specify controls on the number of rows and columns that are to be used when laying out the input area. Your browser will display some kind of scrolling text panel for text data entry. Input text fields can have attributes specifying the width used in the browser display (as a character count, "size" attribute) and the maximum number of characters that are to be included in the data sent to a web server.
<form name="form2" onsubmit="alert('This is just a demo')" >
<p>
Your name
<input type=text size="20" maxlength="50" name="customer"
onfocus="{ window.status='Enter your name in this field';}"
onblur="{ window.status='I hope that you remembered to tell us your name';}">
</p>
<p>
Address
<textarea name="address" cols="40" rows="3"
onfocus="{ window.status='Our psychic delivery person is on hols, you MUST tell us your address';}">
A text area starts with any text specified as default.
</textarea>
<input type="submit" value="Do it">
</p>
</form>
Radio buttons and checkboxes allow users to make choices in exclusive (radio button) and non-exclusive (checkbox) sets of options. This form again involves a "get" style submission to a non-existent site, so you can see how the checkbox data are returned.
Flowlayout for checkboxes and radio-buttons usually results in a rather unprofessional appearance for forms.
The form definition is:
<form name="form3" method="get" action="http://nosite.nodomain2.notopdomain/cgi-bin/processme" > File name : <input type="text" size="40" maxlength="40" name="fname" /> Color: red<input type="radio" name="color" value="red" checked /> green<input type="radio" name="color" value="green" /> blue<input type="radio" name="color" value="blue" /> Style: bold<input type="checkbox" name="chkbx" value="1" /> italic<input type="checkbox" name="chkbx" value="2" checked /> caps<input type="checkbox" name="chkbx" value="3" /> strike<input type="checkbox" name="chkbx" value="4" checked /> <input type="submit" value="Do it" /> </form>
As shown in the form definition, it is possible to define initial settings of radio-buttons and checkboxes (you should always set one from a group of radio buttons as "checked").
Selection fields with options can be used as alternatives to checkboxes (multiple selections) or radio-button groups (single selections). Your web designer colleague will advise you on the desired style for a site.
The "option" tags can specify the values that are to be returned; if no values are defined, the string in the option tag is used.
Option selection values can be preset ("selected" instead of "checked"), as was the case for radio-buttons and checkboxes.
The form definition is:
<form name="form4" method="get" action="http://nosite.nodomain2.notopdomain/cgi-bin/processme" > <select name="singleselect" size="1"> <option>X-Small</option> <option>Small</option> <option selected>Medium</option> <option>Large</option> <option>X-Large</option> <option>XX-Large</option> </select> <select name="multiselect" size="3" multiple> <option value="1">Interesting feature A</option> <option value="2">Superb addition B</option> <option value="3">Wonderous option C</option> <option value="4">Unique surprise feature D</option> <option value="5">Special option E</option> <option value="6">Personality plus feature F</option> <option value="7">Useless expensive gimmick G</option> <option value="8">One for the suckers H</option> <input type="submit" value="Do it" /> </select> <input type="submit" value="Do it" /> </form>
You really need to embed your forms within tables if you want a professional look to your pages.
This is a flow layout version of a form:
<form name="form5" onsubmit="alert('This is just a demo')">
Your name <input type="text" name="Name" size="20" >
<br />Your address
<textarea cols="20" rows="2" name="Address"></textarea>
<br />Your age
<select name="age" size="1">
<option value="kid">Less than 14</option>
<option value="teenager">14-19</option>
<option value="prime">20-25</option>
<option value="yfamily">26-36</option>
<option value="homemaker">37-48</option>
<option value="saver">49-65</option>
<option value="retiree">66 or above</option>
</select>
<br />
Male<input type="radio" name="sex" checked value="Male">
Female<input type="radio" name="sex" value="Female">
<br />
<input type="submit" value="Submit details">
</form>
and here is a tabular layout:
<form name="form6" onsubmit="alert('This is just a demo')">
<table align="center" border="2" >
<tr>
<th align="left" width="200">Your name</th>
<td width="200"><input type="text" name="Name" size="20" ></td>
</tr>
<tr>
<th align="left">Your address</th>
<td><textarea cols="20" rows="2" name="Address"></textarea></td>
</tr>
<tr> <th align="left">Your age</th>
<td><select name="age" size="1">
<option value="kid">Less than 14</option>
<option value="teenager">14-19</option>
<option value="prime">20-25</option>
<option value="yfamily">26-36</option>
<option value="homemaker">37-48</option>
<option value="saver">49-65</option>
<option value="retiree">66 or above</option>
</select>
</td>
</tr>
<tr>
<td>Male<input type="radio" name="sex" checked value="Male"></td>
<td>Female<input type="radio" name="sex" value="Female"></td>
</tr>
<tr><td colspan="2" align="center"><input type="submit" value="Submit details"></td></tr>
</table>
</form>
Please supply details so that we can select appropriate items from our great range of products.