Building HTML5 Forms with Dreamweaver

Learn how to use the built-in tools in Dreamweaver to create rich, accessible HTML5 forms.

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.

Introduction

• Welcome
• Using the exercise files

1. Examples of Modern Inputs

• The critical role of accessible forms
• Form input: Bad, good, and okay
• The key elements of good form design

2. Building Forms with Dreamweaver

• Dreamweaver form design features
• Building a form in Dreamweaver
• Using Dreamweaver form design features
• Styling forms with CSS

3. Form Input Types

• A quick survey of the top nine input types
• The color input
• The date input
• The email input
• The number input
• The range input
• The search input
• The telephone input
• The time input
• The URL input

4. Using HTML5 Inputs for Validation

• Setting a required input
• Setting a constrained input
• Making entry intuitive with autofocus
• Providing options with select menus
• Easing data entry with datalists

5. Inviting and Accessible Inputs

• Labels, placeholders, and mobile friendly forms
• Effective use of labels
• Effective use of placeholders
• Responsive inputs for mobile devices

6. Styling Input

• Styling inputs with CSS
• CSS for forms
• CSS for styling inputs
• CSS for styling text areas
• Styling with fieldsets

7. Bootstrap Form Tools

• Introducing Bootstr22ap form design features
• Creating inline forms
• Creating styled labels with Bootstrap
• Adding labels and badges
• Adding sets of radio buttons
• More Bootstrap form resources

Conclusion

• Next steps