Setting up the form

To get your form started, you wrap everything inside the <form> tag:

<form>

</form>

In this book, you create forms that either update the page locally or submit data to the server via Ajax. All that front-end interaction is controlled by JavaScript and jQuery code, so you don’t need any special attributes in the <form> tag.

However, I'd be remiss if I didn’t mention the version of the <form> tag you need to use if you want your form data submitted directly to a script on the server:

<form action="script" method="method">

• script: The URL of the server script you want to use to process the form data.
• method: The method you want to use to send the data: get or post. (I talk about the difference between these two methods in Book 6, Chapter 1.)

Here's an example:

<form

action="http://mcfedries.com/webcodingfordummies/php/get-supplier-contacts.php"

method="post">

If you’re just using the form to add local interaction to the web page and you won’t be submitting any form data to the server, then technically you don’t need the <form> tag at all. However, you should use one anyway most of the time because including the <form> tag enables the user to submit the form by pressing Enter or Return, and it also gets you a submit button (such as Go) in mobile browsers.

Adding a form button

Most forms include a button that the user clicks when he's completed the form and wants to initiate the form’s underlying action. This is known as submitting the form, and that term has traditionally meant sending the form data to a server-side script for processing. These days, however, and certainly in this book, “submitting” the form can also mean:

• Updating something on the web page without sending anything to the server. For example, clicking a button might set the page’s background color.
• Running a function that gathers the form data and uses an Ajax call to send the data to the server and process what the server sends back. For example, if the form asks for the person’s username and password, clicking the form button would launch the login process.

The old style of submitting a form is to use an <input> where the type attribute is set to submit:

<input type="submit" value="buttonText">

• buttonText: The text that appears on the button face

For example:

<input type="submit" value="Submit Me!">

This style is rarely used in modern web development because it's a bit tricky to style such a button. For that reason, most web developers use the <button> tag, instead:

<button type="submit">buttonText</button>

• buttonText: The text that appears on the button face

For example:

<button type="submit">Ship It</button>

For better-looking buttons, use CSS to style the following:

• Rounded corners: To control the roundness of the button corners, use the border-radius property set to either a measurement (in, say, pixels) or a percentage. For example:

  button {

  border-radius: 15px;

  }

• Drop shadow: To add a drop shadow to a button, apply the box-shadow x y blur color property, where x is the horizontal offset of the shadow, y is the vertical offset of the shadow, blur is amount the shadow is blurred, and color is the shadow color. For example:

  button {

  box-shadow: 3px 3px 5px gray;

  }

Working with text fields

Text-based fields are the most commonly used form elements, and most of them use the <input> tag:

<input type="textType" name="textName" value="textValue" placeholder="textPrompt">

• textType: The kind of text field you want to use in your form.
• textName: The name you assign to the field. If you'll be submitting the form data via Ajax, you must include a name value for each field.
• textValue: The initial value of the field, if any.
• textPrompt: Text that appears temporarily in the field when the page first loads and is used to prompt the user about the required input. The placeholder text disappears as soon as the user starts typing in the field.

Here's a list of the available text-based types you can use for the type attribute:

• text: Displays a text box into which the user types a line of text. Add the size attribute to specify the width of the field, in characters (the default is 20). Here's an example:

  <input type="text" name="company" size="50">

• number: Displays a text box into which the user types a numeric value. Most browsers add a spin box that enables the user to increment or decrement the number by clicking the up or down arrow, respectively. Check out this example:

  <input type="number" name="points" value="100">

  I should also mention the range type, which displays a slider control that enables the user to click and drag to choose a numeric value between a specified minimum and maximum:

  <input type="range" name="transparency" min="0" max="100" value="100">

• email: Displays a text box into which the user types an email address. Add the multiple attribute to allow the user to type two or more addresses, separated by commas. Add the size attribute to specify the width of the field, in characters. An example for you:

  <input type="email" name="user-email" placeholder="[email protected]">

• url: Displays a text box into which the user types a URL. Add the size attribute to specify the width of the field, in characters. Here's a for instance:

  <input type="url" name="homepage" placeholder="e.g., http://domain.com/">

