>> Introduction to HTML: Forms

Web-Based Systems - Misbhauddin 2

• Introduction to HTML• 5 Important HTML Tags• HTML tags and attributes• Images• Hyperlinks• Lists –{ordered | unordered | definition}• Styling in HTML• Tables

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 <form> 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 <form> and </form> tags– Add fields using the <input> tag– Add labels using the <label> tag• Attribute for refers to the name of the input element

– Types of input (use the type attribute)• Textbox• Radio Button• Checkbox

Textbox - Form

• <input> 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

<form> <label for=“fname">Name</label> <input type="text" name=“fname"/></form>

Password - Form• <input> 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

<form> <label for=“pwd">Password</label> <input type=“password" name=“pwd"/></form>

Radio Button - Form• <input> tag with type=“radio”– name - to group radio buttons– value - value sent to JS/PHP program– checked - specifies pre-selection

Gender

<form> <label for="gender">Gender</label> <input type="radio" name="gender" value="male“ checked/> Male <input type="radio" name="gender" value="female"/>Female</form>

Male Female

Checkbox - Form• <input> tag with type=“checkbox”– name - assigns a name to the field– value - value sent to JS/PHP program– checked - specifies pre-selection

Topping

<form> <label for="topping">Topping</label> <input type="checkbox" name="topping" value="ckn" checked/> Chicken <input type="checkbox" name="topping" value="mush"/>Mushroom</form>

Chicken Mushroom√

Dropdown List - Form• Use the <select> tag– name - assigns a name to the tag– Add options using the <option> tag between

<select>….</select>• Add option name between <option>…….</option> tags• Use the value attribute to assign a value to be used by

the code<form> <select name=“country”> <option value="sa">Saudi Arabia</option> <option value="bh"> Bahrain</option> </select></form>

Text Area - Form• Use the <textarea> tag– Important attributes• cols - number of columns• rows - number of rows

Submit & Reset - Form

• Use the <input> 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 <input> 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