DGM2740 Principles of Web Languages
This course was built by Dr. Paul Cheney for the Digital Media Department at UVU
Unit 06 Forms
- Implement dropdown navigation for the tablet.
- Review suckerfish navigation for the desktop.
- Implement the new HTML5 form inputs
- Identify which inputs are currelty supported by which browsers.
- Implement form pattern matching
- Implement HTML5 form psudo classes in the CSS
- Use this php file to send an email from your form
There are many changes that were made in html5 to form elements. Although there is crrently spotty support , you can get see where these changes are taking us. In this unit you will explore the bleeding edge of HTML5 forms including validation, pattern matching, new inputs types, and sub classes.
All videos listed below are available on UDEMY
- Watch Introduction to Forms part 1
- Watch Introduction to Forms part 2
- Watch Overview of the Completed Page
- Watch Progress Bar
- Watch Build a Form Part 1
- WatchBuild a Form Part 2
- Watch Style the Form
- Watch Building a Sprite in Photoshop
- Watch Implementing Pseudo Classes for Form Inputs
- Watch Hooking up the FormToEmail.php File
- Watch Giving Feedback with the Title Tag on Inputs
- Watch the 7 videos in the Mobile First Forms of "Mobile First Responsive Web Design" by Jon Flanders on PLURALSITE (18:20)
- Read about Regular Expressions on w3schools
- Read how to remove whitespace below an image from tutorial repbulic
- Read Styling input buttons in Apple devices
- Complete the form assignment
- Locate a really bad form on someone elses site
- Read HTML5 for Web Designers Ch 4 (Orange Book)
- Complete the Quiz for this Unit
You will please submit the answers to these questions in Canvas
- Chapter 4- What is placeholder text?
- Chapter 4 - When should you NOT use autocomplete
- Chapter 4 - Which bowsers support datalist and to what extent?
- Resesign the form you found using a graphics application so it follows the rules of good formm design
- Incude a screen capture of the form before and after your redesign.
View an example form page