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 <input type="radio" name="gender" value="male“ checked/> Male <input type="radio" name="gender" value="female"/>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 <input type="checkbox" name="topping" value="ckn" checked/> Chicken <input type="checkbox" name="topping" value="mush"/>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