Download
1 / 31
320 likes | 564 Views
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
E N D
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 • <output> allows you to display the result of a calclationdone in html5
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 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.
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
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 • <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: none;} • Add this code to your css styles. This will change the styling of the input boxes for validation.
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_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="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 • 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 • <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.
