A SIMPLE START TO JQUERY, JAVASCRIPT, AND HTML5 FOR BEGINNERS (2014)

CHAPTER 7: FORMS

In the previous chapters, you have already studied how HTML documents can be created and manipulated. Taking a lead from them, we can now move on to understanding forms, which is one of the most crucial and commonly used units of content in webpage development.

Simply, a form is a way in which data is collected and sent to a location where it can be processed, which is a server in most cases. However, since we are yet to discuss server side scripting, we will focus on sending the data to an email address. However, it is important to note that we do not recommend this practice and it is used only for understanding purposes.

Web Communications

Before moving to the working of forms, it is important to know some basics of HTTP. A typical web communication consists of the following activities:

1. When a user browses a webpage, a request for access to a web server resource is initiated by sending a GET HTTP request.

2. The request is processed by the server and sends a response to the browser using HTTP protocol.

3. The browser process the server response and presents it to the user in the form of a ‘form’.

4. The user enters inputs to the form and upon hitting the submit or enter button, this data is sent to the server, using HTTP protocol again.

5. This data is again processed by the server and the server posts its response to the browser, which is displayed on the webpage.

Web Servers

Originally, web servers were designed to receive and process requests and send the results back to the browser using HTTP. Initially, when the web pages were simple, such web servers were able to process a good number of requests per unit time. There were no states involved as sending and receiving requests were as simple as opening a connection, transferring data and closing the connection.

The new age web servers are much more equipped that these simple web servers. The web servers of today implement what is called the ‘keep alive’ features, which ensures that the connection remains open for a definite period of time in which subsequent requests by the same browser to the server can be entertained.

Web Browsers

The web browser is a desktop application, which displays web pages and manages user interactions between the webpages and the server. The communication between the web servers and pages is established using technologies like AJAX and Asynchronous JavaScript.

How is Data Submitted to the Web Server

An HTML form can be created using the <form> element in the following manner:

Enter Customer Number:

</form>

This form takes in the customer number and returns a page that displays the details of the customer.

However, it is important to note that not all elements can be used for submitting data in a form. The allowed elements for this purpose are:

● <textarea> - It takes a multi-line input

● <button> - It is a clickable button, which can be placed on any content or image.

● <select> - It is a drop-down list, which allows multiple selections. The selected options can be identified using jQuery: $('option:selected')

● <input type=’checkbox’> - It is a checkbox, which has a value attribute used for setting as well as reading the status of the checkbox. The jQuery for identifying checked checkboxes is: $('input[type=checkbox]:checked')

● <input type=’button’> - It is a clickable button, which has a text prompt.

● <input type=’datetime’> - It is a control, which is date and time (UTC).

● <input type=’date’> - It is a control, which is date-only.

● <input type=’email’> - It is a file-select field, which has a browse button for uploading a file.

● <input type=’color’> - It is a color picker.

● <input type=’hidden’> - It is a hidden input field.

● <input type=’datetime-local’> - It is a control, which is date and time (any timezone).

● <input type=’month’> - It is a month-year control.

● <input type=’image’> - It is an image submit button.

● <input type=’password’> - It is a password field, with masked characters.

● <input type=’number’> - It is a numeric field.

● <input type=’range’> - It is a control, which accepts a numeric value and defines the allowed range of values.

● <input type=’radio’> - It is an option button, which has a value attribute for setting and reading the status of the button. The jQuery used for identifying the marked radio buttons is $('input[type=radio]:checked')

● <input type=’search’> - It is a text field, which is used for entering the search string.

● <input type=’reset’> - It is a button that can be used for resetting the fields of a form.

● <input type=’url’> - It is a URL field.

● <input type=’tel’> - It is a telephone number field.

● <input type=’submit’> - It is a submit button.

● <input type=’time’> - It is a control, which accepts a time value.

● <input type=’text’> - It is a single-line text field.

● <input type=’week’> - It is a week-year control.

The <label> Element

