Download - Forms in html5
![Page 1: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/1.jpg)
What are Forms
What are forms?
- HTML Forms are required when you want tocollect some data from the site visitor. For exampleregistration information: name, email address,credit card, etc.
Form elements are like text fields, textarea fields,drop-down menus, radio buttons, checkboxes, etc.which are used to take information from the user.
![Page 2: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/2.jpg)
Most frequently used form attributes name: This is the name of the form. action: Here you will specify any script URL
which will receive uploaded data.method: Here you will specify method to be
used to upload data. It can take various values but most frequently used are GET and POST.
target: It specifies the target page where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
![Page 3: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/3.jpg)
![Page 4: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/4.jpg)
Examples- http://www.eightonefive.com/code/form5/index
.php
- http://www.deque.com/padam/demo-accessible-client-side-form-validation-with-html5.html
- http://www.wufoo.com/html5/example/
![Page 5: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/5.jpg)
HTML5 Forms• New input types• New rendering• New input features
EX: Placeholder Text, AutoFocus
![Page 6: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/6.jpg)
Input example.
<input type="_________" /> <input type="_________"/>
checkboxradiosubmitresetimagebutton
textpasswordhiddenfile
emailTelurlsearchcolornumberrangedatetime*
![Page 7: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/7.jpg)
![Page 8: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/8.jpg)
![Page 9: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/9.jpg)
[No unique keyboard for Date/Time]
Chrome for Android improves the story,but only available to fraction of Android users.
![Page 10: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/10.jpg)
Enter your email: <input type="email" placeholder="Enter your email" required title="Please enter your email" /><input type="submit" value="Submit" />
![Page 11: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/11.jpg)
New Attributes• More control over input
behaviorStill no JavaScriptImproved usability
• Attributes: Placeholder Autofocus Max Length List AutoComplete Required Pattern Spellcheck
– NoValidate– FormNoValidate– Accept– Multiple– Min/Max– Step
![Page 12: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/12.jpg)
Patern - html5pattern.com• Change message
In Chrome, use input title attribute(Not FF, O, S)
• Pattern attribute
![Page 13: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/13.jpg)
HTML 5 FORMS CSS STYLEShttp://www.sitepoint.com/html5-forms-css/
![Page 14: Forms in html5](https://reader035.vdocuments.mx/reader035/viewer/2022062400/589efe9c1a28ab06368b5e27/html5/thumbnails/14.jpg)
Resourseshttp://diveintohtml5.info/forms.html
http://www.w3.org/TR/html5/forms.html
http://www.w3schools.com/html/html_form_attributes.asp
html5pattern.com - Paterns in Html 5
http://www.wufoo.com/html5 - Browser support input types
http://www.wufoo.com/html5/example/
http://webdesign.tutsplus.com/tutorials/bring-your-forms-up-to-date-with-css3-and-html5-validation--webdesign-4738
http://www.html5rocks.com/en/tutorials/forms/html5forms/
http://webdesign.tutsplus.com/tutorials/bring-your-forms-up-to-date-with-css3-and-html5-validation--webdesign-4738
http://html5doctor.com/css3-pseudo-classes-and-html5-forms/