Your SlideShare is downloading. ×
Html Forms and Input
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html Forms and Input


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. M. Shoaib Farooq 1 HTML Forms and Input ● HTML Forms are used to select different kinds of user input. ● A form is an area that can contain form elements. ● Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
  • 2. M. Shoaib Farooq 2 Form Tag ● A form is defined with the <form> tag. <form> <input> <input> </form>
  • 3. M. Shoaib Farooq 3 Input ● The most used form tag is the <input> tag. The type of input is specified with the type attribute. ● Syntax <input type= “ “ name=“….” value=“…”>
  • 4. M. Shoaib Farooq 4 Text Fields ● Text fields are used when you want to type letters, numbers, etc. in a form. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> * the width of the text field is 20 characters by default
  • 5. M. Shoaib Farooq 5 Radio Buttons ● Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name=“Gender" value="male"> Male <br> <input type="radio" name=“Gender" value="female"> Female </form>
  • 6. M. Shoaib Farooq 6 Checkboxes ● Checkboxes are used when you want to select one or more options of a limited number of choices. <form> <input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car"> I have a car </form>
  • 7. M. Shoaib Farooq 7 Simple drop down box Or Combo Box ● A drop-down box is a selectable list. <html> <body> <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form> </body> </html>
  • 8. M. Shoaib Farooq 8 Text Area ● In a text-area you can write an unlimited number of characters. <html> <body> <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form> </body> </html>
  • 9. M. Shoaib Farooq 9 Create a button <html> <body> <form> <input type="button" value=“Save"> </form> </body> </html>
  • 10. M. Shoaib Farooq 10 HTML Tables ● Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). ● The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
  • 11. M. Shoaib Farooq 11 Example <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>