Building HTML5 Forms with Dreamweaver

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

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