FORMS How to collect information f XX rom visitors Different kinds of form controls New HTML5 form controls

FORMS  Traditionally a printed document  HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site  How to create a form on your website  The different tools for collecting data  New HTML5 form controls

WHY FORMS?

FORM CONTROLS

Form Controls

HOW FORMS WORK

FORMS

FORM STRUCTURE

TEX T INPUT

PASSWORD INPUT

TEXT AREA

RADIO BUTTON

CHECKBOX

DROP DOWN LIST BOX

MULTIPLE SE LECT BOX

FILE INPUT BOX

SUBMIT BUTTON

IMAGE BUTTON

BUTTON & HIDDEN CONTROLS

LABELLING FORM CONTROLS

GROUPING FORM ELEMENTS

HTML 5: FORM VALIDA TION

HTML 5: DATE INPUT

HTML 5: & URL INPUT

HTML 5: SEARCH INPUT

EXAMPLE FORMS  This example shows a feedback and newsletter sign-up form. It uses a variety of form controls

SUMMARY  Whenever you want to c XX ollect information from visitors you will need a form, which lives inside a element.  Information from a form is sent in name/value pairs.  Each form control is given a name, and the text the user types in or the values of the options they select are sent to the server.  HTML5 introduces new form elements which make it easier for visitors to fill in forms

EXTRA MARKUP  Specifying different versions of HTML  Identifying and grouping elements  Comments, meta information and iframes

TAGS  At this point, we have covered the main tags that fit nicely into groups and sections.  The different versions of HTML and how to indicate which version you are using  How to add comments to your code  Global attributes, which are attributes that can be used on any element, including the class and id attributes  Elements that are used to group together parts of the page where no other element is suitable

TAGS  How to embed a page within a page using iframes  How to add information about the web page using the element  Adding characters such as angled brackets and copyright symbols

THE EVOLUTION OF HTML  HTML 4  XHTML 1.0  HTML5

DOCTYPES

COMMENTS IN HT ML

ID ATTRIBUTE

CLASS ATTRIBUTE

BLOCK ELEMENTS

INFORMATION ABOUT YOUR PAGE S   Description  Keywords  robots

SUMM ARY  DOCTYPES tell browsers which version of HTML you are using  You can add comments to your code between the markers  The id and class attributes allow you to identify particular elements.  The and elements allow you to group block-level and inline elements together.  cut windows into your web pages through which other pages can be displayed  The tag allows you to supply all kinds of information about your web page  Escape characters are used to include special characters in your pages such as, and ©