• tel: Displays a text box into which the user types a telephone number. Use the size attribute to specify the width of the field, in characters. Here's an example:

  <input type="tel" name="mobile" placeholder="(xxx)xxx-xxxx">

• time: Displays a text box into which the user types a time, usually hours and minutes. For example:

  <input type="time" name="start-time">

• password: Displays a text box into which the user types a password. The typed characters appear as dots (•). Add the autocomplete attribute to specify whether the user's browser or password management software can automatically enter the password. Set the attribute to current-password to allow password autocompletion, or to off to disallow autocompletion. Need an example? Done:

  <input type="password" name="userpassword" autocomplete="current-password">

• search: Displays a text box into which the user types a search term. Add the size attribute to specify the width of the field, in characters. Why, yes, I do have an example:

  <input type="search" name="q" placeholder="Type a search term">

• hidden: Adds an input field to the form, but doesn't display the field to the user. That sounds weird, I know, but it’s a handy way to store a value that you want to include in the submit, but you don’t want the user to see or modify. Here’s an example:

  <input id="userSession" name="user-session" type="hidden" value="jwr274">

Some older browsers don’t get special text fields such as email and time, but you can still use them in your pages because those clueless browsers will ignore the type attribute and just display a standard text field.

That was a lot of text-related fields, but we're not done yet! There are two others you need to know about:

• <textarea>: This tag displays a text box into which the user can type multiple lines .of text. Add the rows attribute to specify how many lines of text are displayed. If you want default text to appear in the text box, add the text between the <textarea> and </textarea> tags. Here's an example:

  <textarea name="message" rows="5">

  Default text goes here.

  </textarea>

• <label>: Associates a label with a form field. There are two ways to use a label:

  Method #1 — Surround the form field with <label> and </label> tags, and insert the label text before or after the field, like so:

  <label>

  Email:

  <input type="email" name="user-email" placeholder="[email protected]">

  </label>

  Method #2 — Add an id value to the field tag, set the <label> tag's for attribute to the same value, and insert the label text between the <label> and </label> tags, as I've done here:

  <label for="useremail">Email:</label>

  <input id="useremail" type="email" name="user-email" placeholder="[email protected]">

Figure 2-2 demonstrates each of these text fields.

Coding checkboxes

You use a checkbox in a web form to toggle a setting on (that is, the checkbox is selected) and off (the checkbox is deselected). You create a checkbox by including in your form the following version of the <input> tag:

<input type="checkbox" name="checkName" value="checkValue" [checked]>

• checkName: The name you want to assign to the checkbox. If you'll be submitting the form data via Ajax, you must include both a name and a value for the checkbox.
• checkValue: The value you want to assign to the checkbox. Note that this is a hidden value sent to the server when the form is submitted; the user never sees it.
• checked: When this optional attribute is present, the checkbox is initially selected.

Here's an example:

<fieldset>

<legend>

What's your phobia? (Please check all that apply):

</legend>

<div>

<label>

<input type="checkbox" name="phobia" value="Ants">Myrmecophobia (Fear of ants)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Bald">Peladophobia (Fear of becoming bald)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Beards" checked>Pogonophobia (Fear of beards)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Bed">Clinophobia (Fear of going to bed)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Chins" checked>Geniophobia (Fear of chins)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Flowers">Anthophobia (Fear of flowers)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Flying">Aviatophobia (Fear of flying)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Purple">Porphyrophobia (Fear of purple)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Teeth" checked>Odontophobia (Fear of teeth)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Thinking">Phronemophobia (Fear of thinking)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Vegetables">Lachanophobia (Fear of vegetables)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Fear" checked>Phobophobia (Fear of fear)

</label>

</div>

<div>

<label>

<input type="checkbox" name="phobia" value="Everything">Pantophobia (Fear of everything)

</label>

</div>

</fieldset>

Some notes about this code:

