Designing web pages html forms and input


Published on

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing web pages html forms and input

  1. 1. HTML Forms, Input and DropDown Menus
  2. 2. HTML Forms HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. A 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. The <form> tag is used to create an HTML form: <form> input elements </form>
  3. 3.  The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described AS follows…….
  4. 4.  <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> How the HTML code above looks in a browser: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
  5. 5.  <form> <input type=“number" /> </form> <form> <input type=“date" /> </form>
  6. 6.  <input type="password" /> defines a password field: <form> Password: <input type="password" name="pwd" /> </form> How the HTML code above looks in a browser: Note: The characters in a password field are masked (shown as asterisks or circles).
  7. 7.  <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> How the HTML code above looks in a browser:
  8. 8.  <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> How the HTML code above looks in a browser:
  9. 9.  <input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the forms action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How the HTML code above looks in a browser: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
  10. 10. Drop-down menus are probably the most flexible objects you can add to yourforms.Depending on your settings, drop-down menus can serve the same purposeas radio buttons (one selection only) or check boxes (multiple selectionsallowed).The advantage of a drop-down menu, compared to radio buttons or checkboxes, is that it takes up less space.But that is also a disadvantage, because people cant see all options in themenu right away.There is a workaround for this - with the size setting, you can customize themenu so it shows more than just one option at a time, but when you do that -you also lose the advantage of taking up less space.
  11. 11.  The <select> tag defines the menu. <select> <option>Milk</option> <option>Coffee</option> <option>Tea</option> </select> The name setting adds an internal name to the field so the program that handles the form can identify the fields. The size option defines how many items should be visible at a time. Default is one item. The multiple setting will allow for multiple selections if present.
  12. 12.  The <option> tag defines the single items in the menu. <option value="ID">Idaho</option> The value setting defines what will be submitted if the item is selected. This is not always the same as what it says in the menu. If our field was defined this way: then, in the menu it would say "Idaho" but when the form was submitted the abbreviated "ID" would actually be sent.
  13. 13.  AN EXAMPLE: Look at this HTML example: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="" method="POST"> <div align="center"> <select name="mydropdown"> <option value="Milk">Fresh Milk</option> <option value="Cheese">Old Cheese</option> <option value="Bread">Hot Bread</option> </select> </div> </form> </body> </html>