Handling user input and sending back results are basic and necessary functions for any computer program. In this topic, you will find out how JavaScript and HTML can work together to receive and output data.
The primary way to get input from users of web applications is through HTML forms. HTML forms give web developers the ability to create text fields, drop‐down selectors, radio buttons, checkboxes, and buttons. With CSS, you can adjust the look of a form to fit your particular website. JavaScript gives you the ability to enhance the functionality of your form.
The form element
All HTML forms are contained within a form element. The form element is the container that holds the input fields, buttons, checkboxes and labels that make up a user input area. The form element acts much like any container element,such as a div, article, or section. But it also contains some attributes that tell the browser what to do with the user input from the form fields it contains.
The code below shows an HTML form containing two input fields and a submit button.
<html>
<head>
<title>HTML form</title>
</head>
<body>
<form action="subscribe.php" name="newsletterSubscribe" method="post">
<label for="firstName">First Name: </label>
<input type="text" name="firstName" id="firstName" /><br />
<label for="email">Email: </label>
<input type="text" name="email" id="email" /><br />
<input type="submit" value="Subscribe" />
</form>
</body>
</html>
In the preceding example, the form element has three attributes:
- action: Tells the browser what to do with the user input. Often, the action is a server-side script.
- name: Specifies the name that the programmer assigned to this form. The name attribute of the form is useful for accessing the form using the DOM.
- method: Takes a value of either get or post, indicating whether the browser should send the data from the form in the URL or in the HTTP header.
In addition to these three attributes, the form element can also contain several other attributes:
- accept-charset: Indicates the character sets that the server accepts. Unless you’re working with multilingual content (and even then), you can safely leave this attribute out.
- autocomplete: Indicates whether the input elements of the form should use autocomplete in the browser.
- enctype: Indicates the type of content that the form should submit to the server. For forms that are submitting only text data to the server, this should be set to text/html. If your form is submitting a file to the server (such as an uploaded graphic), the enctype should be multipart/form-data. The default value is application/x-www-form-urlencoded.
- novalidate: A Boolean value indicating whether the input from the form should be validated by the browser on submit. If this attribute isn’t specified, forms are validated by default.
- target: Indicates where the response from the server should be displayed after the form is submitted. The default (“_self”) is to open the response in the same browser window where the form was. Another option is to open the response in a new window (“_blank”).
The label element
You can use the label element to associate an input field’s description (label) with the input field. The for attribute of the label element takes the value of the id attribute of the element that the label should be associated with, as shown in this example:
<label for="firstName">First Name: </label>
<input type="text" name="firstName">
Another method for associating a label with a form field is to nest the form field within the label element, as shown in this example:
<label>First Name: <input type="text" name="firstName"></label>
This method has the advantage of not requiring the input field to have an id (which is often just a duplicate of its name attribute).
The input element
The HTML input element is the most fundamental form-related HTML element. Depending on the value of its type attribute, it causes the browser to display (or not display) several types of input fields.Most commonly, the input element’s type is set to “text”, which creates a text input in the browser. The optional value attribute assigns a default value to the element, and the name attribute is the name that is paired with the value to form the name/value pair that can be accessed through the DOM and that is submitted along with the rest of the form values when the form is submitted.
A basic text input field looks like this:
<input type="text" name="streetAddress">
With HTML5, the input element gained a bunch of new possible type attribute values. These new values allow the web developer to more precisely specify the type of value that should be provided in the input. They also allow the web browser to provide controls that are better suited to the type of input that’s required to do input validation and results in better web applications. It may seem odd that this chapter focuses so much on the form capabilities of HTML, rather than jumping right into JavaScript. However, forms are an area where HTML can really reduce the workload of programmers, so it’s vital that JavaScript programmers learn what can be accomplished with forms through HTML.
The input element’s possible values for the type attribute are shown in Table 12-1.
The select element
The HTML select element defines either a drop-down or a multiselect input. The select element contains option elements that are the choices that the user will have in the select control, as shown in Listing 12-2.
Listing 12-2: A Drop-Down Form Control, Created Using the select Element
<select name="favoriteColor"><option value="red">red</option>
<option value="blue">blue</option><option value="green">green<option>
</select>
The form created by the markup in Listing 12-2 is shown in Figure 12-2.
The textarea element
The textarea element defines a multiline text input field:
<textarea name="description" rows="4" cols="30"></textarea>
The button element
The button element defines another way to create a clickable button:
<button name="myButton">Click The Button</button>
The button element can be used in place of input elements with the type attribute set to ‘submit’. Or, you can use button elements anywhere you need a button, but where you don’t want the submit action to happen. If you don’t want the button to submit the form when clicked, you need to add a type attribute to it with the value of ‘button’.
Examples
Create a user registration form consisting of firstname, lastname, age, email and password using text fields.
<html>
<head>
</head>
<body>
<form>
<label>Firstname: </label>
<input type="text" /><br><br>
<label>Lastname: </label>
<input type="text" /><br><br>
<label>Age: </label>
<input type="text" /><br><br>
<label>Email: </label>
<input type="text" /><br><br>
<label>Password: </label>
<input type="text" />
</form>
</body>
</html>
Create a student registration form consisting of fullname, age, gender, courses, email and password using text fields, select box, checkbox, and password fields.
<html>
<head>
</head>
<body>
<form>
<label>Fullname: </label>
<input type="text" /><br><br>
<label>Age: </label>
<input type="text" /><br><br>
<label>Gender: </label>
<select>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select><br><br>
<label>Courses: </label><br>
<input type="checkbox" />HTML<br>
<input type="checkbox" />CSS<br>
<input type="checkbox" />JavaScript<br>
<input type="checkbox" />Node.js<br><br>
<label>Email: </label>
<input type="text" /><br><br>
<label>Password: </label>
<input type="password" />
</form>
</body>
</html>
Create a feedback form consisting of fullname, email and feedback using text fields and textarea fields.
<html>
<head>
</head>
<body>
<form>
<label>Fullname: </label>
<input type="text" /><br><br>
<label>Email: </label>
<input type="text" /><br><br>
<label>Feedback: </label><br>
<textarea rows="5" cols="50"></textarea>
</form>
</body>
</html>