• You use the <fieldset> tag to group a collection of form fields together.
• You use the <legend> tag to create a caption for the parent fieldset element. Figure 2-3 shows how this looks in the browser.
• Because the <input> tags are wrapped in their respective <label> tags, it means the user can select or deselect each checkbox by clicking the checkbox itself or by clicking its label.

One strange thing about a checkbox field is that it's only included in the form submission if it’s selected. If the checkbox is deselected, it’s not sent to the server.

Working with radio buttons

If you want to offer your users a collection of related options, only one of which can be selected at a time, then radio buttons are the way to go. Form radio buttons congregate in groups of two or more where only one button in the group can be selected at any time. If the user clicks another button in that group, it becomes selected and the previously selected button becomes deselected.

You create a radio button using the following variation of the <input> tag:

<input type="radio" name="radioGroup" value="radioValue" [checked]>

• radioGroup: The name you want to assign to the group of radio buttons. All the radio buttons that use the same name value belong to that group.
• radioValue: The value you want to assign to the radio button. If this radio button is selected when the form is submitted, then this is the value sent to the server.
• checked: When this optional attribute is present, the radio button is initially selected.

Here's an example, and Figure 2-4 shows what happens:

<fieldset>

<legend>

Select a delivery method

</legend>

<div>

<input type="radio" id="carrier-pigeon" name="delivery" value="pigeon" checked>

<label for="carrier-pigeon">Carrier pigeon</label>

</div>

<div>

<input type="radio" id="pony-express" name="delivery" value="pony">

<label for="pony-express">Pony express</label>

</div>

<div>

<input type="radio" id="snail-mail" name="delivery" value="postal">

<label for="snail-mail">Snail mail</label>

</div>

<div>

<input type="radio" id="some-punk" name="delivery" value="bikecourier">

<label for="some-punk">Some punk on a bike</label>

</div>

</fieldset>

Adding selection lists

Selection lists are common sights in HTML forms because they enable the web developer to display a relatively large number of choices in a compact control that most users know how to operate. When deciding between a checkbox, radio button group, or a selection list, here are some rough guidelines to follow:

• If an option or setting has only two values that can be represented by on and off, use a checkbox.
• If the option or setting has three or four values, use a group of three or four radio buttons.
• If the option or setting has five or more values, use a selection list.

This section shows you how to create and program selection lists. As you work through this part, it’ll help to remember that a selection list is really an amalgam of two types of fields: the list container and the options within that container. The former is a select element and the latter is a collection of option elements.

To create the list container, you use the <select> tag:

<select name="selectName" size="selectSize" [multiple]>

• selectName: The name you want to assign to the selection list.
• selectSize: The optional number of rows in the selection list box that are visible. If you omit this value, the browser displays the list as a drop-down box.
• multiple: When this optional attribute is present, the user is allowed to select multiple options in the list.

For each item in the list, you add an <option> tag between the <select> and </select> tags:

<option value="optionValue" [selected]>

• optionValue: The value you want to assign to the list option.
• selected: When this optional attribute is present, the list option is initially selected.

Here are some examples:

<form>

<div>

<label for="hair-color">Select your hair color:</label><br>

<select id="hair-color" name="hair-color">

<option value="black">Black</option>

<option value="blonde">Blonde</option>

<option value="brunette" selected>Brunette</option>

<option value="red">Red</option>

<option value="neon">Something neon</option>

<option value="none">None</option>

</select>

</div>

<div>

<label for="hair-style">Select your hair style:</label><br>

<select id="hair-style" name="hair-style" size="4">

<option value="bouffant">Bouffant</option>

<option value="mohawk">Mohawk</option>

<option value="page-boy">Page Boy</option>

<option value="permed">Permed</option>

<option value="shag">Shag</option>

<option value="straight" selected>Straight</option>

<option value="none">Style? What style?</option>

</select>

</div>

<div>

<label for="hair-products">Hair products used in the last year:</label><br>

<select id="hair-products" name="hair-products" size="5" multiple>

<option value="gel">Gel</option>

<option value="grecian-formula">Grecian Formula</option>

<option value="mousse">Mousse</option>

<option value="peroxide">Peroxide</option>

<option value="shoe-black">Shoe black</option>

