Presentation is loading. Please wait.

Presentation is loading. Please wait.

>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}

Similar presentations


Presentation on theme: ">> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}"— Presentation transcript:

1 >> Introduction to HTML: Forms

2 Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition} Styling in HTML Tables Web-Based Systems - Misbhauddin 2 Recall

3 HTML Forms Can be used for variety of different purposes in your website – Sign-Up/Login – Comment Area – Guestbook – Contact Form – Questionnaires – Polls / Surveys Needs JavaScript or PHP to function properly – For later

4 Creating a Form Use the tag Important attributes of this tag – id – Unique identifier of the form (to be used in the JS/PHP to refer to a particular form) – name – Name of the form – action – URL of the function that will process the form (will see this later in the course) – method - {GET|POST} (will see this later in the course)

5 Fields of the Form Between the and tags – Add fields using the tag – Add labels using the tag Attribute for refers to the name of the input element – Types of input (use the type attribute) Textbox Radio Button Checkbox

6 Textbox - Form tag with type=“text” – name – assigns a name to the field (to be used in JS/PHP) – maxlength – the maximum length of the text box area Name Name

7 Password - Form tag with type=“password” – name – assigns a name to the field (to be used in JS/PHP) – maxlength – the maximum length of the text box area Password Password

8 Radio Button - Form tag with type=“radio” – name - to group radio buttons – value - value sent to JS/PHP program – checked - specifies pre-selection Gender Gender Female MaleFemale

9 Checkbox - Form tag with type=“checkbox” – name - assigns a name to the field – value - value sent to JS/PHP program – checked - specifies pre-selection Topping Topping Chicken Mushroom ChickenMushroom √

10 Dropdown List - Form Use the tag – name - assigns a name to the tag – Add options using the tag between …. Add option name between ……. tags Use the value attribute to assign a value to be used by the code Saudi Arabia Bahrain

11 Text Area - Form Use the tag – Important attributes cols - number of columns rows - number of rows

12 Submit & Reset - Form Use the tag again – Attributes – type and value type = “submit” or type = “reset” value = assign a value to be used by the JS/PHP code

13 Buttons - Form Use the tag with type=“button” – Use to run a program code (JS) – No default action like the submit and reset buttons – Attributes value – assign a value to be used by the code onClick – redirect to a JS function (event handler concept)

14 Try Now Use HTML to create a form as shown

15 Web-Based Systems - Misbhauddin 15 Forms are an important component of a webpage. Used for many different purposes. Elements – Input {text, password, radio, checkbox, button, submit, reset} – Select + Option – Textarea Summary

16 Next on Web-based Systems Forms in HTML5 – New Elements – New Input Types – New Attributes


Download ppt ">> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}"

Similar presentations


Ads by Google