Filling out information on web pages is often required when shopping online or registering for something. This involves using drop-down menus to select states or radio buttons/checkboxes for choosing options. Forms are used for entering this information and are essential to web application development. This final unit will cover the basics of forms and their properties, including how to create buttons, checkboxes, radio, and text elements and how they are used with HTML, CSS, the Document Object Model, and JavaScript functions, and Events. You will also learn how to style and validate their data since forms must be user-friendly and accurately store received data.
Completing this unit should take you approximately 4 hours.
The <form> HTML element represents a document section containing interactive controls for submitting information. The HTML form element is used inside a <form> tag. There are many form elements that you can use. The following sections cover the <form>, <input>, <label>, and <select> elements. These elements are implemented using the DOM HTMLElement interfaces described in the other unit. Note that this section requires knowledge of HTML and CSS.
We will start this section by looking at how to design a simple web form. Forms must be easy to use and have an organized field layout (first and last name), clear actions (submit your application), and error messages (such as "please provide a username"). The article links to (older pages) examples of form design principles, accessibility, and best practices. Feel free also to browse the most recent articles.
A web page's <form> element is used to create a form on the page, collect user data and send that data to an application for processing. For example, when you shop online, you fill out a form indicating the product and the number of items and then submit it for processing. The DOM HTMLFormElement Interface provides the properties and methods. Forms must have a unique name Forms also must contain a method which says how the data will be sent to the application. Examples show how to use the post and get methods to send user data to an application.
The <input> element is used to create interactive controls for web-based forms to accept data from the user. Various types of input data and control widgets are available, depending on what use you need. The <input> element is one of HTML's most powerful and complex. The DOM HTMLInputElement interface provides the properties and methods for working with the options, layout, and presentation of <input> elements.
An <label> element associates a text label with a form <input> field and is implemented using the DOM HTMLLabelElement interface. The label can tell users what value should be entered in the input field. Having labels helps the accessibility of a form. You can implicitly or explicitly associate a label with a form. When doing it explicitly, you use the for attribute, and implicitly, you nest the <input> directly inside the <label>.
The <select> element gives a menu of options for a user and is implemented by the DOM HTMLSelectElementInterface. You can add the <multiple> attributes to the select element and add multiple options. The examples in this section use HTML, CSS, and JavasScript to customize <select> styles.
When building a form, you want to make sure you are using a basic structure that still covers all you need to cover. Building your forms with dedicated form elements and attributes will help ensure your form is usable and accessible.
Now that you have worked through building a web form, you can test your skills and build a structure that has given parameters. You may try this in the given editor, or if you are using some other editor to work on your forms, feel free to use it to test your knowledge. This exercise does not count toward your grade. It is just for practice!
Creating button and text elements is crucial for building interactive web pages that rely on user input. The articles in this section demonstrate how to create and use both elements and provide an example of using the JavaScript click() event in an interactive webpage.
Input elements of type button are rendered as simple push buttons, which can then be programmed to control functions on a webpage. The element is implemented using the DOM HTMLButtonElement interface. A button can be used for many things, such as sending or receiving data. They make the web page much more functional for the user.
Elements of type text create basic single-line text fields. The Try It example in this section will help you make your first text element. Text elements also have many attributes that can be helpful such as list, maxLength, minLength, size, and a few more. The section also introduces client-side validation of text fields which will be covered in detail later.
This video demonstrates how to handle the click() event on a button to modify the content of an HTML page. It covers creating basic HTML pages, adding event listeners, and showcasing an IDE that may be useful if you want to try something new.
Checkboxes and radio buttons provide an interactive way for users to make selections. When you do not want to leave input open-ended, you can require users to choose from pre-selected options that limit their choices. The articles and video in this section show how to use JavaScript with checkboxes and radio button elements.
Radio input elements are typically used in radio groups where only one button can be selected at a time. You can try out the radio button example to see how it works.
Checkboxes default to being checked when they are active. Many web documents have these types of controls. You can change their appearance to make them more rounded and make the labels clear for your users. Checkboxes differ from radio buttons because you can select multiple checkboxes simultaneously.
This video builds some checkboxes that will store car information. It also uses the getElementsByName() method to check different values of the checkboxes by name. It also shows you how to look at the values of radio buttons.
When designing a web page, you may need to make it custom and use specific styles to make it work correctly and look appealing. The styling of these custom pages may take time and effort. Knowing how to style all different forms is good for making your web page stand out.
The easier widgets to style are <form>, <input> (but not "search"), <label>, <output>, and a few others. By styling these when creating your form, you make the form easier for the user and ensure the data is correct by using form validation in the next section. This has a great example of styling a "postcard" contact form from scratch. Download the starter file and follow along to make your own styled form.
Some elements, like checkboxes, radio buttons, and <input type="search"> are more difficult to style. Some other elements can not be styled thoroughly at all using CSS. Different browsers render checkboxes differently, which classifies them as an advanced style.
Now, you should be able to complete this exercise. You will be styling a basic form. If you have an online tool you prefer to use for this work, you may do so. Otherwise, work in whatever editor is comfortable for you. You should download the starting point for this task before you begin to work on the practice assessment. This exercise does not count toward your grade. It is just for practice!
Autocompletion is a nice feature to implement in web forms using JavaScript. This feature allows for assistance when entering information in form fields. You can use the DOM to populate form elements with data so that users can quickly select items.
The name attribute can reference an element in JavaScript. It specifies the name of an <input> element and can reference form data when a form has been submitted from a webpage. The examples in the section demonstrate how to use JavaScript to set the current value of an attribute.
The HTML The autocomplete attribute lets the developer decide if they want to enable the user to have automated assistance in filling out the form. You can determine where you want the automated responses to come from. They can come from values the user entered previously or pre-configured values the developer has decided upon.
Follow along as you create a text box with autocomplete capabilities to make the form more user-friendly and efficient. The video also covers many concepts from previous units, such as accessing elements using the DOM and working with arrays.
Before submitting data to the server, it is important to ensure that all required form controls are filled out and in the correct format. Client-side validation is an initial check and an important feature of a good user experience. By catching invalid data on the client side, the user can fix it immediately. If the data gets to the server and is rejected, a noticeable delay is caused by a round trip to the server and then back to the client side to tell the user to fix their input.
When you enter data, the browser or server will check that it is in the right format and valid for the application. Validation done in the browser is called client-side form validation; if the server does it, it is called server-side form validation. This section presents built-in client-side form validation. The last example in this section shows you how to validate forms without a built-in API using JavaScript and the DOM.
When users enter data into a form, it is essential to have validation to ensure that the information entered is correct. With proper validation, you can receive lots of usable data. If someone enters invalid data into your form, you must have checks to inform them of their mistakes. This video demonstrates validating a form with name, phone number, and email fields. As you watch the video, consider how form validation can be used in different applications.
This tutorial starts with coding the form and then uses JavaScript to validate the input types and information. It steps you through validating and entering a student ID, email address, and URL. This is a great tutorial to grab the code and work along with the video.
Now that you have worked through this course, we will examine a few case studies. Each of these exercises will have a solution for you to download.
In these final practice exercises, you will use HTML, CSS, DOM, and JavaScript to create forms that can be used with user input on a webpage and then validate the input. Note that these exercises are for practice purposes only. If you need help completing it successfully, download the solution code.
Take this assessment to see how well you understood this unit.