Become an Expert at Creating Forms in HTML
4.5 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
280 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Become an Expert at Creating Forms in HTML to your Wishlist.

Add to Wishlist

Become an Expert at Creating Forms in HTML

Learn how to code HTML forms from basic to advanced, including HTML5, validation, layout, security and accessibility.
4.5 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
280 students enrolled
Created by Dave Hollingworth
Last updated 11/2015
English
Price: $20
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • By the end of the course, you'll be able to create any type of form in HTML that you need.
  • You'll learn the basics of how forms work, their controls and how the user interacts with them.
  • You'll learn all about the new form controls in HTML5, and how to support this new functionality in older browsers.
  • You'll learn how to validate forms, first using HTML5 validation, then advanced validation techniques using JavaScript.
  • You'll learn some advanced techniques for dealing with forms, including security, usability and accessibility.
View Curriculum
Requirements
  • Basic knowledge of HTML and JavaScript is an advantage.
  • The little server-side code that there is is written in PHP, so basic knowledge of this is an advantage, but not necessary as the code is clearly written and commented.
Description

In this comprehensive course you'll learn all there is to know about how to create and use forms in HTML.

  • Learn why we use forms, how they work and how to create them.
  • Learn what's new in HTML5 for forms - new controls, validation, and how to use polyfills so we can use these features in browsers that don't support them.
  • Learn how to validate form inputs, both in HTML5 and advanced validation techniques using JavaScript.
  • Discover topics such as usability, layout and accessibility along with ways to make your forms more secure.

In every lecture where code is used (almost all of them!), full source code is available as a download attached to the lecture. You're encouraged to download this code, experiment with it and use it in your own projects.

At the end of this course you'll be an expert in HTML forms!

Who is the target audience?
  • People developing web pages that need to get data from their visitors using forms.
  • Developers who want to know how to develop basic to complex forms in HTML.
  • Developers who want to learn how to use all the new form functionality in HTML5.
  • Developers who want to learn how to do form validation in both HTML5 and JavaScript.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 46 Lectures Collapse All 46 Lectures 03:09:50
+
Introduction
1 Lecture 02:28
+
Forms in HTML - the basics
11 Lectures 49:59

In this lecture we learn exactly what an HTML form is, and how it is used to get data from a user of our website to our server. All the source code for the example used is attached.

NB: in this and subsequent lectures, server-side code is written in PHP, but only serves to display what is sent to the server, and is not essential to understand the content of the lecture.

Preview 01:40

In this lecture we learn about how to specify the server script that the form sends its data to with the action attribute. We'll also find out about the GET and POST methods that can be used to send the data, the difference between them and when to use which one. All the source code for the examples used is attached.

Preview 05:04

In this session we'll get introduced to basic input types in HTML forms: the input tag and its various types. We'll look at examples of text, password, radio, checkbox, hidden, file, submit and reset controls. All the source code for the examples shown is attached.

Basic form controls: input types
08:12

In this session we'll get look at some additional input types in HTML forms: textareas, select menus and their various options, and buttons. We'll also take a look at an example of multiple controls in one form. All the source code for the examples shown is attached.

Basic form controls: additional tags
04:47

In this session we'll get look at labels and fieldsets. We'll see why labels are important, particularly for radio and checkbox controls. For fieldsets we'll look at why we use them, and for both tags how they are useful for accessibility of our form. All the source code for the examples shown is attached.

Labels and fieldsets
04:56

In this session we're going to learn how to pre-populate controls with data: text in text controls, selecting radio buttons and checkboxes, and selecting items in a select menu. All the source code for the examples shown is attached.

Pre-populating the controls
04:56

In this session we'll learn why escaping values in forms is so important, with an example of what can happen if values aren't escaped, and how to fix the problem. All the source code for the examples shown is attached.

Escaping values
04:50

In this session we'll see what options are available for multiple forms on the same page. We'll also look at a technique for having multiple forms but with the same script on the server. All the source code for the examples shown is attached.

Multiple forms
02:04

In this session we'll learn how to have a form with multiple submit buttons, and how to detect which button was pressed on the server. We'll look at the traditional way of doing this, and also learn about how it can be done in HTML5 with the new formaction and formmethod attributes. All the source code for the examples shown is attached.

Multiple submit buttons
04:07

In this session we're going to learn how to create read-only and disabled controls, their characteristics and how they look and behave in the browser. All the source code for the examples shown is attached.

Read-only and disabled controls
05:00

In this session we'll look at the topic of form layout and styling in your website. We'll see a demonstration of how forms look by default with no styling, then we'll look at some CSS libraries that allow us to style our forms in simple way that is consistent cross-browser. All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

Layout and styling
04:23

