>> introduction to html: forms. introduction to html 5 important html tags html tags and...
TRANSCRIPT
![Page 1: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/1.jpg)
>> Introduction to HTML: Forms
![Page 2: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/2.jpg)
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
![Page 3: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/3.jpg)
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
![Page 4: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/4.jpg)
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)
![Page 5: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/5.jpg)
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
![Page 6: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/6.jpg)
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>
![Page 7: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/7.jpg)
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>
![Page 8: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/8.jpg)
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
![Page 9: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/9.jpg)
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√
![Page 10: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/10.jpg)
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>
![Page 11: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/11.jpg)
Text Area - Form• Use the <textarea> tag– Important attributes• cols - number of columns• rows - number of rows
![Page 12: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/12.jpg)
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
![Page 13: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/13.jpg)
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)
![Page 14: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/14.jpg)
Try Now
Use HTML to create a form as shown
![Page 15: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/15.jpg)
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
![Page 16: >> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}](https://reader038.vdocument.in/reader038/viewer/2022110205/56649cc65503460f9498fd83/html5/thumbnails/16.jpg)
Next on Web-based Systems
• Forms in HTML5– New Elements– New Input Types– New Attributes