The user interface is the way by which data is entered for eventual processing.
Any valid HTML code may be used when crafting a user interface. However, only a few different HTML statements are useful for transferring data.
All data that will be sent to a PHP script must be contained within a <form> tag.
Here is an example of an HTML form:
Text boxes are the simplest of all input types. They consist of a variable length white box that can hold simple alphanumeric data.
The HTML code for creating a text box is as follows:
There are some additional parameters that may be set on this input type.
name="name": a required parameter if you’ll be sending the data to a PHP script. This parameter will identify the data inside the box when you wish to access it from within your script.
size="n": an optional parameter that defines the size of your text box. If you do not define a size, your text box will be of size 20.
maxlength="n": an optional parameter that defines how much data to accept in this particular text box. This parameter supercedes the SIZE parameter. Thus, if the maxlength is 10 and the size is 20, you will still see a box of size 20, but you’ll only be able to type in 10 characters before the browser stops you from entering more.
value="n": an optional parameter that defines the initial value of the text box. This is useful if you’d like to "pre-load" your text box with some information.
Text boxes are useful for getting information such as a username or a quick answer to a question. They fall short when you ask to obtain more than one line of information. Text boxes cannot handle carriage returns.
Password boxes act exactly like text boxes, except that they replace the text that is being typed with a series of asterixes. This is useful for gathering somewhat sensitive information, such as passwords of social security numbers.
The HTML code for implementing a password box is as follows:
The same parameters usable on a text box (NAME, SIZE, MAXLENGTH, VALUE) may be used within a password box.
Password boxes offer protection against nosey neighbors
Text Areas are larger versions of Text Boxes. They allow the user to enter in more information and they can handle carriage returns. Text areas will also automatically incorporate scrolling menu buttons to allow all the entered data to be reviewed before submission.
The HTML code for implementing a text area is as follows:
Type in here
To default your text area to a value, you need only put some plain text between the two TEXTAREA tags. For example:
This will default this particular text area to the value "Type in here".
There are a number of parameters that you may utilize when you're working with text areas:
rows="n": Sets the number of visible rows to n. Users may still scroll down to access additional rows. The default is 4.
name="name": This parameter will identify the data inside the area when you wish to access it from within your script.
cols="n": Sets the number of visible columns to n. Users may still scroll over to access additional columns (unless WRAP is set). The default is 40.
Radio buttons force your users to choose from a number of predefined values rather than allowing them to type in their own information. They also only allow your user to choose one option
The HTML code for creating a radio button is as follows:
There are a number of parameters that are necessary for using a radio button.
name="radiorange": The name for your radio button defines the data group it fits into. For example, you can have three different radio tags on your form that all have the same “radiorange” value. This tells the browser that the radio buttons in question are in the same group, and thus the user is only allows to choose one of these buttons. If the user clicks off another one, the initially clicked button will be cleared.
value="data": The value parameter is very important when using a radio button. It tells the PHP script to use when a button is checked off.
checked="checked": A parameter that defaults a checkbox to the selected state.
Checkboxes work just like radio buttons, except they are not mutually exclusive – you may check one, more than one, all, or none of the boxes.
The HTML code for implementing a checkbox is as follows:
Check me!
The parameters for a checkbox are as follows:
value="value": The value to be sent to the script.
name="name": This parameter will identify the data set in the VALUE parameter when you wish to access it from within your script.
checked="checked": A parameter that defaults the checkbox to its checked state.
Scrolling lists may behave like a radio button or a checkbox depending on the parameters set. Scrolling lists are great since they take up a small amount of space and can hold a large number of options.
The HTML code for implementing a scrolling list is as follows:
choice 1 choice 2 choice 3 choice 4
The parameters for a scrolling list are as follows:
name="name": This parameter will identify the data that your user selects.
multiple="multiple": A standalone parameter that sets whether your user may select more than one answer. If this parameter is set, the scrolling list behaves as a logical checkbox. If it is left off, it behaves as a logical radio button.
There is an additional tag that is necessary to implement a scrolling list. It is the <option> tag. This tag must appear after the <select> tag. It has its own parameters that can be set:
value="value": Sets the value to send back to the server.
selected="selected": Defaults this option as the one that is initially selected.
Putting it all together, a full scrolling list statement will look something like this:
The submit button is an input type that tells the browser to send all the data set in the form to the program set within the <form> tag.
The HTML code for the submit button is as follows:
name="name": This parameter will allow you to check if the form was submitted in your cgi script.
value="message": This parameter will set the text on the face of the button. If you don’t specify a value, the button will be defaulted to "Submit Query".