Test your knowledge of forms and their input controls in HTML.

Forms in HTML
10 questions
+
New form controls in HTML5
8 Lectures 23:25

In this session we'll introduce the new input types that are available in HTML5. We'll learn all about support for legacy browsers with polyfills and how to know if we can use these new features now or not.

Notes containing all the links to websites mentioned in the video are attached to this lecture.

Preview 03:19

In this session we're going to learn how to use the HTML5 number input control. We'll also see a demonstration of what happens when a browser doesn't support a new HTML5 feature, and how to use a polyfill to recreate the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

Preview 03:54

In this session we're going to learn how to use the HTML5 search input control. We'll also see how this control affects mobile devices such as smartphones.

All the source code for the examples shown is attached.

search input
01:27

In this session we're going to learn how to use the HTML5 color input control. We'll look at a polyfill we can use to support the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

color input
03:23

In this session we're going to learn how to use the HTML5 range input control. We'll look at its additional attributes and also a polyfill we can use to support the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

range input
03:00

An update on range input from a student.

range input updates
00:17

In this session we're going to learn how to use the HTML5 email, tel and url input controls, for email addresses, telephone numbers and website addresses (URLs). We'll also see how this control affects mobile devices such as smartphones.

All the source code for the examples shown is attached.

email, tel and url inputs
01:38

In this session we're going to learn how to use the various HTML5 input controls for dates and times, of which there are many. We'll look at the varying browser support for these controls, and we'll learn how to use two different polyfills to support the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

date and time inputs
06:27

Test your knowledge of new HTML5 form controls.

Form controls in HTML5
6 questions
+
Additional HTML5 form elements and attributes
5 Lectures 17:50

In this session we're going to learn how to use HTML5 datalists for adding autocomplete or combo-box support to certain input controls. We'll also learn how to use a polyfill to support the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

datalists
04:05

In this session we'll learn how to use HTML5 input placeholders to add some descriptive text to input controls to help the user when they're filling in the form. We'll also look at a polyfill to support the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

input placeholders
02:54

In this session we'll learn how to use the HTML5 autofocus and autocomplete attributes of forms and input controls to aid users when they're filling in your forms. We'll also look at a polyfill for the autofocus attribute to support the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

autofocus and autocomplete
04:11

In this session we'll learn how to use the HTML5 output element. This element is used in client-side calculations in JavaScript to semantically markup the result of a calculation.

We'll also look at a polyfill to support the missing functionality in legacy browsers, along with the changes that we need to make to JavaScript code so that it works cross-browser.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

output elements
03:53

In this session we'll learn about the new JavaScript FormData object in HTML5 - how to use it to create a form object in code, add field values to it and send it to the server using Ajax.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

FormData
02:47

Test your knowledge of additional HTML5 form elements and attributes.

More on HTML5 forms
3 questions
+
Form validation in HTML5
5 Lectures 19:21

In this session we'll learn how we can now do client-side validation using HTML5 instead of JavaScript. We'll see how validation works in browsers that support HTML5, including required fields and validation of input types such as email, url and number fields.

We'll also look at a polyfill to recreate the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

Preview 06:01

In this session we'll look at the HTML5 validation pattern attribute and how it's an extremely powerful tool to validate almost any string using regular expressions.

We'll also look at a polyfill that provides the missing functionality in legacy browsers.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

HTML5 form validation: patterns
04:08

In this session we'll look at the default validation messages that are shown when using HTML5 validation, and we'll see how we can use a JavaScript library to change the text of these messages.

All the source code for the examples shown is attached, along with lecture notes containing all the links to websites mentioned in the video.

HTML5 form validation: validation messages
02:17

In this session we'll learn how to disable HTML5 validation (which is enabled by default) at a form level and at the level of an individual submit button. We'll look at an example of a form with two submit buttons, one that validates the form and one that doesn't.

All the source code for the examples shown is attached.

HTML5 form validation: disabling validation
02:48

In this session we'll learn how we can apply styles to input controls based on their values or attributes - required or optional, valid or invalid, and in or out of range. We'll look at examples of each in detail.

All the source code for the examples shown is attached.

Message styling with CSS3
04:07

Test your knowledge of HTML5 form validation.

Form validation in HTML5
5 questions
+
Form validation in JavaScript
6 Lectures 26:52

In this lecture we'll learn how we can do advanced client-side form validation using the jQuery Validation Plugin, a plugin to jQuery that provides cross-browser, highly-customisable validation that works in all browsers, not just modern ones that support HTML5. Many standard validation methods are included.

We'll look at examples of basic usage, using the plugin's compatibility with some HTML5 validation attributes, and also how to use the plugin by passing arguments to its validate() function.

