HTML 5 Form steps - PowerPoint PPT Presentation

html 5 form steps n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML 5 Form steps PowerPoint Presentation
Download Presentation
HTML 5 Form steps

play fullscreen
1 / 31
HTML 5 Form steps
195 Views
Download Presentation
metea
Download Presentation

HTML 5 Form steps

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HTML 5 Form steps Steps for html 5 form presentation

  2. New Form elements • There are three new form elements in html 5 they are • <datalist> allows you to make a easy option menu • <keygen> will create a private and public key to be used to authenticate a user • <output> allows you to display the result of a calclationdone in html5

  3. New form attributes There are 16 new attributes in HTML5 they are height and width list min and max multiple pattern (regexp) placeholder required step • autocomplete • autofocus • form • formaction • formenctype • formmethod • formnovalidate • formtarget

  4. Firefox stripped form

  5. Span tags • <span class="form_hint">Proper format "name@something.com"</span> • Add this under your email input. This will make sure email is in the right format. • <span class="form_hint">Proper format 555-555-1212</span> • This goes under the phone input to make sure the phone number is in right format. • <li> • <label for=“color”>Whats your favorite color?</label> • <input type=“color” name=“color”> • </li> • Add this code right under the birthday code.

  6. span tags • <label for="email">Email:</label> • <input type="email" name="email" placeholder="john_doe@example.com" required /> • <span class="form_hint">Proper format "name@something.com"</span> • </li> • <li> • <label for="tel">Phone:</label> • <input name="tel" placeholder="555-555-1212" required pattern="(\d{3})-(\d{3})-(\d{4})"> • <span class="form_hint">Proper format 555-555-1212</span> • This is how your code should look after adding span tags

  7. Step 1-7(Chrome)

  8. Calculate line span tags • <input type="number" name="gpa" > • <span class="form_hint">Proper format: Enter the GPA that was calulated</span> • Add the following code at the end of your html calculate functions to add a span tag

  9. Calculate span tag • <li> • <input type="number" name="Input1" > • <span class="form_hint">Proper format 3.0 for a "B" 3.5 for a "B+"</span><br> • <input type="number" name="Input2" > • <span class="form_hint">Proper format 3.0 for a "B" 3.5 for a "B+"</span><br> • <input type="number" name="Input3" > • <span class="form_hint">Proper format 3.0 for a "B" 3.5 for a "B+"</span> • = <output name="result" for="Input1 Input2 Input3"></output><br><br> • <label for="gpa">Enter Current GPA.</label> • <input type="number" name="gpa" > • <span class="form_hint">Proper format: Enter the GPA that was calulated</span> • </li>

  10. Focus Outline • *:focus {outline: none;} • Add this code to your css styles. This will change the styling of the input boxes for validation.

  11. Chrome date field

  12. Visual Styles • .contact_form input, .contact_formtextarea { • border:1px solid #aaa; • box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; • border-radius:2px; • padding-right:30px; • -moz-transition: padding .25s; • -webkit-transition: padding .25s; • -o-transition: padding .25s; • transition: padding .25s; • } • .contact_forminput:focus, .contact_formtextarea:focus { • background: #fff; • border:1px solid #555; • box-shadow: 0 0 3px #aaa; • padding-right:70px; • } • This goes into your css which will change more styles for input boxes to make your form look more clear.

  13. Calculate line

  14. Form hints • .form_hint { • background: #d45252; • border-radius: 3px 3px 3px 3px; • color: white; • margin-left:8px; • padding: 1px 6px; • z-index: 999; /* hints stay above all other elements */ • position: absolute; /* allows proper formatting if hint is two lines */ • display: none; • } • After adding this code to your css you will see the changes to the input boxes

  15. Form Hints

  16. Oninput • oninput="result.value=(parseFloat(Input1.value)+parseFloat(Input2.value)+parseFloat(Input3.value))/3"> • Add an oninput function within your form header code. This will be executed after the form is submitted. • Your code should look like this : • <form class="contact_form" action="#" method="post" name="contact_form" • oninput="result.value=(parseFloat(Input1.value)+parseFloat(Input2.value)+parseFloat(Input3.value))/3">

  17. oninput

  18. Input • This will work with the code that was added to the form header to due some math inside html. • <li> • <input type="number" name="Input1" > • <input type="number" name="Input2" > • <input type="number" name="Input3" > • = <output name="result" for="Input1 Input2 Input3"></output><br><br> • <label for="gpa">Enter Current GPA.</label> • <input type="number" name="gpa" > • </li>

  19. Read only pattern • <td> <input readonly="readonly" name="1.pid" value="H412"> • <td> <input name="1.pname" value="Floor lamp Ulke"> • <td> $<input type="number" min="0" step="0.01" name="1.pprice" value="49.99"> • <td> <button formnovalidate="formnovalidate" name="action" value="delete:1">Delete</button> • <tr> • <td> <input readonly="readonly" name="2.pid" value="FG28"> • <td> <input name="2.pname" value="Table lamp Ulke"> • <td> $<input type="number" min="0" step="0.01" name="2.pprice" value="24.99"> • <td> <button formnovalidate="formnovalidate" name="action" value="delete:2">Delete</button> • <tr> • <td> <input name="3.pid" value="" pattern="[A-Z0-9]+"> • <td> <input name="3.pname" value=""> • <td> $<input type="number" min="0" step="0.01" name="3.pprice" value=""> • <td> <button formnovalidate="formnovalidate" name="action" value="delete:3">Delete</button> • Readonly will choose what is able to be changed and what is read only.

  20. Read only

  21. Chrome (Finished form)

  22. Chrome (Continued)

  23. Firefox (Finished form)

  24. Firefox form(Continued)

  25. Internet explorer(Finished form)

  26. IE finished form (Continued)

  27. Opera(Finished form)

  28. Opera finished form(Continued)

  29. Safari finished form

  30. Safari finished form(Continued)

  31. Work Cited