Building HTML5 Forms with Dreamweaver

Course details

Learn how to use the built-in tools in Dreamweaver to create rich, accessible web forms. In this course, instructor David Karlins shows how to use HTML5, CSS3, and the form-creation tools and code assistance features in Dreamweaver to build modern-looking forms that are responsive and easy to use, whether displayed on a desktop or mobile device. He also shows how to validate the data you receive with HTML5 form input types. Plus, learn how to style the forms to match the look of your website. By the end of the course, you'll have the necessary skills to build forms to take orders, collect contact information, and solicit feedback from your users—making your websites more interactive and engaging.

Learning objectives
Modern form inputs
Dreamweaver form design features
Styling forms with CSS
Form input types
Setting required inputs and constraints
Styling inputs with CSS
Integrating Bootstrap tools

Concepts

0. Introduction

01 - Welcome
02 - Using the exercise files

1. Examples of Modern Inputs

03 - The critical role of accessible forms
04 - Form input - Bad, good, and okay
05 - The key elements of good form design

2. Building Forms with Dreamweaver

06 - Dreamweaver form design features
07 - Building a form in Dreamweaver
08 - Using Dreamweaver form design features
09 - Styling forms with CSS

3. Form Input Types

10 - A quick survey of the top nine input types
11 - The color input
12 - The date input
13 - The email input
14 - The number input
15 - The range input
16 - The search input
17 - The telephone input
18 - The time input
19 - The URL input

4. Using HTML5 Inputs for Validation

20 - Setting a required input
21 - Setting a constrained input
22 - Making entry intuitive with autofocus
23 - Providing options with select menus
24 - Easing data entry with datalists

5. Inviting and Accessible Inputs

25 - Labels, placeholders, and mobile friendly forms
26 - Effective use of labels
27 - Effective use of placeholders
28 - Responsive inputs for mobile devices

6. Styling Input

29 - Styling inputs with CSS
30 - CSS for forms
31 - CSS for styling inputs
32 - CSS for styling text areas
33 - Styling with fieldsets

7. Bootstrap Form Tools

34 - Introducing Bootstr22ap form design features
35 - Creating inline forms
36 - Creating styled labels with Bootstrap
37 - Adding labels and badges
38 - Adding sets of radio buttons
39 - More Bootstrap form resources

Conclusion

40 - Next steps