</select>

</div>

</form>

There are three lists here (see Figure 2-5):

• hair-color: This list doesn't specify a size, so the browser displays it as a drop-down list.
• hair-style: This list uses a size value of 4, so there are four options visible in the list.
• hair-products: This list uses a size value of 5, so there are five options visible in the list. Also, the multiple attribute is set, so you can select multiple options in the list.

Programming pickers

HTML also offers a number of other <input> tag types that fall under a category I call “pickers,” meaning that in each case the field displays a button that, when clicked, opens a control that enables the user to pick a value. Here's a quick look at the available pickers:

• color: Opens a color picker dialog that enables the user to choose a color. The color picker varies depending on the browser and operating system; Figure 2-6 shows the Microsoft Edge version. Set the value attribute in the #rrggbb format to specify an initial color (the default is black: #000000). Here's an example:

  <input type="color" name="bg-color" value="#ff6347">

• date: Opens a date picker dialog so that the user can choose a date. Figure 2-7 shows the Chrome version. Set the value attribute in the yyyy-mm-dd format to specify an initial date. Note that the date the user sees might use a different format (such as mm/dd/yyyy, as seen in Figure 2-7), but the value returned by the element is always in the yyyy-mm-dd format. Here's an example:

  <input type="date" name="appt-date" value="2018-08-23">

• file: Opens the user’s operating system’s file picker dialog so that the user can select a file. You can add the multiple attribute to enable the user to select more than one file. Here's an example:

  <input type="file" name="user-photo">

• month: Opens a month picker dialog to enable the user to choose a month and year. Set the value attribute in the yyyy-mm format to specify an initial month and year. The value the user sees might be in a different format (such as August 2018), but the value returned by the element is always in the yyyy-mm format. Here's an example:

  <input type="month" name="birthday-month" value="2018-08">

• week: Opens a week picker dialog for the user to select a week and year. To specify an initial year and month, set the value attribute in the yyyy-Wnn format, where nn is the two-digit week number. The value shown to the user might be in another format (such as Week 34, 2018), but the value returned by the element is always in the yyyy-Wnn format. Here's an example:

  <input type="week" name="vacation-week" value="2018-W34">

Setting the focus

One simple feature that can improve the user experience on your form pages is to set the focus on the first form field when your page loads. This saves the user from having to make that annoying click inside the first field.

To get this done, run jQuery's focus() method on the element you want to have the focus at startup:

$(field).focus();

• field: A selector that specifies the form field you want to have the focus

Here's an example that sets the focus on the text field with id equal to user at startup:

HTML:

<form>

<div>

<label for="user">Username:</label>

<input id="user" type="text" name="username">

</div>

<div>

<label for="pwd">Password:</label>

<input id="pwd" type="password" name="password">

</div>

</form>

jQuery:

$(document).ready(function() {

$('#user').focus();

});

Monitoring the focus event

Rather than setting the focus, you might want to monitor when a particular field gets the focus (for example, by the user clicking or tabbing into the field). You can do that by setting up a focus() event handler on the field:

$(field).focus(function() {

Focus code goes here

});

• field: A selector that specifies the form field you want to monitor for the focus event

Here's an example:

$('#user').focus(function() {

console.log('The username field has the focus!');

});

Blurring an element

One of the more annoying browser interface quirks is the focus ring that appears around certain elements — especially buttons — when you click them. This focus ring is not only ugly, but also slightly dangerous because it means the user can “click” the button again just by pressing the spacebar. You can work around this by applying jQuery’s blur() method on the element, which causes it to lose focus:

$(field).blur();

• field: A selector that specifies the form field you no longer want to have the focus

Here's an example that uses a button element’s click event handler to blur the button (in the handler, the expression $(this) refers to the element that was clicked, in this case the button):

HTML:

<button id="reset-products" type="button">

Reset Products

</button>

jQuery:

$('#reset-products').click(function() {

// Deselect everything

$('#hair-products > option:selected').prop('selected', false);

// Blur the button

$(this).blur();

});

Monitoring the blur event

