Here is formFive, a polyfill for your forms that makes some HTML5 form features available on older browsers.
Download it! Demo (visit with a legacy browser)Want to make placeholders work on Internet Explorer? This plugin will provide you with a stylable placeholder text... even on password fields!
When used, your field will be automatically selected. Just use the autofocus attribute as it should and voilà.
Want multiple submit buttons with different settings (action, enctype, method, target)? No problem!
If you need any form element to be outside of the <form> tag boundaries and still work, just add an attribute and you're done!
Forms in HTML5 have a lot of very nice features, but unfortunately we often have to support older browsers. This polyfill checks for feature support and goes to work only if it has to. For instance, if a user is using Google Chrome, formFive won't do anything.
Add the script tag
<script src="/js/jquery.formFive.min.js"></script>
Call formFive
$('#form-id').formFive({
placeholder: true,
placeholderClass: 'phclass',
autofocus: true,
formaction: true,
formenctype: true,
formmethod: true,
formtarget: true,
formAttribute: true
});
Keep in mind that all the parameters are optional. For instance, if your just want to use the autofocus feature, call formFive this way :
$('#form-id').formFive({
autofocus: true
});
That's it! Of course you have to use the normal HTML5 attributes required for this to work.
<input type="text" placeholder="The placeholder text" />
By default, formFive adds a class to the input when it contains a placeholder text (so you can style how it looks). The default class is "placeholder", but you can specify a new class name by setting the placeholderClass option.
<input type="text" autofocus="autofocus" />
<input type="submit" formaction="/otherpage.html" />
<input type="submit" formenctype="multipart/form-data" />
<input type="submit" formmethod="get" />
<input type="submit" formtarget="_blank" />
<input type="text" form="form-id" />
Use the form attribute on an element outside of the boundaries of the <form> tag. That element will be included when the form submits.
Want to have more details about the options? See the code? Fork it? Visit the formFive GitHub repository.