Forms and buttons


Published on

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

  • Be the first to like this

Forms and buttons

  1. 1. Forms and Buttons
  2. 2. Button  The <button> tag defines a clickable button.  Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
  3. 3. Example (tags) <html> <head> <title>Buttons</title> </head> <body> <a href=""> <button> Search </button> <a/> </body> </html>
  4. 4. FORMS  are used to pass data to a server.  An HTML form can contain input elements like text fields, checkboxes, radio- buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
  5. 5. The <form> tag is used to create an HTML form: <form> . input elements . </form>
  7. 7. 1. Text Fields  <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
  8. 8. 2. Password Field  <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form>
  9. 9. Radio Buttons  <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
  10. 10. Checkboxes  <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
  11. 11. Drop-down List <html> <body> <form> <select> <option value="Nokia">Nokia</option> <option value="Samsung">Samsung</option> <option value="Blackberry">Blackberry</option> <option value="Apple">Apple</option> </select> </form> </body> </html>
  12. 12. Submit Button <html> <head> <title>Buttons</title> </head> <body> <a href=""> <button> Search </button> <a/> </body> </html>