html 5 form steps
Download
Skip this Video
Download Presentation
HTML 5 Form steps

Loading in 2 Seconds...

play fullscreen
1 / 31

HTML 5 Form steps - PowerPoint PPT Presentation


  • 160 Views
  • Uploaded on

HTML 5 Form steps. Steps for html 5 form presentation. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML 5 Form steps' - metea


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html 5 form steps

HTML 5 Form steps

Steps for html 5 form presentation

new form elements
New Form elements
  • There are three new form elements in html 5 they are
  • allows you to make a easy option menu
  • will create a private and public key to be used to authenticate a user
  • allows you to display the result of a calclationdone in html5
new form attributes
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
span tags
Span tags
  • Proper format "[email protected]"
  • Add this under your email input. This will make sure email is in the right format.
  • Proper format 555-555-1212
  • This goes under the phone input to make sure the phone number is in right format.
  • Add this code right under the birthday code.
span tags1
span tags
  • Proper format "[email protected]"
  • Proper format 555-555-1212
  • This is how your code should look after adding span tags
calculate line span tags
Calculate line span tags
  • Proper format: Enter the GPA that was calulated
  • Add the following code at the end of your html calculate functions to add a span tag
calculate span tag
Calculate span tag
  • Proper format 3.0 for a "B" 3.5 for a "B+"
  • Proper format 3.0 for a "B" 3.5 for a "B+"
  • Proper format 3.0 for a "B" 3.5 for a "B+"
  • =

  • Proper format: Enter the GPA that was calulated
focus outline
Focus Outline
  • *:focus {outline: none;}
  • Add this code to your css styles. This will change the styling of the input boxes for validation.
visual styles
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.
form hints
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
oninput
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 :
  • oninput="result.value=(parseFloat(Input1.value)+parseFloat(Input2.value)+parseFloat(Input3.value))/3">
input
Input
  • This will work with the code that was added to the form header to due some math inside html.
  • =

read only pattern
Read only pattern
  • $
  • $
  • $
  • Readonly will choose what is able to be changed and what is read only.
ad