>> Introduction to HTML: Forms

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

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

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)

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

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

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

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

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 √

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

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

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

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)

Try Now Use HTML to create a form as shown

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

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