Full source code for the examples used is attached, along with lecture notes that include all the links to websites mentioned in the video.

Preview 07:24

In this lecture we'll learn how to validate patterns with regular expressions using the jQuery Validation Plugin.

Full source code for the examples used is attached.

jQuery Validation Plugin: patterns
02:10

In this lecture we'll learn how to create custom validation methods using the jQuery Validation Plugin.

We'll look at a simple custom validation method, and then a more complex one, including examples of how to customise the validation messages based on values of other fields.

Full source code for the examples shown is attached.

jQuery Validation Plugin: custom validation methods
05:09

In this lecture we'll learn how to do remote validation using the jQuery Validation Plugin.

We'll look at an example of how to validate form values on the server using Ajax via the plugin's remote method.

Full source code for the examples shown is attached, along with lecture notes that include all the links to websites mentioned in the video.

jQuery Validation Plugin: remote validation
03:51

In this lecture we'll learn about the default validation messages in the jQuery Validation Plugin, and different methods we have available for customising them. We'll also look at how to internationalise the messages into one of the over fifty languages that come with the plugin.

Full source code for the examples shown is attached.

jQuery Validation Plugin: messages
06:17

In this lecture we'll learn how to change the styling of the validation messages in the jQuery Validation Plugin.

Full source code for the examples shown is attached, along with lecture notes that include all the links to websites mentioned in the video.

jQuery Validation Plugin: message styling
02:01

Test your knowledge of form validation in JavaScript.

Form validation in JavaScript
5 questions
+
Additional techniques
9 Lectures 46:47

In this lecture we'll learn about the potential problem of multiple form submissions when the server-side script takes a long time to respond. We'll look at a technique to fix this problem by disabling the submit button and showing an animated image to show progress.

Full source code for the examples shown is attached, along with lecture notes that include all the links to websites mentioned in the video.

Preventing multiple submissions
05:27

In this lecture we'll learn about the post reload problem - when a form submitted using the POST method returns HTML to the browser directly and the page is reloaded, a warning message is displayed. If the page is then reloaded, then the server-side script is executed again.

We'll look at detailed examples of what is happening, and how to prevent it.

Full source code for the examples used is attached.

Preventing POST on reload
05:33

In this lecture we'll find out about how our forms could be vulnerable to script-based attacks, and how we can fix this problem by using a shared secure token.

We'll look at detailed examples of what happens, with a third-party website and using the cURL command-line tool, and how to prevent it.

Full source code for the examples used is attached, along with lecture notes with links to all the websites mentioned in the video.

Security tokens
07:01

In this lecture we'll learn how to upload files to our server using the file control.

We'll also take a look at a jQuery plugin that lets us do more advanced uploading, with multiple files, progress bars and resumable uploads.

Full source code for the example shown is attached, along with lecture notes with links to the website mentioned in the video.

File uploading
03:12

Accessible forms
07:15

In this session we'll learn what CAPTCHAs are and why we might need to use them. We mention two free CAPTCHA services and look at a demonstration of one in action.

Lecture notes with links to the websites mentioned in the video are attached.

CAPTCHAs
03:08

In this lecture we'll see how easy it is to add a CAPTCHA to a form using the free reCAPTCHA service from Google.

Add a CAPTCHA to a form: reCAPTCHA code example
04:35

In this session we'll learn how to make an element editable in the browser using the contenteditable attribute. We'll also learn how the new HTML5 spellcheck attribute works.

For more advanced editing, we'll look at an example of a rich-text editor that we can use to add complex text editing features to a textarea in a form.

Full source code for the examples shown is attached, along with lecture notes with links to the websites mentioned in the video.

Rich-text editing
04:26

In this session we'll look at some techniques for manipulating form controls using jQuery.

Full source code for the examples shown is attached, along with lecture notes with links to the websites mentioned in the video.

Manipulating forms with jQuery
06:10
+
Conclusion
1 Lecture 03:04
About the Instructor
Dave Hollingworth
4.7 Average rating
517 Reviews
2,843 Students
6 Courses

Hi, I'm Dave Hollingworth. I'm an IT trainer and web application developer. I've been programming for over twenty-five years, and teaching IT since 1999.

I've developed enterprise-level applications on platforms ranging from mainframes to mobiles: from my first web application, a quotes system created for a major insurance company back in 1999 - the first of its type in the sector - to interactive learning management systems for online language learning.

I've taught courses ranging from basic use of email to advanced web application development, both online and in-person. I've been teaching on Udemy since 2012.

I'm passionate about technology, and love teaching it! I believe it's possible to explain even the most complex subjects in a simple, straightforward way that doesn't confuse the student.

I look forward to welcoming you onto one of my courses!