Creating HTML forms

Most Web pages use HTML forms to process data from the user and display results. In this article, we will explain how to create HTML forms that allow you to interact with the user.

Designing a form

- choose controls that are appropriate for the category of data they collect and interaction they provide.
- Label each control clearly so that users understand its function.
- Wherever possible, align the left edges of labels and controls. The structure of a well designed form is similar to that of a newspaper page, is composed of a series of columns in which each visual element is aligned with the element spaced above and below it. You can get this type of structure using HTML tables or label.
- Group related controls and each group separated from other groups through the incorporation of white space in your structure
- The sequence of controls on the form should be similar to the order in which they are handled by the user. Otherwise, the user will be required to spend time navigating from one control to another.

It is important to note that these are only guidelines, not rules. Not being rules, you can opt for their violation, from time to time. To determine whether an alternative design is superior to another, it is useful to ask the opinion of a user. If the user can’t help you, obtain the assistance of another programmer. In the worst case, you strive to put yourself in the role of a user usign the form. Ask the user or her replacement if the form is clear, easy to use and efficient. If so, it's time to move on and create actual HTML form.

Creating an HTML form

If the design is based on opportunism, the process of creating a form from your structure is more direct. First, create the basic HTML design, which will include the controls on the form. Then, embem controls in a structure, in particular, one HTML form must contain a submit button that the user can click to send the form data to the server. As a single HTML page can contain multiple forms, you can repeat several times the intermediate stages of this process. Structured HTML The HTML structure you use to include a form is not any different, in fact, from that used to include a regular HTML pages. For example, here is a structural feature of HTML pages:

Inside the body of an HTML page that contains a form you can use any normal HTML tag. To describe the form itself, use the FORM tag, which has the following form:

<FORM METHOD="metod" ACTION="url">

