Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "FORMS How to collect information f XX rom visitors Different kinds of form controls New HTML5 form controls."— Presentation transcript:

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

2 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

3 WHY FORMS?

4 FORM CONTROLS

5

6 Form Controls

7 HOW FORMS WORK

8 FORMS

9 FORM STRUCTURE

10 TEX T INPUT

11 PASSWORD INPUT

12 TEXT AREA

13 RADIO BUTTON

14 CHECKBOX

15 DROP DOWN LIST BOX

16 MULTIPLE SE LECT BOX

17 FILE INPUT BOX

18 SUBMIT BUTTON

19 IMAGE BUTTON

20 BUTTON & HIDDEN CONTROLS

21 LABELLING FORM CONTROLS

22 GROUPING FORM ELEMENTS

23 HTML 5: FORM VALIDA TION

24 HTML 5: DATE INPUT

25 HTML 5: EMAIL & URL INPUT

26 HTML 5: SEARCH INPUT

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

28 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

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

30 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

31 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

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

33 DOCTYPES

34 COMMENTS IN HT ML

35 ID ATTRIBUTE

36 CLASS ATTRIBUTE

37 BLOCK ELEMENTS

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

39 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 ©


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

Similar presentations


Ads by Google