Rather than blurring an element, you might want to run some code when a particular element is blurred (for example, by the user clicking or tabbing out of the field). You can do that by setting up a blur() event handler:

$(field).blur(function() {

Blur code goes here

});

• field: A selector that specifies the form field you want to monitor for the blur event.

Here's an example:

$('#user').blur(function() {

console.log('The username field no longer has the focus!');

});

Listening for element changes

One of the most useful form events is the change event, which fires when the value or state of a field is modified in some way. When this event fires depends on the element type:

• For a textarea element and the various text-related input elements, the change event fires when the element loses the focus.
• For checkboxes, radio buttons, selection lists, and pickers, the change event fires as soon as the user clicks the element to modify the selection or value.

You listen for a field's change events by setting up a change() event handler:

$(field).change(function() {

Change code goes here

});

• field: A selector that specifies the form field you want to monitor for the change event

Here's an example:

HTML:

<div>

<label for="bgcolor">Select a background color</label>

<input id="bgcolor" type="color" name="bg-color" value="#ffffff">

</div>

jQuery:

$('#bgcolor').change(function() {

var bgColor = $(this).val();

$('body').css('background-color', bgColor);

});

The HTML code sets up a color picker. The jQuery code applies the change event handler to the color picker. When the change event fires on the picker, the code stores the new color value in the bgColor variable, then applies that color to the body element's background-color property.

Triggering the submit event

Here's a list of the various ways that the submit event gets triggered:

• When the user clicks a button or input element that resides within a <form> tag and has its type attribute set to submit
• When the user clicks a button element that resides within a <form> tag and has no type attribute
• When the user presses Enter or Return while a form element has the focus, and either a button or input element resides within the <form> tag and has its type attribute set to submit, or a button element resides within the <form> tag and has no type attribute
• When your code runs jQuery's .submit() method:

  $(form).submit();

  • form: A selector that specifies the form you want to submit

Preventing the default form submission

You control the form submission yourself by sending the data to the server with an Ajax call. The submit event doesn't know that, however, and it will try to submit the form data anyway. That’s a no-no, so you need to prevent the default form submission by using the event object’s preventDefault() method:

$('form').submit(function(e) {

e.preventDefault();

});

Preparing the data for submission

Before you can submit your form data, you need to convert it to a format that your server's PHP script can work with. The format depends on the Ajax request method you want to use:

• GET: This format requires a string of name=value pairs, separated by ampersands (&). To convert your form data to this format, use jQuery’s serialize() function:

  $(form).serialize();

  • form: A selector that specifies the form you want to work with
• POST: This format requires an array of key: value pairs, separated by commas (,). To convert your form data to this format, use jQuery's serializeArray() function:

  $(form).serializeArray();

  • form: A selector that specifies the form you want to work with

For example:

var formData = $('form').serialize();

Most commonly, your code stores the result of the serialize() or serializeArray() function in a variable, and that variable gets submitted to the server.

Submitting the form data

Now you're almost ready to submit the data. As an example, here’s some HTML code for a form and div that I’ll use to output the form results:

<form>

<div>

<label for="first">First name:</label>

<input id="first" type="text" name="first-name">

</div>

<div>

<label for="last">Last name:</label>

<input id="last" type="text" name="last-name">

</div>

<div>

<label for="nick">Nickname:</label>

<input id="nick" type="text" name="nickname">

</div>

<button type="submit">Submit</button>

</form>

<div class="output">

</div>

Now here’s the JavaScript/jQuery code that submits the form (using .get() in this case) and processes the result (which just echoes back the form data, as shown in Figure 2-8):

$('form').submit(function(e) {

// Prevent the default form submission

e.preventDefault();

// Convert the data to GET format

var formData = $(this).serialize();

// Submit the data using an Ajax GET request

$.get('php/echo-form-fields-get.php', formData, function(data) {

// Show the data returned by the server

$('.output').html(data);

});

});

We’re missing one very important stop on our road to dynamic web pages: We haven’t validated the form data! Form validation is so important, in fact, that I devote an entire chapter to it: Book 6, Chapter 3. Don’t miss it!