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 (21 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.
197 students enrolled
$20
Take This Course
  • Lectures 46
  • Contents Video: 3 hours
    Other: 0 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2014 English

Course 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!

What are the 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.

What am I going to get from this course?

  • 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.

What 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Introduction
Preview
02:28
Section 1: Forms in HTML - the basics
01:40

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.

05:04

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.

08:12

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.

04:47

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.

04:56

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.

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.

04:50

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.

02:04

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.

04:07

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.

05:00

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.

04:23

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.

10 questions

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

Section 2: New form controls in HTML5
03:19

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.

03:54

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.

01:27

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.

03:23

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.

03:00

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.

Article

An update on range input from a student.

01:38

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.

06:27

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.

6 questions

Test your knowledge of new HTML5 form controls.

Section 3: Additional HTML5 form elements and attributes
04:05

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.

02:54

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.

04:11

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.

03:53

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.

02:47

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.

3 questions

Test your knowledge of additional HTML5 form elements and attributes.

Section 4: Form validation in HTML5
06:01

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.

04:08

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.

02:17

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.

02:48

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.

04:07

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.

5 questions

Test your knowledge of HTML5 form validation.

Section 5: Form validation in JavaScript
07:24

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.

02:10

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.

05:09

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.

03:51

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.

06:17

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.

02:01

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.

5 questions

Test your knowledge of form validation in JavaScript.

Section 6: Additional techniques
05:27

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.

05:33

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.

07:01

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.

03:12

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.

Accessible forms
07:15
03:08

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.

04:35

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

04:26

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.

06:10

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.

Section 7: Conclusion
Conclusion
Preview
03:04

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

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!

Ready to start learning?
Take This Course