It is the element that is used to convey the meaning of an element to the user. The text in this element is displayed inside the textbox, which is auto-removed when the user clicks on it. You can also specify the style of a label.

Specifying Parent Forms

There may be situations where the submission elements of a form may not lie inside the same construct. Therefore, gathering data, in this case, can be quite a challenge. In order to address this issue, HTML5 provides an attribute, id, which can be set for multiple form elements. This shall allow data collection from different form elements in one go.

How to Trigger Form Submission

Upon triggering, all the data collected from the submission elements of the form or forms of the same id is sent to the server using an HTTP method. The <input> element can be used for triggering form submission. Besides this, you can also use JavaScript for this purpose. In order to implement this, you must give an id to the concerned form, myFirstForm. The default.js file, which is linked to the HTML document, must contain the following code:

$(document).ready(function () {

$('#myFirstButton').on('click', submitMyFirstForm);

});

function submitMyFirstForm() {

$('#myFirstForm').submit();

}

If the method attribute of the form is not given any value, then it is set to a default GET. Moreover, the action attribute will also have a default value. Therefore, the button click will reference the page to same page. However, the URL will now include a QueryString, which is a combination of values selection or entered by the user. For instance, if the form requests the user to enter Customer ID and the user enters 1245, then the QueryString will be:

customerID=1245

This QueryString will be appended to the URL in the following manner:

Mywebpage.asp? customerID=1245

It is also important to mention here that the QueryString is URI encoded. Therefore, special characters are represented by specific values. For instance, a space is represented as ‘+’ and exclamation mark (!) as ‘%21’. Name-value pair is represented as ‘name=value’ and name-value pairs are separated by ‘&’.

How to Serialize the Form

You can serialize the form using the jQuery serialize method. This can be done in the following manner:

var myFormData = $('#myFirstForm').serialize();

You can decode the URI-encoded string using the following:

var data = decodeURIComponent(myFormData);

Using Autofocus Attribute

By default, the focus is not set to any element of the form. However, you can set focus using the focus method, which can be implemented in the following manner:

$('input[name="firstName"]').focus();

However, you can also set autofocus in the following manner:

How to Use Data Submission Constraints

A form can send data only if it satisfies the following constraints:

● Name attribute must be set.

● You must have set the value of form submission element.

● The <form> element must have its form submission element defined and form submission elements should not be disabled.

● If multiple submit buttons have in implemented, the values will be submitted only on the click of the activated submit button.

● Select the check boxes

● Select the Option buttons

● The <option> elements must have set <option> elements.

● If there is a file selection field, one of the fields must be selected.

● The declare attribute of the object elements must be set

Always remember that the reset buttons don’t send any data and the form need not have an ID for its data to be sent.

How to Use POST or GET

There are two HTTP methods available for submitting data to the server. These methods are GET and POST. In the former case, the URL is appended with the QueryString. However, in case of the latter, the information is sent within the message body.

Form Validation

It is beneficial to understand that the root of all security issues in web application is user data. The moment you decide to open your application to user data and interactions, you are making your application vulnerable to security threats. Therefore, you need to validate any data that you receive before processing it to prevent any issues from cropping up. Validation can be provided at the browser or server end. However, server side validation is recommended as browser-level validation can be easily manipulated.

The simplest form of validation that you can implement is using the required attribute in the <select> element. You can set this attribute in the following manner:

The validation error generated is browser dependent and each browser has a different method of communication to the user that a field is required for submission.

Besides this, the placeholder attribute is also available, which keep the prompt fixed on the unfilled field until a value for the same is provided by the user. It can be implemented in the following manner:

The addition of time, date and type based inputs in HTML5 makes validation much simpler as they can directly be matched to see if they have valid input values or not. Besides this, email, numbers and ranges can also be easily validated.

HTML5 performs validation and matches it with the :valid or :invalid pseudoclasses. If the validation is successful, the value is matched to :valid, else it is matched to :invalid. However, if a value is not ‘required’, it is matched to :optional pseudoclass.