In many respects, forms are the most complex aspect of front-end web development. This section approaches form HTML simply: the forms you create here won't process submitted information (that’s usually the role of a backend process in PHP or another server-side language). Working through this material will allow you to understand the fundamentals of form creation, and prepare you for styling and processing the form in the future.
Goal: Create an accessible form that follows ethical best practices.
Prerequisite: Basic HTML
Total time (Core Material): 3 hours
- Form Design Principles
- The Form Element
- The name attribute
- Form Hints & Tips
- Ethical Considerations
Form Inputs & Elements
- Generic Text Inputs
- Select drop-downs
- Radio buttons
- The file input
- Other input types
- submit & reset
- required, placeholder & autofocus
- search, url & eMail
- color input
- number input
- range slider
- Autosuggest With DataList
Optional: Read how Canada’s CASL laws will affect web forms. Read how to how add tick marks to the
HTML5 allows for the native, client-side validation of form elements. If you want to learn more about this, read:
Watch the Forms material at Treehouse and take the Quiz at the end (total time: 40 minutes). Optionally, take the HTML Mastery Challenge at the end of the section. Note that Nick uses
<br> tags and
align to push form elements around: don’t do this.
Read Chapter 7, Learning Web Design by Jennifer Niederst Robbins.
When You’re Finished
You now have enough knowledge to complete a basic web form as an exercise.
Forms are perhaps not the most exciting aspects of web development, but they are a necessary one: every piece of feedback you leave on the web is written inside a form.
The next section, multimedia, has been changed radically by HTML5.
Photograph by Hege, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.