Input forms

You have all seen them and used them and now you are going to create them: registration forms, order forms—in short: forms. What all forms have in common is that the user will enter, or input, some information. Next, that input is validated—for example, to verify that an e-mail address is actually in the correct format—and then it is processed one way or another.

The form will, of course, be written in HTML and CSS. Validation can happen on the client side before it is processed, in JavaScript, and on the server side while it is processed. The processing is, in most cases, done in PHP and the result stored in some kind of database, such as MySQL or MongoDB, or a non-database, such as a flat file, an XML file, or an Excel spreadsheet. For now, let's focus on the creation of the form itself.

Form elements

The elements we will discuss here to be used in forms are : <form>, <label>, <input>, <textarea>, <button>, <select>, and <option>. We will treat <select> separately.

This is an example of a typical portion of HTML describing a form:

<form id="myform" action"processing.php" method="post" class="formclass">
<label for="title">Title</label>
<input type="radio" value="Ms" id="title" "name="title" class="classic">Ms.</input>
<input type="radio" value="Mr" id="title" "name="title" class="classic">Mr</input>
<label for="first">First Name</label>
<input type="text" name="first" id="first" class="classic" />
<label for="last">Last Name </label>
<input type="text" name="last" id="last" class="classic" />
<label for="email">email</label>
<input type="text" name="email" id="email" class="classic" />
<button type="submit">Register</button>
</form>

Form attributes

Notice the action and method attributes for the form tag. They indicate the name of the program that will be used to process the data and the method used to do so. We will explain this in great detail in Chapter 5, PHP.

The label attribute

The label element is a useful tag to label the input elements. The for attribute ties a label tag to an input tag.

Input attributes

The input element is the most versatile element to be used in a form. It is used to let the user give input, either by typing some text or by checking off a checkbox or radio button.

There are several types, specified by the type attribute:

The name attribute

Every input element that is going to be processed once your visitor has done something with it, needs to have a name. That name will end up being used to create a variable name on the server side when the form is processed. Radio button input elements that belong together should be given the same name.

In the case of the checkbox type input, you should not only use the same name for every checkbox input element, you also want to use square brackets behind the name. The result of this is that you will have access to an array of all the checked elements on the processing side, which will become extremely handy.

The value attribute

This one is used to assign default values to input elements or to assign values that were previously used in the form and were since stored in a database, as would be the case in any kind of "This was your choice, would you like to change anything?" situation.

The checked attribute

Use this when a radio button or checkbox needs to be checked by default.

The readonly attribute

If you specify readonly, the visitor will not be able to enter any input.