1. HTML Form Elements
Web forms are a tool that allow users to interact with a webpage by entering in information that that is sent to the server for processing. If you spend any time at all on the internet you will have run into forms used in many different ways, such as signing up for or logging into an email service, sending emails, placing orders, answering questions on a poll, and many others.
HTML forms, after they are filled out and submitted by the user, will be sent to a page on the server that is specified in the opening form tag. That page should contain a script (usually a PHP script, although there are a few other languages that will work) that gathers the information submitted and handle it by printing it on the page, adding it to a database, emailing it to someone, etc.
The basic form element looks like this:
or
<form action="what-to-do-next.php" method="get"> </form>
In the opening form tag, the "action" specifies the page that the user's data is sent to for processing when the form is submitted. The "method" determines how that the data is sent to that page. "Post" sends the data behind the scenes, so the user does not see the information that they sent. "Get" sends the data as a string at the end of the url, which the user can see in their address bar.
These basic form elements are pretty much useless on their own, so let's explore some of the more useful form elements these tags will enclose.
2. HTML Form Fields
The HTML <input> tag is the most commonly used form element. It can create text form fields, password form fields, and hidden form fields, to name just a few. The "type" attribute defines which of these and other options will be used in each case.
HTML Text Form Fields
Text form fields allow a user to type characters in one line, which can vary in length, and can accept an unlimited number of characters unless otherwise specified.
<input type="text" size="25" name="field-identifier" />
</form>
The results is:
The type attribute specifies the type of form field, in this case "text". The size attribute specifies the length of the form field, and the name attribute should assign a unique identity to the field so that the field can be referenced later when the data is processed.
Using the maxlength attribute with a numerical value will specify the maximum number of characters that can be entered into the form field. The value attribute defines characters that will appear in the form field by default, but can be over-written by the visitor.
HTML Password Form Fields
Password form fields are identical to text form fields with one major exception. Any characters entered into a password form field will show up in the browser as asterisks (*) or some kind of dot. While this can keep people from reading a password over the user's shoulder, it will not encrypt the password in any way.
<input type="password" size="25" name="password" />
</form>
The results is:
As you can see, the same attributes can be used, with the exception of the type, which now has a value of "password", and the name, which should be unique.
Hidden HTML Form Fields
Hidden form fields are never visible on a webpage. They are used behind-the-scenes to store data that is not entered by the user, but needs submitted to the server along with the rest of the form data.
The "type" attribute should be set to "hidden" and the name attribute should assign a unique identity to the field so that the field can be referenced later when the data is processed. The "value" attribute should contain the data that is being stored in order to be passed on to the server when the form is submitted.
<input type="hidden" name="hidden-data" value="No One Will Ever See Me On the Webpage!" />
</form>
Now you need a method of submitting the form. Buttons are coming up next!
3. HTML Form Buttons
Buttons are essential to HTML forms, because without them the user has no way of indicating that they have finished filling out the form and want to submit it for processing. There are two main types of form buttons: Submit & Reset The input tag <input> is used to create both submit and reset buttons using a type of either "submit" or button".
The Submit Button
<input type="submit" name="send" value="Send For Processing!" />
</form>
The results is:
Of the three attributes in our example, only two are required. The "type" is self-explanatory and the "value" defines the text that shows up on the button. The name is only needed if you will need to later identify which button was clicked.
The Reset Button
The reset button will return all fields in the form to their default values when it is clicked.
<input type="reset" value="Reset" />
</form>
The results is:
4. HTML Check Boxes & Radio Buttons
Check boxes allow multiple selections at a time and radio buttons allow only a single selection at a time, but both use the <input> tag to create each box or button.
HTML Check Boxes
Checkboxes are intended for choosing "Yes" or "No" in response to a question, or for allowing multiple selections in response to a choice given.
<input type="checkbox" name="favorite1" value="chocolate" /> Chocolate
<input type="checkbox" name="favorite2" value="vanilla" /> Vanilla
<input type="checkbox" name="favorite3" value="mint" /> Mint
</form>
The results is:
ChocolateVanilla
Mint
Because more than one checkbox can be selected at a time, the name of each checkboxes must be unique so that each one can be identified separately. The values should also be unique in order to represent the value of each option.
HTML Radio Buttons
Radio buttons are intended for allowing a single selection among multiple options in response to a single choice given.
<input type="radio" name="joke" value="bed" /> A Bed
<input type="radio" name="joke" value="clock" /> A Clock
<input type="radio" name="joke" value="snake" /> A Snake
</form>
The results is:
What has four legs one head but only one foot?A Bed
A Clock
A Snake
The name of each group of radio buttons needs to be identical so that they can be identified as a group. The value of each radio button must be unique so that the selected value can be identified later.
Tip
If you want a checkbox or radio button to be checked by default, instead of all options being blank, you can add a single word (checked) to the end of the element.
<input type="checkbox" name="tip1" value="1" checked /> Default Option
<input type="checkbox" name="tip2" value="2" /> Other Option
<input type="radio" name="tip3" value="3" checked /> Default Option
<input type="radio" name="tip3" value="4" /> Other Option
</form>
The results is:
Default OptionOther Option
Default Option
Other Option
5. HTML Textareas
Textareas are similar to text form fields, but span several lines instead of just one, and allow paragraphs to be defined.
Textareas are a complete element with an opening tag and a closing tag. If you want text to appear in the textarea by default, that text should be placed between the opening and closing tags.
<textarea></textarea>
<textarea>When is a car not a car? When it turns into a garage!</textarea>
</form>
The results is:
My examples did not include the name attribute. If you plan to collect data from a textarea after a form is submitted, a unique name is necessary.
Two attributes unique to textareas are "rows" and "cols", both of which accept numeric values indicating the size of the textarea. An example is:
<textarea name="user-comment" rows="7" cols="70"></textarea>
</form>
The results is:
6. HTML Dropdown Menus
Dropdown menus, also called select lists, are similar to both radio buttons and checkboxes, in that they allow a single selection at a time or multiple selections at a time from a pre-defined list of options. They can take up less space than multiple radio buttons and check boxes, but not all options are immediately visible.
The <select> and </select> tags are used to create a selection list. Each option inside the menu is defined by the <option> and </option> tags.
What runs but never walks?
<select>
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>
The results is:
What runs but never walks?Menu Attributes
As with other form elements, the name attribute is necessary in order to identify the selection when the form is submitted.
The size attribute allows for more than one option to be initially displayed by adjusting the dropdown menu so that it is shown as a select list.
The multiple attribute can allow multiple selections at a time.
What runs but never walks?
<select name="joke-answer" multiple="yes" size="3">
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>
The results is:
What runs but never walks?Since multiple="yes" in our above example, holding down the shift key while selecting each option will allow more than one option to be selected.
7. HTML Upload Fields
You have probably used file upload fields in the past to upload picture, movies, etc. to the web, and now you get to learn how to create your own file upload fields. The <input> tag is used, with the type set to "file" in order to create this field.
One important thing to remember about using the upload field is that the form method must be set to "post" and not "get" since a file must be sent behind-the-scenes (it cannot be sent in the URL).
Also, when using this field, the encryption type must be specified in the opening form tag: enctype="multipart/form-data".
<input type="file" name="my-file" size="50" maxlength="25" />
<input type="submit" name="upload" value="Upload!" />
</form>
The results is:
You should already be familiar with the "name" attribute, which is used to identify the contents of the field when the form is submitted. The "size" attribute should also be familiar, as it controls the visible size/length of the field on the webpage. "maxlength" controls (limits) the length of the filename that can be uploaded. The name attribute is important, but the other two are optional.
If you want to limit the size of the file that can be uploaded, a hidden form field can be added to the form with a value that is the file size limit that you prefer (measured in kilobytes).
Where the file goes once it is uploaded, and how you can retrieve the file to use it is another story entirely. You can learn more about these details from my PHP tutorial