The atribute FORM METHOD of the label may take one of GET or POST values. For now, always specify the value POST. ACTION attribute specifies the URL of the PHP script that processes the data gathered through this form. The URL can be a full address (like http://www.my_page.ro/my_form.php) and a partial address, which specifies a location relative to the current page location (like processing_form.php). Between the label <FORM> and its label </FORM>  appropriate place the form controls.

As a beginner, it is best to consistently use the POST method, because the choice between GET and POST methods is quite complicated. As a rule of thumb, many programmers use GET for forms running a search or query, and POST forms that updates a database or file. Two disadvantages of the GET method are those that impose a limit on the amount of data that can be sent to the script processing and transferring data encoded by attaching strings to the URL of the script processing.The data sent by GET method can be viewed by the user. An advantage of the GET method is that users can insert bookmarks in the results of a query or a search using the GET method, but can not perform the same operation or if a search query using POST method.

Incorporate controls

This section describes two basic controls that you use frequently: text box and submit button. A text box allows the user to type information that can then be sent to a PHP script. Text boxes are often used to obtain user data such as name,mailing address or e-mail. To create a text box, type a HTML tag which has the following basic form:

<INPUT TYPE="TEXT" NAME="text">

NAME attribute assigns a name text box so that its content is accessible to script. The name you assign a control must be unique within the form and must comply with certain rules. In other words, the name must begin with a letter and must not contain characters other than letters, figures and underscore characters, in particular, the name must not contain spaces. HTML has no tag </ INPUT> so do not try to combine a tag with such a label <input>. A button allows the user to send the server sending a form content. Each must have an HTML form submit button.To create a submit button, type a label basic HTML is as follows:

<INPUT TYPE="SUBMIT" VALUE="text">

VALUE attribute specifies the text that should appear on the surface of the submit button. The following is an example of a form that includes text boxes that take the name and address of the user's e-mail:

Result:

Notice the <br> labels used to align labels and controls, and the name assigned to the text box type controls. When the user clicks the submit button, data entered by the user are sent to processing_form.php script (in this case is only a demonstration and pressing the button will display this page.)

Working with multiple forms

The body of an HTML page can include several forms. If you do so, remember to insert a tag </form> tag before the next <form> form. 

When the user clicks the submit button, the data contained in the form field that contains the button you click to run are sent to the server. Thus, the server receives a name and address or e-mail or telephone and fax numbers, not the content of all four fields.

Creating custom text boxes

In the previous section we presented the basic syntax for creating a text box.However, HTML provides many additional attributes that allow you to change the appearance and behavior of text boxes. Here's the complete syntax for creating atext box:

<INPUT TYPE="TEXT" NAME="text" SIZE="numar" MAXLENGTH="number" VALUE="text">

TYPE and NAME attributes are mandatory, other attributes are optional. SIZE attribute, which is given as a number of characters, sets the size of the visible textbox, MAXLENGTH attribute specifies the maximum number of characters that the user has permission to the key. MAXLENGTH attribute value may exceed that of the SIZE attribute, in which case the control scrolls to the right content when the user has entered SIZE characters. VALUE attribute is a value that is initially displayed text box.

Create text areas

As a text box, text area allows a user to enter text. However, a text area may allow the user to enter multiple lines of text, while a text box allows the user to enter asingle line. Here is the syntax for creating a text area:

<TEXTAREA NAME="text" ROWS="number" COLS="numar" WRAP="wrap">

NAME and ROWS attributes are mandatory, and WRAP attributes are optional cols. ROWS attribute specifies the number of lines of text visible in text area, because the scroll text area after being filled, the user can enter additional lines.COLS attribute specifies the number of columns of text visible in text area, since the running surface or wrap text after it was filled, the user can enter lines longer. WRAP attribute specifies the manner of wrapping the text inside the text area. WRAP attribute may have the following values:

- off - winding line of text at the end of words is disabled, the user can enter line break character to force the winding lines
- virtual - lines appear wrapped, but line wrapping feature is not sent to the server
- Physical - winding words at the end of the line is activated
- Software - Same as virtual
- hard - Same Physical

A <TEXTAREA> label must be combined with a label </ TEXTAREA>. Any text that appears between the labels will be represented as original content control type text area.

Create Password boxes

If an application requires a user to enter a password, you can create a text box for this purpose. However, when the user enters the password, anyone nearby can view the password, which is leading to a possible security vulnerability. Rather than use a text box for entering confidential information, you should use a password box. To create a password box, use the same syntax as that used to create a text box, except that you specify the PASSWORD (password) instead of the value attribute TEXT TYPE:

<INPUT TYPE="PASSWORD" NAME="text" SIZE="number" MAXLENGTH=" number " VALUE="text">

Attributes of a password-boxes have the same meaning as those of a text box.

Creating checkboxes

For data that can be only be one of two values, such as "on " or "off" control box is ideal. For example, a control box is adequate to allow the user to opt for fas tdelivery of a package. Where the appropriate check box is valid, the package will be delivered more quickly, otherwise, the package will go with the usual means. To create a box, use the following syntax:

<INPUT TYPE="CHECKBOX" NAME="text" CHECKED VALUE="text">

TYPE attribute is required; attributes NAME and VALUE are optional CHECKED. If the attribute appears CHEKED, box will be selected by default, otherwise the box is not selected initially. VALUE attribute specifies the value that is sent to the server if the checkbox is selected, if the attribute is not specified, it will send the value on (activated).

Creating radio buttons

Like checkboxes, radio buttons can have only one of two values. However, radio buttons are organized in groups, and at one time may have activated a radio button within a group, all others must be disabled. (questionnaire are similar to agrid with multiple answers, you need to choose the right one - same thing happens with a group of radio buttons - at a time can be active only one). For example, you can use a set of three radio buttons allow the user to specify the type of gift pack:no packing, with simple or sophisticated packaging. Only one of three radio buttons can be activated, together, the set of radio buttons offer the user a triple option. To create a radio button, the syntax is as follows:

<INPUT TYPE="RADIO" NAME="text" CHECKED VALUE="text">

Note that this is the same syntax used for creating a check box, except that the attribute TYPE has the value instead of the RADIO checkbox. Attributes of a radio button has the same meaning as those of a check box. However, the attribute NAME is mandatory for radio buttons, even if the optional check boxes. All members of a set of check boxes have the same NAME attribute.

Creating selections

A selection menu is a parade, where the user can choose one or more options.For example, a selection of pizza joints can be set so that a user can select any combination of fittings that he wants. To create a selection, use the following syntax:

<SELECT NAME="text" MULTIPLE SIZE="number"> OPTION labels are inserted here</SELECT>

<select> label is used in combination with the </ SELECT>. Between the two labels is introduced a series of OPTION tags. In a SELECT tag only name attribute is mandatory. MULTIPLE attribute indicates that the user can choose several options by holding down the CTRL key and click on it running. In the absence of multiple attribute, the user can select a single option. If the MULTIPLE attribute specified, you must specify a NAME attribute, which assigns a name as the name of the control panel. For example, type selection control that allows the user to choose more than one dessert gaskets. Gasket should be named using the syntax [], no garnish. The behavior of a selection that allows only one option is equivalent to that of a set of radio buttons, but the appearance of a selection is different from that of a set o radio buttons. SIZE attribute specifies the number of visible options. By using abutton or scroll down scroll bars, the user can manipulate the selection to get access to other options and choose between them. As I said, a selection is associated with one or more options. To create an option to be used in a selection, use the following syntax:

<OPTION SELECTED VALUE="text">The option content is inserted here</OPTION>

< OPTION > label is combined with a label </ OPTION>. The text of these labels is known as content option. Content option appears in the SELECT control. Many programmers forget the HTML tag </ OPTION>, in which case the option is extended until the next label <option> or </ SELECT>. Yet it is not recommended for reasons of compatibility between browsers. Both attributes are optional optional label. If you value attribute, its value is sent when the server is associatedselected, otherwise, the content is sent to the server option. SELECTED attribute indicates that the corresponding option is selected first, otherwise, that option isnot selected initially.

Creating hidden fields

Sometimes it is useful to introduce so-called hidden fields. Hidden field valuesare sent to the server with the values of other controls, however, the user has the ability to view or manipulate the hidden field values. Hidden fields are frequently used in a series of forms. For example, user input in the first form of the series may be needed in subsequent forms. Instead of determining the user to enter data into each form, the data can be stored in a hidden field created and initialized first form processing script. Thus, the user is spared the extra work and potential errors are prevented, which could occur if the user did not enter the same data in subsequent forms. The syntax is:

<INPUT TYPE="HIDDEN" NAME="text" VALUE="text">

Only TYPE and NAME attributes are required, however, the control is practically useless without the VALUE attribute, whose value is automatically sent to the server when sending the form.

Sending a file to the server via a form

You can allow the user to choose a file server and then send the file contents by creating a control file type through the following syntax:

<INPUT TYPE="FILE" NAME="nume" ACCEPT="tip_mime" VALUE="text">

TYPE attribute is mandatory, however, generally occurs with the NAME attribute. VALUE attribute specifies a default file name. ACCEPT attribute specifies the format of the file contents. May be indicated several formats, but each format should be separated from its neighbors by a comma. Code format is specified using a MIME (Multipurpose Internet Mail Extensions). The following table describes the formats used most frequently:

Label FORM POST delimitation must have its value attribute METHOD. It also must include the enctype attribute value: multipart / form-data. Here's the syntax you must use:

<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="url">

The server where your page is isn't configured to accept each MIME type. In this case you should talk to the server administrator to be able to upload files to the server.

Example form

I created an example below which contains boxes so far i described (except those with hidden fielda nd load a file server) in order to better understand each function in part:

A textarea field: 

Password field:

Checkboxes fields:

Radio and radiogroup example:

List-meniu example:

Replacing a button with a picture

The appearance of a submit button is dull and ordinary. If the page layout is important, you can use an image instead of a submit button. Such an image is called image button. When a user runs or click on the button image, form data are sent to the server as the user would click on send button. The syntax for creating a button image is:

<INPUT TYPE="IMAGE" SRC="url" NAME="text" ALIGN="center">

SRC and TYPE attributes are mandatory, other attributes are optional. SRC attribute determines the URL of the file containing the image to be displayed. NAME attribute assigns an image button control type name. ALIGN attribute can take any of the values top (top), middle (intermediate) orbottom (below) and specify how to align the buttonimage relative to surrounding text.

Create a reset button

Sometimes it is useful that the user can execute the click of a button to delete all information contained in a form. Such a button is named reset button. The syntax is:

<INPUT TYPE="RESET" VALUE="text">

The only mandatory attribute is TYPE. VALUE attribute specifies optional text which will appearon the surface of the reset button, if the attribute isomitted, the button will write the "Reset ".

Using a data link to provide a script

In addition to a script to send data via a form fields on the form, you can send data using the URL of the script, as specified in the ACTION attribute of FORM tag. To this end the URL attached to the question mark (?) and then include a series of name-value pairs with the following form:

name1=val1&name2=val2&name3=value3

Example includes only three name-value pairs,however, can include any number of pairs also, according to the limits imposed by the user's browser. The resulting URL is called the query string and can not contain spaces. If you want to send a space as part of a query string, instead of sending a space plus sign (+). Here's an example of a query string on the server that requires aspecific page:

http://www.tutorialeonline.net/index.php?name=1&name2=2

If you want to send a script through the URL, special characters such as a question sign, anequal sign or an ampersand, not to createconfusion and to function correctly, a string must be URL encoded. To URL encode a string that contains a query, special characters are replaced with their hexadecimal equivalents preceded by apercent symbol (%). For details, see the document Request for Comments (RFC) 1738, available atadress at www.rfc.net. Some of the most commonspecial characters URL encoded and their equivalents are listed below. For example, a URLencoded string "Happy Birthday!" is %22la%21%22 years.