Html 5 form steps
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

HTML 5 Form steps PowerPoint PPT Presentation


  • 117 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

HTML 5 Form steps

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

  • <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


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


Firefox stripped form

Firefox stripped form


Span tags

Span tags

  • <span class="form_hint">Proper format "[email protected]"</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.


Span tags1

span tags

  • <label for="email">Email:</label>

  • <input type="email" name="email" placeholder="[email protected]" required />

  • <span class="form_hint">Proper format "[email protected]"</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


Step 1 7 chrome

Step 1-7(Chrome)


Calculate line span tags

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


Calculate span tag

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>


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.


Chrome date field

Chrome date field


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.


Calculate line

Calculate line


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


Form hints1

Form Hints


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 :

  • <form class="contact_form" action="#" method="post" name="contact_form"

  • oninput="result.value=(parseFloat(Input1.value)+parseFloat(Input2.value)+parseFloat(Input3.value))/3">


Oninput1

oninput


Input

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>


Read only pattern

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.


Read only

Read only


Chrome finished form

Chrome (Finished form)


Chrome continued

Chrome (Continued)


Firefox finished form

Firefox (Finished form)


Firefox form continued

Firefox form(Continued)


Internet explorer finished form

Internet explorer(Finished form)


Ie finished form continued

IE finished form (Continued)


Opera finished form

Opera(Finished form)


Opera finished form continued

Opera finished form(Continued)


Safari finished form

Safari finished form


Safari finished form continued

Safari finished form(Continued)


Work cited

Work Cited


  • Login