Getting Started With Forms
In our guide to HTML forms we covered the elements and attributes used to create fields for web forms. In this tutorial, we’re going to apply that knowledge to create a reservation request form for a fictional hotel. We’ll use the elements covered in the forms guide to create the front of the form that would be visible to a website visitor.
Contents
How do Forms Work?
Forms on the web are built by integrating multiple technologies:
- HTML to create the fields users fill in.
- CSS to control the styling and design of the form.
- JavaScript and other programming languages to take some action based on how the visitor interacts with the form.
In this tutorial, we’ll build the customer-facing portion of the form with HTML and use the JavaScript event onclick to cause our form data to display on the same web page. To integrate this form into a website we would need to use PHP or some other server-side programming language to send the reservation request as an email to a customer service representative at our fictional hotel and possibly to automatically modify a database of lodging availability.
If you want to use part or all this form on your website, you can adapt a free script such as the Simple PHP Contact Form or the Ajax Contact Form for this purpose.
What Does a Browser Do with Form Input?
A reservation form would typically be be wrapped in form tags that look like this:
<form method="post" action="reservation_request.php">
<!--All of our form fields will be here.-->
</form>
When the data was submitted with this form the visitor’s browser would first validate that all of the required fields were filled in. Next, it would use the post method to send the data to the file reservation_request.php. In practice, this file would contain instructions to tell the server what to do with the submitted data, such as create a database entry with the data or send it in email format to a specified email address.
For the purposes of this tutorial, we’re not going to send data to the server but will just display it back in the browser.
POST vs. GET Methods
We can use either the post or get method with a form.
- Use the
getmethod to request, or get, data from a resource. - Use the
postmethod to submit data to be processed by a resource.
In our fictional example, since the data would need to be processed by the server, we would use the post method.
Search engines often use the get method to return data from the search engine index. Other examples of appropriate use of the get method include: checking inventory for a specific product or filtering or generating web page contents based on user-submitted values.
There are several additional differences between these two methods that you should be aware of.
When the get method is used the information submitted by the form is appended to the URL identified by the action attribute in name / value pairs. The result is that the form generates a page that includes all of the submitted information in the URL. This page can be bookmarked and revisited at a later time.
For example, using the get method, if we submit the value “blue” to a field with the name “color” using a form with action="example.com/form.php", the name / value pair color=blue will be created, and the results of the form will be visible at the URL: http://example.com/form.php?color=blue. This demonstrates why the get method should never be used with sensitive data.
If more than one value is submitted, each additional name / value pair will follow the previous pair and be separated from it by an ampersand. Using the example from the last paragraph, a string that includes two pairs of names and values might look something like this: http://example.com/form.php?color=blue&size=large.
The post method creates the same name / value pairs for each submitted field. However, the values are not displayed or appended to the URL. Forms submitted using the post method also cannot be bookmarked or revisited.
Use post if you want to submit data to a database or send it in an email. Use the get method if the submitted form data is not highly sensitive and will be used to pull data from a database or server.
Fields Needed for our Contact Form
With our form tags in place, let’s start creating the fields we’ll need visitors to fill out to make a reservation. First we’ll need fields for the name of the person making the reservation. We’ll use basic text inputs for that purpose.
<p>First name (required):<br><input type="text" name="first_name" required></p>
<p>Last name (required):<br><input type="text" name="last_name" required></p>
We’ve made these inputs required and there are several other fields we will also make required. If a visitor doesn’t fill in these required fields the browser will not process the form. To see how this works, click on the submit button below. Until a value is entered into the box the form will not allow the submit button to process the form.
First name (required):
To make it clear which fields are required we’ll add the word “required” in parentheses next to each required field.
Next we’ll create fields for pertinent contact details.
<p>Email, required to recieve email confirmation:<br><input type="email" name="email"></p>
<p>Phone (required):<br><input type="tel" name="phone" required></p>
We also want to capture our visitor’s address. To do so we’ll use simple text inputs for the street or mailing address and the city, but we’ll create a drop-down list of options for the state.
<p>Street Address or P.O. Box (required):<br><input type="text" name="address" required></p>
<p>Apartment, Suite, or No.:<br><input type="text" name="address"></p>
<p>City (required): <input type="text" name="city" required></p>
<p>State: <select name="state" required><option value="AL">AL</option><option value="AK">AK</option>
<option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option>
<option value="CT">CT</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option>
<option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option>
<option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option>
<option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option>
<option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option>
<option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option>
<option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option>
<option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option>
<option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option>
<option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option>
<option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option>
</select>
We also need to know the dates our guests will be arriving and departing. To capture this information we’ll use the date input type. While this format has limited support, it will fallback to a simple text box in unsupported browsers which will do just fine for our purposes.
<p>Date of Arrival (required): <input type="date" name="arrival" required></p>
<p>Date of Departure (required): <input type="date" name="arrival" required></p>
We also need to capture some basic information about the party making the reservation including the number of guests and their preferences and needs. We’ll group some of these similar fields together in a fieldset with an appropriate legend.
<fieldset>
<legend>Party Details</legend>
<p>So that we may select the best room for your stay, please tell us a little about your party.</p>
<p>Number of guests in your party (required): <input type="number" name="party_size" required></p>
<p>Have you stayed with us before?<br>
Yes <input type="radio" name="stayed" value="yes"><br>
No <input type="radio" name="stayed" value="no">
</p>
<p>Amenities you plan to use (select all that apply):<br>
Room service <input type="checkbox" name="room_service" value="yes"><br>
Sofa Bed <input type="checkbox" name="sofa_bed" value="yes"><br>
Swimming Pool <input type="checkbox" name="swimming" value="yes"><br>
Spa <input type="checkbox" name="spa" value="yes"><br>
Fitness Room <input type="checkbox" name="fitness" value="yes"><br>
Wireless Internet <input type="checkbox" name="wifi" value="yes"><br>
</p>
<p>Preferred Bed Arrangment:
<select name="beds">
<option value="one_king">One King Bed</option>
<option value="pne_queen">One Queen Bed</option>
<option value="two_double">Two Double Beds</option>
<option value="two_queen">Two Queen Beds</option>
<option value="two_king">Two King Beds</option>
</select>
</p>
</fieldset>
<p>Special requests<br>
<textarea placeholder="Is there anything else you'd like to let us know about your stay?" rows="6" cols="60" name="comments"></textarea>
</p>
The last thing we’re going to do is create a checkbox and submit button. The checkbox will be used to opt-in to our hotel’s email marketing list.
If this were a life form the submit button would perform the action specified using the method defined in the form attributes. For the purposes of this tutorial, when we implement the form we’ll use an onclick event to display the form input values back in the browser.
<p>Would you like to receive an occasional email with discount coupons and special offers? If so, select the following box to join our email list.
<br><input type="checkbox" name="opt_in" value="yes">
</p>
<input type="submit">
The Complete Form
When we pull all of the code together into a single block, here’s what we have
<form>
<p>First name (required):<br><input type="text" name="first_name" required></p>
<p>Last name (required):<br><input type="text" name="last_name" required></p>
<p>Email, required to recieve email confirmation:<br><input type="email" name="email"></p>
<p>Phone (required):<br><input type="tel" name="phone" required></p>
<p>Street Address or P.O. Box (required):<br><input type="text" name="address" required></p>
<p>Apartment, Suite, or No.:<br><input type="text" name="address_2"></p>
<p>City (required): <input type="text" name="city" required></p>
<p>State: <select name="state" required><option value="AL">AL</option><option value="AK">AK</option>
<option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option>
<option value="CT">CT</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option>
<option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option>
<option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option>
<option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option>
<option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option>
<option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option>
<option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option>
<option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option>
<option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option>
<option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option>
<option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option>
</select>
<p>Date of Arrival (required): <input type="date" name="arrival" required></p>
<p>Date of Departure (required): <input type="date" name="departure" required></p>
<fieldset>
<legend>Party Details</legend>
<p>So that we may select the best room for your stay, please tell us a little about your party.</p>
<p>Number of guests in your party (required): <input type="number" name="party_size" required></p>
<p>Have you stayed with us before?<br>
Yes <input type="radio" name="stayed" value="yes"><br>
No <input type="radio" name="stayed" value="no">
</p>
<p>Amenities you plan to use (select all that apply):<br>
Room service <input type="checkbox" name="room_service"><br>
Sofa Bed <input type="checkbox" name="sofa_bed"><br>
Swimming Pool <input type="checkbox" name="swimming"><br>
Spa <input type="checkbox" name="spa"><br>
Fitness Room <input type="checkbox" name="fitness"><br>
Wireless Internet <input type="checkbox" name="wifi"><br>
</p>
<p>Preferred Bed Arrangment:
<select name="beds">
<option value="one king">One King Bed</option>
<option value="one queen">One Queen Bed</option>
<option value="two double">Two Double Beds</option>
<option value="two queen">Two Queen Beds</option>
<option value="two king">Two King Beds</option>
</select>
</p>
</fieldset>
<p>Special requests<br>
<textarea placeholder="Is there anything else you'd like to let us know about your stay?" rows="6" cols="60" name="comments"></textarea>
</p>
<p>Would you like to receive an occasional email with discount coupons and special offers? If so, select the following box to join our email list.
<br><input type="checkbox" name="opt_in" value="yes">
</p>
<input type="submit">
</form>
Here’s how our form looks before we apply any styling or layout with CSS. Go ahead and enter some information and click submit to see your anwswers displayed back to you in this same window.
Next Steps
Now that we have a form that captures the information we need to process a reservation request the next step is to style the form, create a functional layout, and ensure that our form meets accessibility and usability standards. In our next tutorial, we’ll work on the appearance of our form and create a layout that makes better use of the available space.
To implement this form live on a website we would want to do more than simply display back the submitted content in the same browser window. The simplest way to process this form would be to use PHP to send the submitted form in an email to a customer service representative who would process the request and call or email the customer to confirm reservation details and process payment.
The code needed to email this form to a designated email address is beyond the scope of this tutorial. However, either the Simple PHP Contact Form or the Ajax Contact Form, both developed by Pinceladas Da Web and available for free from Github, could be adapated for this purpose.
