jqTransform beautifies the form_jquery

jqTransform is a jQuery style plug-in written by DFC Engineering. It is used to beautify form elements. It is easy to use and can beautify all form elements including input, radio, textarea, select, and checkbox.
Operation rendering:

Usage:
1. Add javascript references and css file references

<link rel="stylesheet" type="text/css" href="jqtransform.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jqtransform.js"></script> 

2. Write HTML form structure

<form class="jqtransform" action="#" method="post"> 
  <p><label>用户名：</label><input type="text" /></p> 
  <p><label>密码：</label><input type="password" /></p> 
  <p><label>性别：</label><input type="radio" name="sex" /> <label style="width:auto">男</label> 
 <input type="radio" name="sex" /> <label style="width:auto">女</label> </p> 
  <p><label>学历：</label> 
   <select> 
    <option value="1">博士</option> 
    <option value="2">硕士</option> 
    <option value="3">大学本科</option> 
    <option value="4">大专</option> 
    <option value="5">中技</option> 
   </select> 
  </p> 
  <p><label>短信订阅：</label><input type="checkbox" /> <label>开通短信订阅功能</label></p> 
  <p><label>备注：</label> 
  <textarea name="note" rows="6" cols="40"></textarea> 
  </p> 
  <p><label> </label><input type="submit" value="提交" /> <input type="reset" value="重置" /></p> 
</form> 

3. Call the plug-in

$('.jqtransform').jqTransform(); 

A beautiful form comes out, but it has some flaws. jqTransform’s support for Chinese form buttons under IE is not ideal. For example, when the value of the button is in English, it displays normally, but multiple English words such as value are Sure, I submit ! will cause the line to drop. If the value is in Chinese, it will be even worse. The two words "submit" will be arranged vertically. This is certainly not the effect I want. The solution is to start with the CSS style and find button.jqTransformButton in the jqtransform.css file, which is probably on line 14. Join:

width:auto; 
white-space: nowrap; 

Set the width of the button to automatic and display in a single line. Of course, you can also set a fixed width, and you can also modify the CSS file to customize the form style.

The above is to tell you how to beautify the form, which is to use a simple jQuery style plug-in to beautify the form elements. It is easy to use and simple. I hope you can apply it to your own web pages.