- What is a function?
- Pre-defined functions
- Scope of Variables
- Function Expressions
- Anonymous Functions
- Callback Functions
- What is an object?
- Accessing Object Properties
- Calling an Object’s Methods
- Altering Properties/Methods
Array Properties and Methods
- The length property
- Stack Methods
- Queue Methods
- Reordering Methods
- Manipulation Methods
- Location Methods
- Iterative Methods
- Working with array of objects
- The Document Object Model
- Node Relationships
- Working with the Contents of Elements
- Getting Elements by ID, Tag Name, or Class
- Adding and removing element
Handling Input and Output
Ajax and JSON
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">
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’.
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.
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>