Successfully reported this slideshow.

Forms

1

Share

Loading in …3
×
1 of 63
1 of 63

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Forms

  1. 1. FormsThe Universe,And Everything
  2. 2. Hello,World! <form method="POST" > <fieldset> <legend> Speaker Info </legend> <input type='text' name='name' value='Aaron T. Maturen' /> <select name='title'/> <option selected> Web Developer </option> <option> Customer Support</option> </select> <input type='email' name='email' value='aaron@svsu.edu' /> <input type='tel' name='phone'/ value='9899642190'> <input type='text' name='employer[]' value='SVSU' /> <input type='text' name='employer[]' value='Ivory Penguin' /> <input type='text' name='twitter' value='@atmature' /> <input type='url' name='website' value='http://www.aaronmaturen.com' /> <input type='submit' /> </fieldset> </form>
  3. 3. Hello,World! { "name" : "Aaron T. Maturen", "title" : "Web Developer", "email" : "aaron@svsu.edu", "phone" : "989-964-2190", "employers" : [ "Saginaw Valley State University", "Ivory Penguin" ], "twitter" : "@atmaturen" }
  4. 4. forms
  5. 5. StoryTime. There once was a man from Poughkeepsie...
  6. 6. Input <form> <input name='email' /> </form>
  7. 7. Email <form> <input type='email' name='email' /> </form>
  8. 8. <form> <form action="http://localhost" method="post"> ... </form>
  9. 9. <label> <label>Email: <input name="email" type="email" /> </label> or <label for="userEmail">Email: </label> <input name="email" type="email" id="userEmail" />
  10. 10. <textarea> <textarea name="textarea" rows="10" cols="50"> Write something here </textarea>
  11. 11. <input> <inputtype='button' /> <inputtype='checkbox' /> <inputtype='hidden' /> <inputtype='password' /> <inputtype='radio' /> <inputtype='reset' /> <inputtype='submit' /> <inputtype='text' />
  12. 12. Warning!<inputtype=' image ' /> Isjusta graphicalbutton
  13. 13. <select> <option></option> <optgroup></optgroup> <select name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>
  14. 14. we're inthe future now.
  15. 15. <form> <form accept-charset='utf-8' autocomplete='false' action='http://localhost' method='POST' novalidate='false'> </form>
  16. 16. ContentEditable <div contenteditable="true"> This text can be edited by the user. </div>
  17. 17. Newtypes in HTML5 <inputtype='date' /> A control for entering a date (year, month, and day, with no time).
  18. 18. Newtypes in HTML5 <inputtype='time' /> A control for entering a time value with no time zone.
  19. 19. Newtypes in HTML5 <inputtype='datetime-local' /> A control for entering a date and time (hour, minute, second, and fraction of a second), with no time zone.
  20. 20. Newtypes in HTML5 <inputtype='month' /> A control for entering a month and year, with no time zone.
  21. 21. Newtypes in HTML5 <inputtype='email' /> A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting.
  22. 22. Newtypes in HTML5 <inputtype='search' /> A single-line text field for entering search strings; line-breaks are automatically removed from the input value.
  23. 23. Newtypes in HTML5 <inputtype='url' /> A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. Line- breaks and leading or trailing whitespace are automatically removed from the input value.
  24. 24. Newtypes in HTML5 <inputtype='file' /> A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
  25. 25. HalfwayThrough
  26. 26. Newtypes in HTML5 <inputtype='number' /> A control for entering a floating point number.
  27. 27. Newtypes in HTML5 <inputtype='range' /> A control for entering a number whose exact value is not important. - min: 0 - max: 100 - step: 1
  28. 28. Newtypes in HTML5 <inputtype='tel' /> A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced.
  29. 29. Newtypes in HTML5 <inputtype='color' /> A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text.
  30. 30. Newtypes in HTML5 <inputtype='week' /> A control for entering a date consisting of a week-year number and a week number with no time zone.
  31. 31. The slideswill be uploaded for later
  32. 32. attributes
  33. 33. autocomplete off/ on » form » input
  34. 34. autofocus Specify a control that should have focus as soon as the page loads.
  35. 35. autosave uuid » search Persist a search term across across page loads
  36. 36. form form id » input ... <form id=neat> </form> ... <input form='neat' />
  37. 37. formmethod GET/ POST » input <form method='post'> <input type='submit' /> <input type='submit' formmethod='get' value='GET!' /> </form> » post The data from the form is included in the body of the form and is sent to the server. » get The data from the form are appended to the form attribute URI and is sent to the server.
  38. 38. formnovalidate true / false » input [submit]
  39. 39. formtarget » input [submit] » _self » _blank » _parent » _top
  40. 40. max / min » input [numeric, date-time] the max / min value that can be submitted
  41. 41. pattern » input [ text, search, tel, url or email] <input type='text' required pattern='d{3}[-]d{3}[-]d{4}' title='###-###-####' /> A regular expression that the control's value is checked against.
  42. 42. placeholder » input A hint to the user of what can be entered in the control. <label> Email <input placeholder="e.g. aaron@ivorypenguin.com" /> </label>
  43. 43. Do notreplace <label>with placeholder
  44. 44. required » input <input required />
  45. 45. spellcheck true / false <textarea spellcheck='false'> </textarea>
  46. 46. list <div>Employee name:</div> <input list="employees" /> <datalist id="employees"> <option value="Aaron"> <option value="Adam"> <option value="Andrea"> <option value="Jacob"> <option value="Jessica"> <option value="Ryan"> <option value="Sean"> </datalist>
  47. 47. CSS
  48. 48. cssvalidation input:focus:valid { background: rgba(0, 255, 0, .2); } input:invalid { background: rgba(255, 0, 0, .2); } html <input type="email" required /><br /> <input type="email" required /><br /> <input type="email" /><br /> <input type="submit" />
  49. 49. css ::after html <form> <input type="checkbox" id="agreement" required /> <label for="agreement">Do you agree to the terms?</label> <br /> <input type="submit" /> </form> css input:required ~ label::after { content: ' *'; color: red; }
  50. 50. Atthe Mountains of Madness <ul class="nav nav-pills nav-stacked"> <li><input type="checkbox" id="nav1"><label for="nav1">Hello</label> <ul class="nav"> <li><a href="#">Friends</a></li> <li><a href="#">Countrymen</a></li> <li><a href="#">Romans</a></li> </ul> </li> ... </ul>
  51. 51. .nav-pills>li>ul { margin-left: 2em; } .nav-pills>li>label { border-radius: 4px; } .nav>li>label { position: relative; display: block; padding: 10px 15px; color: #dd4814; text-decoration: none; cursor: pointer; } .nav>li.active>label { background-color: #dd4814; color: white; } .nav>li>label:hover { background-color: #eeeeee; }
  52. 52. .nav>li>input[type="checkbox"]:checked ~ label { font-weight: bolder; } .nav>li>input[type="checkbox"]{ display: none; } .nav>li>input[type="checkbox"] ~ ul { visibility: hidden; height: 0; } .nav>li>input[type="checkbox"]:checked ~ ul{ visibility: visible; height: auto }
  53. 53. Beyondthe Threshold <ul class="nav nav-pills nav-stacked"> <li><input type="radio" id="nav1"><label for="nav1">Hello</label> <ul class="nav"> <li><a href="#">Friends</a></li> <li><a href="#">Countrymen</a></li> <li><a href="#">Romans</a></li> </ul> </li> ... </ul>
  54. 54. .nav-pills>li>ul { margin-left: 2em; } .nav-pills>li>label { border-radius: 4px; } .nav>li>label { position: relative; display: block; padding: 10px 15px; color: #dd4814; text-decoration: none; cursor: pointer; } .nav>li.active>label { background-color: #dd4814; color: white; } .nav>li>label:hover { background-color: #eeeeee; }
  55. 55. .nav>li>input[type="radio"]:checked ~ label { font-weight: bolder; } .nav>li>input[type="radio"]{ display: none; } .nav>li>input[type="radio"] ~ ul { visibility: hidden; height: 0; } .nav>li>input[type="radio"]:checked ~ ul{ visibility: visible; height: auto }
  56. 56. http://aaronmaturen.com/list
  57. 57. JavaScript
  58. 58. Good Idea using AngularJS / Backbone / EmberJS ... forms allow user input and you can bind models to them
  59. 59. Bad Idea using onclick / onsubmit / onchange ... at least use jQuery and seperate the responsibilities
  60. 60. Questions? aaron@svsu.edu @atmaturenhttp://www.aaronmaturen.com/forms

×