• Like
13 html forms
Upcoming SlideShare
Loading in...5
×

13 html forms

  • 1,615 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,615
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
25
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML Forms… because a web session is a dialogue, not amonologue
  • 2. Forms are the main way to interact withthe server 4. Form data1. Browser is sent in the 2. Serverrequests page request responds1 header with page 1 3. Surfer fills 5. Server out the form processesfields and hits all that data submit
  • 3. The <form> tag<form action="formAction.jsp" method="post">! Whats your name? ! <input type="text" id="firstName" />! <br />! <input type="submit" />!</form>!
  • 4. HTTP Methods GET POST PUT DELETE HEAD TRACE CONNECT PATCH OPTIONS
  • 5. Formspost theirdata in thePUTrequestsheader
  • 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
  • 7. What else goes in the form?" datalist – Creates a collection of data" keygen – Generates an ad-hoc public/private key pair" output ◦  Displays the results of a calculation" progress – Shows the progress of a running task" meter ◦  A measurement within a known range
  • 8. textarea is for multiline text in forms<textarea>Digg is a social news website. Prior to Digg v4,its cornerstone function consisted of lettingpeople vote stories up or down, called diggingand burying, respectively. Diggs popularityprompted the creation of copycat socialnetworking sites with story submission andvoting systems</textarea>
  • 9. select can be listboxes or dropdowns<select multiple="multiple"> <select> <option>David at the Dentist</option> <option>David at the Dentist</option> <option>Chocolate Rain</option> <option>Chocolate Rain</option> <option>Double Rainbow</option> <option>Double Rainbow</option> <option>Numa Numa</option> <option>Numa Numa</option></select> </select>
  • 10. "   datalist—  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>!
  • 11. "   progress<p>Progress: <progress> <span id="p">0</span>% </progress> </p>!<script>! var progressBar = document.getElementById(p);! function updateProgress(newValue) {! progressBar.textContent = newValue;! }!</script>!
  • 12. "   meter draws a gauge on the formYour score is: <meter>2 out of 10</meter>!
  • 13. "   output creates a read-only result of a calculation<form>
 <label for="nunchuk">NunchukSkillz: </label>
 <input id="nunchuk" ! type="range"! min="0" max="100">
 <output for="nunchuk" ! onforminput = ! "value=nunchuk.valueAsNumber">! 0! </output>
</form> !
  • 14. inputs are for everything else   email—  text " " url—  password "   number "   range—  checkbox "   date—  radio " datetime " datetime-local—  file "   month—  submit "   week "   time—  button "   search—  hidden "   color
  • 15. 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
  • 16. "   Requiring values—  Add required="required" to any form element<input id="email" type="email"required="required" />
  • 17. demo: required form fields fields Hands-on required form
  • 18. input type="file"Allows the user topoint to a file, usuallyfor upload to theserver
  • 19. input type="button"—  A button that does nothing—  You have to wire it up using JavaScript
  • 20. input type="hidden"The user never sees it, nor changes it Used to pass values between pages
  • 21. "   input type="email"—  A text field, but only accepts values that look like email addresses—  Show success and failed inputs
  • 22. "   input type="url" Same as email but with URLs
  • 23. demo: email and url and url Hands-on email
  • 24. "   <input type="date">
  • 25. 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
  • 26. "   input type="search"—  Looksnearly identical to text—  More of a semantic difference
  • 27. "   input type="color"—  A color picker—  Returns a hex RGB number
  • 28. demo: search and color color Hands-on search and
  • 29. Whew! Thatsa lot of inputs
  • 30. Conclusion—  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, keygen—  And there are lots on input fields with types of text, submit, search, time, color, number, range, url, and email
  • 31. Further study