jQuery.html5form
첨부파일 https://eond.com/jquery/361758

20150831_3.png

jquery.html5form.zip

http://codepen.io/eond/pen/WQNoPE

Setup

 


//jQuery library (Works with jQuery 1.4 and higher)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
//jQuery.html5form plugin
<script src="http://html5form.googlecode.com/svn/trunk/jquery.html5form-1.5-min.js"></script>
    
<script>
    $(document).ready(function(){
        $('#myform').html5form();    
    });
</script>

 

html5form v1.5

12-04-2011 - Added Support input type="image" & input type="button" (Thanks to @zguillez)

 

How does it work?

Just create your form according the HTML5 syntax and the script will execute itself.
It does not require extra classes. The plugin gets all the information from the HTML source.
Runs automatically when detects Internet Explorer, Opera or Mozilla Firefox.
If you want to get full browser and customization support read the Plugin Features section below.

HTML5 Features.

Attribute placeholder
<input type="text" placeholder="Full Name"/>
The placeholder attribute provides a hint that describes the expected value of an input field.
The hint is displayed in the input field when it is empty, and disappears when the field gets focus.
Email type attribute
<input type="email" name="email" id="email"/>
The email type is used for input fields that should contain an e-mail address.
The value of the email field is automatically validated when the form is submitted.
Textarea maxlength attribute
<textarea maxlength="60" name="comment" id="comment"/>
Defines the maximum number of characters allowed in the textarea.
Required attribute
<input type="text" name="lastname" required />
The required attribute specifies that an input field must be filled out before submitting.
Url type attribute
<input type="url" name="website" placeholder="http://"/>
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.
Autocomplete attribute
<input type="text" name="lastname" autocomplete="off"/>
The autocomplete attribute specifies that the form or input field should have an autocomplete function.
When the user starts to type in an autocomplete field, the browser should display options to fill in the field.
You can turn it off now.

Plugin Features.

<script>
    
    $('#myform').html5form({
        
        async : false, // cancels the default submit method.
        method : 'GET', // changes the request method.
        action : 'respuesta.php', // changes the action method.
        responseDiv : '#respuesta' // a content div to get the callback function response.
        
    })
    
</script>
Customize handling behavior.
The form sends through an asynchronous Ajax request by default.
The plugin automatically gets method and action attributes declared on the form.
To change any of this behavior just follow these rules.
Multiple forms.
If you have more than one form, you can set different options for each one, just call the .html5form() method by the '#id'.
In case of 'form' label, the plugin will handle each form independently but the options will be equal for all, the best way to do it is to call each form separately.
<script>

    $('#myform_one').html5form({
        method: 'POST',
    });

    $('#myform_two').html5form({
        method: 'GET'
    });

</script>
Text Colors.
Allows you to customize the default color of input text and placeholders.
<script>
    
    $('#myform').html5form({
    
        colorOn: '#999',
        colorOff: '#000'
    
    })
    
</script>
<script>
    
    //default English messages method
    $('#myform').html5form({
    
        messages : 'de', // Options 'en', 'es', 'it', 'de', 'fr', 'nl', 'be', 'br'
        responseDiv : '#response'
    
    })
    
    //default Italian messages method
    $('#myform').html5form({
    
        messages: 'it',
        responseDiv : '#response'
    
    })
    
    //custom message method, this one takes precedence over default messages
    $('#myform').html5form({
    
        emptyMessage : 'This is a required field',
        emailMessage : 'This email address is not correct, please try again',
        responseDiv : '#response'
    
    })
    
</script>
Error Messages.
The plugin can display a descriptive error in case of empty fields or invalid email address. This is set to false by default.
The plugin returns default warnings in English, Spanish, Italian, German, French, Dutch & Portuguese if property messages is set with the chosen lenguage.
Another method for doing so is to assign customized values for each response in emailMessage and emptyMessage properties.
This funcionality has 3 conditions:
  • The request must be asynchronous.
  • Each input / textarea field must have a title.
  • The responseDiv must be declared.
<script>

    $('#myform').html5form({
        labels: 'hide'
    });

</script>
Hiding labels.
The placeholder attribute of HTML5 is certainly very intuitive and easy to implement.
But our site must be ready to recieve users without enabled JavaScript in their browsers.
We recommend keeping label tags to describe fields and we include a hiding method too.
Full browser support.
As we mentioned, WebKit browsers (Safari & Chrome) can handle webForms 2.0 forms without any help, they dont activate the plugin.
However, we can force it to work with all browsers to get additional customization.
<script>

    $('#myform').html5form({
        allBrowsers: true
    });

</script>

html5form v1.5

12-04-2011 - Added Support input type="image" & input type="button" (Thanks to @zguillez)

 
 

Cross Browser Testing:

  • Internet Explorer: IE6+
  • Mozilla Firefox: 3.6+
  • Google Chrome: 10+
  • Apple Safari: 4+
  • Opera: 10+

Developer Version 1.5

 

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 5 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
62 [ionic] Ionic Javascript examples 2015/09/03 0
61 [Banner] scrollon.js 흐르는 배너 2015/09/03 0
60 [고급활용] 마우스를 올리면 배경그림에 블러 효과 주기 2015/09/03 0
59 [고급활용] SCSS를 활용한 스크롤 배너 2015/09/03 0
58 [고급활용] 일정 영역만 보여주고 클릭하면 펼치기 2015/09/03 0
57 [고급활용] 마우스 따라 이미지 캡션 이동하기 2015/09/03 0
56 [property] [jquery] size()와 length [1] 2015/08/11 0
55 [슬라이더 플러그인] slidejs 2015/09/03 0
54 [기초활용] [jQuery] 부드럽게 '위로 가기' 만들기 2015/09/03 0
53 [슬라이더 플러그인] simplyScroll v2 2015/09/02 0
52 [추천사이트] 자바스크립트 파일 압축 및 복원하기 (***.min.js 파일 만들기) 2015/09/02 0
51 [질문] 풀지 못한 과제 3가지 2015/09/01 0
현재글 [플러그인] jQuery.html5form 파일 2015/08/31 0
49 [고급활용] [jQuery] Form, input 체크 validator, value 체크 2015/09/01 0
48 [플러그인] jQuery Validation Plugin 파일 2015/08/31 0
47 [기초활용] [jQuery] 태그로 구분해서 a 태그 효과 다르게 주기 2015/08/31 0
46 [플러그인] jquery chart 모음 2015/08/27 0
45 [기초활용] Javascript vs jQuery 2015/08/27 0
44 [플러그인] jQuery Cycle Plugin, 이미지 롤링 2015/08/27 0
43 [추천사이트] jQuery 활용 추천 사이트 2015/08/27 0

해시태그 디렉터리