Vefþróun@Tækniskóli

Guide: HTML & CSS - Forms

Description

Forms are everywhere in web development. From sending emails and signing-up to newsletters to full-fledged CMS systems, they help us manipulate user-generated data and do useful things with it. Therefore it is very important to understand how these elements works. In this Guide will will learn how to create and style a form.

Knowledge

  • Understand how forms work in HTML

Skills

  • Be able to create and style a form
  • Be able to use HTML5 native validation for forms

Topics

  • Form elements
  • Native HTML5 validation
  • Accessibility

Action Points

  • Find out how to create a form in HTML and its main related elements (e.g. inputs, textareas, buttons, etc)
  • Create a form and style it with CSS
  • Learn how to use the native HTML5 validation for forms
  • Read up on HTML forms accessibility and use this knowledge in the deliverable

Deliverable: Form with native validation

  • Submit:
    • Glitch Project URL
      • Add comments for each relevant code block
    • Project description and details in the README.md file
  • Minimum requirements
    • Form with native HTML5 validation
    • Must contain input[type=”text”], input[type=”email”], input[type=”checkbox”], input[type=”radio”], textarea and button[type=”submit”] elements
    • Result must be accessible (logical order, usable with screen readers/TAB key, include aria fields when necessary)
    • Result must be responsive
    • Javascript validation not require but welcome (HTML5 validation still needs to be in place)
  • Theme ideas:
    • Sign-up form to receive a PDF book
    • Market research form / Poll
    • Quiz game