7    HTML Forms and Interactive Elements

Nowadays, hardly any major web presence can do without forms (also referred to as HTML forms or web forms), in which visitors can fill out input fields or select something from a list of specific entries, such as a survey form.

Common usage scenarios for HTML forms include contact forms, surveys, signing up for a website or newsletter, guest books, order forms, search functions, adding and uploading data, and more. For such interactions, HTML provides you with various input fields such as text input fields, dropdown lists, radio buttons, and simple buttons.

In this chapter, you’ll learn the following:

• How to define and structure forms

• Which input fields are available to you in HTML

• Which HTML attributes exist for input fields and how you can use them meaningfully

• How to send data entered in an HTML form from the web browser to the web server and process it with a PHP script

• Which interactive HTML elements are available

Table 7.1     Quick Overview of the Elements Covered Here for HTML Forms

Table 7.2     Quick Overview of the Interactive Elements Covered Here

7.1    Defining a Space for Forms

You mark an area for an HTML form with the opening <form> and closing </form>. Everything you write in between the two tags will be part of the form. In practice, various HTML input fields, such as text input fields, selection lists, radio buttons, and labels can be used here.

<form action="/php/feedback.php" method="post">
    <!--Form elements for the feedback-->
</form> 

Here you see two typical attributes—action and method—which are used quite often with HTML forms. The meaning of the individual attributes is as follows:

• action
  Specify the URL that will be called upon submitting the form and to which the entered data should be transferred. This is often a PHP script that processes the transmitted data.

• method
  Specify the HTTP request method for how the data should be transmitted to the server for processing. The default setting is method="get", which causes the web browser to append the data as a parameter to the end of the URL. You certainly know this kind of URL, for example, http://domain.com/search.php?search=HTML. For larger amounts of data, on the other hand, method="post" is more commonly used, which transfers the data to the body of the HTTP request rather than sending it via the URL. I’ll cover the topic of processing forms separately in Section 7.6.2 and in Section 7.6.3.

You don’t necessarily need to use the two attributes action and method in the <form> tag. The attributes are unnecessary, for example, if you want to process the entered data in the form only with JavaScript, for example, to perform simple calculations. For such purposes, you don’t need a URL to be called or an HTTP request method.

Note that the preceding listed attributes weren’t all the existing attributes for the form element. Other attributes you should know are listed here:

• enctype
  The default value is the multipurpose internet mail extension (MIME type "application/x-www-form-urlencoded", which means that characters that have a special meaning in a URL are masked with a percentage coding (or URL encoding). For example, a space can be passed as the string %20. If you want to upload files, you should use the value "multipart/form-data". Likewise, the value could be just "text/plain" for enctype, which would allow you to send the form data to an email address right away with action="mailto:1@woafu.com", but that doesn’t work very reliably and isn’t recommended in practice.

• accept-charset
  Here you specify which character encoding you want to use to send the data to the web server. With "utf-8", you can enforce UTF-8 as character encoding, for example.

• target
  Here you can specify the target window in which the web server should output its response. You can use the known values "_blank", "_self", "_parent", "_top", or just the name of a window you created with JavaScript. You already know the meaning of these values from the HTML element <a> in Chapter 5, Section 5.2.