首页>>表单>>jQuery 表单输入提示，各种不同的项目(2013-12-21)

jQuery 表单输入提示，各种不同的项目

 本例用了比较多的js文件，请到演示页面查看源码

jQuery 表单输入提示，各种不同的项目
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="contentwrapper">  
  2.               
  3.             <form id="sampleform">  
  4.                 <table>  
  5.                     <tr>  
  6.                         <td><label for="input-name">Input type=text</label></td>  
  7.                         <td>  
  8.                             <input id="input-name" type="text"/>  
  9.                             <span class="helptext" data-for="#input-name">  
  10.                                 The username is <b>other</b> people's way of recognizing you around this website.  
  11.                             </span>  
  12.                         </td>  
  13.                     </tr>  
  14.                     <tr>  
  15.                         <td><label for="input-email">Input type=email</label></td>  
  16.                         <td>  
  17.                             <input id="input-email" type="email"/>  
  18.                             <span class="helptext" data-for="#input-email">  
  19.                                 <p>You can use <b>html</b> in these helpboxes.</p> Here's a <hr>:  
  20.                                 <hr>  
  21.                                 And here's is a <ul>:  
  22.                                 <ul>  
  23.                                     <li>One</li>  
  24.                                     <li>Two</li>  
  25.                                     <li>Three</li>  
  26.                                 </ul>  
  27.                                 <hr>  
  28.                             </span>  
  29.                         </td>  
  30.                     </tr>  
  31.                     <tr>  
  32.                         <td><label for="input-date">Input type=date</label></td>  
  33.                         <td>  
  34.                             <input id="input-date" type="date"/>  
  35.                             <span class="helptext" data-for="#input-date">  
  36.                                 Enter a date between the past and the future.  
  37.                             </span>  
  38.                         </td>  
  39.                     </tr>  
  40.                     <tr>  
  41.                         <td><label for="input-datetime">Input type=datetime</label></td>  
  42.                         <td>  
  43.                             <input id="input-datetime" type="datetime"/>  
  44.                             <span class="helptext" data-for="#input-datetime">  
  45.                                 Enter a date and time between the past and the future.  
  46.                             </span>  
  47.                         </td>  
  48.                     </tr>  
  49.                     <tr>  
  50.                         <td><label for="input-datetime-local">Input type=datetime-local</label></td>  
  51.                         <td>  
  52.                             <input id="input-datetime-local" type="datetime-local"/>  
  53.                             <span class="helptext" data-for="#input-datetime-local">  
  54.                                 Enter a local date and time between the past and the future.  
  55.                             </span>  
  56.                         </td>  
  57.                     </tr>  
  58.                     <tr>  
  59.                         <td><label for="input-file">Input type=file</label></td>  
  60.                         <td>  
  61.                             <input id="input-file" type="file"/>  
  62.                             <span class="helptext" data-for="#input-file">  
  63.                                 Please, upload a valid file like some kind of image or PDF.  
  64.                             </span>  
  65.                         </td>  
  66.                     </tr>                      
  67.                     <tr>  
  68.                         <td><label for="button-nouse">Input type=button</label></td>  
  69.                         <td>  
  70.                             <input type="button" id="button-nouse" value="No use"/>  
  71.                             <span class="helptext" data-for="#button-nouse">  
  72.                                 It's some button you don't have to click.  
  73.                             </span>  
  74.                         </td>  
  75.                     </tr>        
  76.                     <tr>  
  77.                         <td><label for="input-color">Input type=color</label></td>  
  78.                         <td>  
  79.                             <input type="color" id="input-color"/>  
  80.                             <span class="helptext" data-for="#input-color">  
  81.                                 Pick your favorite color!  
  82.                             </span>  
  83.                         </td>  
  84.                     </tr>        
  85.                     <tr>  
  86.                         <td><label for="input-image">Input type=image</label></td>  
  87.                         <td>  
  88.                             <input type="image" id="input-image" src="dist/img/arrow_left.png" alt="Ïmage"/>  
  89.                             <span class="helptext" data-for="#input-image">  
  90.                                 The image in this button isn't very imaginative but it gets the point across.  
  91.                             </span>  
  92.                         </td>  
  93.                     </tr>    
  94.                     <tr>  
  95.                         <td><label for="input-range">Input type=range</label></td>  
  96.                         <td>  
  97.                             <input type="range" id="input-range"/>  
  98.                             <span class="helptext" data-for="#input-range">  
  99.                                 Pick a value in this range.  
  100.                             </span>  
  101.                         </td>  
  102.                     </tr>   
  103.                     <tr>  
  104.                         <td><label>Input type=checkbox</label></td>  
  105.                         <td>  
  106.                             <label for="checkbox-travel-1"><input type="checkbox" name="checkbox-travel[]" id="checkbox-travel-1" value="1">By car</label>  
  107.                             <label for="checkbox-travel-2"><input type="checkbox" name="checkbox-travel[]" id="checkbox-travel-2" value="2">By bike</label>  
  108.                             <label for="checkbox-travel-3"><input type="checkbox" name="checkbox-travel[]" id="checkbox-travel-3" value="3">By boat</label>  
  109.                             <span class="helptext" data-for="[name='checkbox-travel[]']">  
  110.                                 You have multiple choices, please choose one or more.  
  111.                             </span>  
  112.                         </td>  
  113.                     </tr>  
  114.                     <tr>  
  115.                         <td>Input type=reset</td>  
  116.                         <td>  
  117.                             <input id="button-reset" type="reset" value="Reset">  
  118.                             <span class="helptext" data-for="#button-reset">  
  119.                                 Reset the form, nobody likes this button by the way. It's always being clicked on wh  
  120.                             </span>  
  121.                         </td>  
  122.                     </tr>  
  123.                     <tr>  
  124.                         <td>Input type=submit</td>  
  125.                         <td>  
  126.                             <button id="submit-signup" type="submit">OK, sign me up</button>  
  127.                             <span class="helptext" data-for="#submit-signup">  
  128.                                 Did you enter the correct data?  
  129.                             </span>  
  130.                         </td>  
  131.                     </tr>  
  132.                     <tr>  
  133.                         <td><label>Input type=radio</label></td>  
  134.                         <td>  
  135.                             <input type="radio" name="radio-newsletter" id="radio-newsletter-yes" value="yes">  
  136.                             <label for="radio-newsletter-yes">Yes</label>  
  137.                             <input type="radio" name="radio-newsletter" id="radio-newsletter-no" value="no">  
  138.                             <label for="radio-newsletter-no">No</label>  
  139.                             <span class="helptext" data-for="[name='radio-newsletter']">  
  140.                                 Tell us your gender so we can address you in polite manner.  
  141.                             </span>  
  142.                         </td>  
  143.                     </tr>  
  144.                     <tr>  
  145.                         <td><label for="options-gender">Select options</label></td>  
  146.                         <td>  
  147.                             <select id="options-gender">  
  148.                                 <option value="m">Male</option>  
  149.                                 <option value="f">Female</option>  
  150.                             </select>  
  151.                             <span class="helptext" data-for="#options-gender">  
  152.                                 Please make a choice.  
  153.                             </span>  
  154.                         </td>  
  155.                     </tr>        
  156.                       
  157.                     <tr>  
  158.                         <td><label for="textarea-remarks">Textarea</label></td>  
  159.                         <td>  
  160.                             <textarea id="textarea-remarks"></textarea>  
  161.                             <span class="helptext" data-for="#textarea-remarks">  
  162.                                 Please tell us what you think!  
  163.                             </span>  
  164.                         </td>  
  165.                     </tr>  
  166.                       
  167.                     <tr>  
  168.                         <td><label for="input-name-prefix">Input type=text and with class prefix</label></td>  
  169.                         <td>  
  170.                             <input id="input-name-prefix" type="text"/>  
  171.                             <span class="myprefix-helptext" data-for="#input-name-prefix">  
  172.                                 This box has another background color and no pushpin because of the class prefix   
  173.                             </span>  
  174.                         </td>  
  175.                     </tr>  
  176.                       
  177.                       
  178.                 </table>  
  179.             </form>  
  180.             
  181.         </div>  

 


原文地址:http://www.freejs.net/article_biaodan_195.html