>> introduction to html: forms. introduction to html 5 important html tags html tags and...
TRANSCRIPT
>> 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