Html 5 form steps
Download
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

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



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



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.



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 :

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

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

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




Chrome continued
Chrome (Continued)





Ie finished form continued
IE finished form (Continued)







ad