jqTransform verschönert die form_jquery

jqTransform ist ein von DFC Engineering geschriebenes Plug-in im jQuery-Stil. Es ist einfach zu verwenden und kann alle Formularelemente einschließlich Eingabe, Radio, Textbereich, Auswahl und Kontrollkästchen verschönern.
Operationsrendering:

Verwendung:
1. Fügen Sie Javascript-Referenzen und CSS-Dateireferenzen hinzu

<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. HTML-Formularstruktur schreiben

<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. Rufen Sie das Plug-in auf

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

Es kommt ein schönes Formular heraus, das jedoch einige Mängel aufweist. Die Unterstützung chinesischer Formularschaltflächen durch jqTransform ist beispielsweise nicht ideal, wenn der Wert der Schaltfläche auf Englisch ist, aber mehrere englische Wörter wie Wenn der Wert auf Chinesisch ist, wird er noch schlimmer. Die beiden Wörter „Senden“ werden sicherlich nicht den gewünschten Effekt haben. Die Lösung besteht darin, mit dem CSS-Stil zu beginnen und button.jqTransformButton in der Datei jqtransform.css zu finden, die sich wahrscheinlich in Zeile 14 befindet. Beitreten:

width:auto; 
white-space: nowrap; 

Stellen Sie die Breite der Schaltfläche auf „Automatisch“ ein und zeigen Sie sie in einer einzigen Zeile an. Natürlich können Sie auch eine feste Breite festlegen und die CSS-Datei ändern, um den Formularstil anzupassen.

Das Obige soll Ihnen erklären, wie Sie das Formular verschönern können, nämlich die Verwendung eines einfachen Plug-Ins im jQuery-Stil, um die Formularelemente zu verschönern. Ich hoffe, Sie können es auf Ihre eigene Website anwenden Seiten.