Your SlideShare is downloading. ×
0
HTML Forms
… because a web session is a dialogue, not a
monologue
Forms are the main way to interact with
the server
2. Server
responds
with page 1
1. Browser
requests page 1
3. Surfer fil...
The <form> tag
<form action="formAction.jsp" method="post">!
What's your name? !
<input name="firstName" />!
<br />!
<inpu...
HTTP Methods
GET
HEAD
POST
PUT
PATCH
DELETE
TRACE
CONNECT
OPTIONS
Forms
post their
data in the
POST
request's
header
What goes inside the form?
—  textarea
◦  for multiline text
—  select
◦  for dropdown lists and listboxes
—  input
◦  ...
But what if a field isn't
recognized by the
browser?
—  The browser just renders it
as a text input.
—  That's a happy c...
textarea is for multiline text in forms
<textarea>
Digg is a social news website. Prior to Digg v4,
its cornerstone functi...
select can be listboxes or dropdowns
<select multiple="multiple">
<option>David at the Dentist</option>
<option>Chocolate ...
inputs are for everything else
—  text
—  password
—  checkbox
—  radio
—  file
—  submit
—  button
—  hidden
"   ...
The simple input types
—  text – for text (duh)
—  password – text, but the characters are not
typed back to the screen
...
Radio buttons
—  To group them, give them the same name
attribute.
<p>Your gender:</p>!
<input type="radio" name="gender"...
" datalist allows a comboBox-type
functionality
—  Does not appear to the user
<label>Your favorite fruit:!
<input type="...
HTML5 attributes
" autofocus
" min, max, and step (number, range, date,
datetime, datetime-local, month, time and
week)
" ...
Autofocus is the default
starting point
<input name="address" !
autofocus />!
"   Placeholder puts ghost text in the
textbox
<input type='text' name='firstName'
placeholder='First Name' />!
"   Built-in validation happens when you
specify a pattern
— a regular expression
<input name='creditCard'
pattern='(d{4}...
"   Requiring values
—  Add "required" to any form element
<input name="email" type="email" required />!
demo: required form fieldsHands-on required form fields
input type="file"
Allows the user to
point to a file, usually
for upload to the
server
input type="hidden"
The user never sees it, nor changes it
Used to pass values between pages
"   input type="email"
—  A text field, but only accepts values that look
like email addresses
The keyboard changes with a type set
type="text" type="number" type="tel" type="email"
"   input type="url"
Same as email
but with URLs
"   input type="number"
—  A number
<input type="number"!
min="0"!
max="10"!
step="0.5"!
value="6" />!
"   input type="range"
—  Also a number
<input type="range"!
min="0"!
max="10"!
step="2"!
value="6" />!
"   <input type="date" />
Other time-types
" time – the time of day only
" datetime – a date and time combination
normalized around UTC (GMT)
" date...
"   input type="search"
—  Looks nearly identical to text
—  More of a semantic difference
"   input type="color"
—  A color picker
—  Returns a hex RGB number
Whew! That's
a lot of inputs
tl;dr
—  Forms are used to collect data from the user
and then send them to the server for
processing
—  There are a few...
13 html forms
Upcoming SlideShare
Loading in...5
×

13 html forms

1,744

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,744
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×