Overview
-
Learn how to use the built-in tools in Dreamweaver to create rich, accessible HTML5 forms.
Syllabus
-
Introduction
- Welcome
- Using the exercise files
- The critical role of accessible forms
- Form input: Bad, good, and okay
- The key elements of good form design
- Dreamweaver form design features
- Building a form in Dreamweaver
- Using Dreamweaver form design features
- Styling forms with CSS
- 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
- Setting a required input
- Setting a constrained input
- Making entry intuitive with autofocus
- Providing options with select menus
- Easing data entry with datalists
- Labels, placeholders, and mobile friendly forms
- Effective use of labels
- Effective use of placeholders
- Responsive inputs for mobile devices
- Styling inputs with CSS
- CSS for forms
- CSS for styling inputs
- CSS for styling text areas
- Styling with fieldsets
- 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
- Next steps
