13 html forms

1,863
-1

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,863
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

13 html forms

  1. 1. HTML Forms … because a web session is a dialogue, not a monologue
  2. 2. Forms are the main way to interact with the server 2. Server responds with page 1 1. Browser requests page 1 3. Surfer fills out the form fields and hits submit 4. Form data is sent in the request header 5. Server processes all that data 6. Server responds with "success"
  3. 3. The <form> tag <form action="formAction.jsp" method="post">! What's your name? ! <input name="firstName" />! <br />! <input type="submit" />! </form>!
  4. 4. HTTP Methods GET HEAD POST PUT PATCH DELETE TRACE CONNECT OPTIONS
  5. 5. Forms post their data in the POST request's header
  6. 6. What goes inside the form? —  textarea ◦  for multiline text —  select ◦  for dropdown lists and listboxes —  input ◦  for text fields ◦  for checkboxes ◦  for radio buttons ◦  for file uploads " for other things
  7. 7. But what if a field isn't recognized by the browser? —  The browser just renders it as a text input. —  That's a happy coincidence!
  8. 8. textarea is for multiline text in forms <textarea> Digg is a social news website. Prior to Digg v4, its cornerstone function consisted of letting people vote stories up or down, called digging and burying, respectively. Digg's popularity prompted the creation of copycat social networking sites with story submission and voting systems </textarea>
  9. 9. select can be listboxes or dropdowns <select multiple="multiple"> <option>David at the Dentist</option> <option>Chocolate Rain</option> <option>Double Rainbow</option> <option>Numa Numa</option> </select> <select> <option>David at the Dentist</option> <option>Chocolate Rain</option> <option>Double Rainbow</option> <option>Numa Numa</option> </select>
  10. 10. inputs are for everything else —  text —  password —  checkbox —  radio —  file —  submit —  button —  hidden "   email " url "   number "   range "   date " datetime " datetime-local "   month "   week "   time "   search "   color <input type="______" name="whatever" />!
  11. 11. The simple input types —  text – for text (duh) —  password – text, but the characters are not typed back to the screen —  checkbox – has a boolean selected value —  radio – a radio button – like a checkbox except that only one can be selected at a time —  submit – the button that submits the form
  12. 12. Radio buttons —  To group them, give them the same name attribute. <p>Your gender:</p>! <input type="radio" name="gender" ! id="m" value="female" />! <label for="m">Male</label>! <input type="radio" name="gender" ! id="f" value="female" />! <label for="f">Female</label>!
  13. 13. " datalist allows a comboBox-type functionality —  Does not appear to the user <label>Your favorite fruit:! <input type="text" name="fruit" list="fruits">! <datalist id="fruits">! <option value="1">Blackberry</option>! <option value="2">Blackcurrant</option>! <option value="3">Blueberry</option>! <!-- … -->! </datalist>! </label>!
  14. 14. HTML5 attributes " autofocus " min, max, and step (number, range, date, datetime, datetime-local, month, time and week) " placeholder " pattern " required " multiple
  15. 15. Autofocus is the default starting point <input name="address" ! autofocus />!
  16. 16. "   Placeholder puts ghost text in the textbox <input type='text' name='firstName' placeholder='First Name' />!
  17. 17. "   Built-in validation happens when you specify a pattern — a regular expression <input name='creditCard' pattern='(d{4}[ -]?){3}[ -]?d{4}'! title='Enter a credit card (XXXX-XXXX- XXXX-XXXX)' />!
  18. 18. "   Requiring values —  Add "required" to any form element <input name="email" type="email" required />!
  19. 19. demo: required form fieldsHands-on required form fields
  20. 20. input type="file" Allows the user to point to a file, usually for upload to the server
  21. 21. input type="hidden" The user never sees it, nor changes it Used to pass values between pages
  22. 22. "   input type="email" —  A text field, but only accepts values that look like email addresses
  23. 23. The keyboard changes with a type set type="text" type="number" type="tel" type="email"
  24. 24. "   input type="url" Same as email but with URLs
  25. 25. "   input type="number" —  A number <input type="number"! min="0"! max="10"! step="0.5"! value="6" />!
  26. 26. "   input type="range" —  Also a number <input type="range"! min="0"! max="10"! step="2"! value="6" />!
  27. 27. "   <input type="date" />
  28. 28. Other time-types " time – the time of day only " datetime – a date and time combination normalized around UTC (GMT) " datetime-local – same, but using the local timezone " month – same as date but only month and year " week – a week number and year
  29. 29. "   input type="search" —  Looks nearly identical to text —  More of a semantic difference
  30. 30. "   input type="color" —  A color picker —  Returns a hex RGB number
  31. 31. Whew! That's a lot of inputs
  32. 32. tl;dr —  Forms are used to collect data from the user and then send them to the server for processing —  There are a few fields like textarea, select, datalist —  And there are lots on input fields with types of text, submit, search, time, color, number, range, url, and email

×