Detailliertes Beispiel für die Verwendung von CSS zur Verschönerung von HTML-Formular-Steuerelementen (Formularverschönerung)
|
1. Grundlegende Syntaxstruktur der HTML-Senden- und unteren Schaltfläche 1. HTML-Senden-Schaltfläche Durch Festlegen von type="submit" im Eingabetag kann dieses Formularsteuerelement als Schaltfläche festgelegt werden. Code der Schaltfläche „Senden“: Code kopieren Der Code lautet wie folgt:<input name="" type="submit" value="Senden" /> Screenshot des Effekts der Schaltfläche „Senden“
Screenshot des HTML-Senden-Button-Effekts 2. HTML-Schaltfläche unten Wenn Sie im Eingabetag type="bottom" festlegen, wird dieses Formularsteuerelement auch als Schaltfläche festgelegt. Code der unteren Schaltfläche: Code kopieren Der Code lautet wie folgt:<input name="" type="button" value="Senden" /> Screenshot der unteren Schaltfläche:
Screenshot des HTML-Button-Effekts 2. Der Unterschied zwischen HTML-Senden und unterer Schaltfläche type=button ist einfach eine Schaltflächenfunktion type=submit dient zum Senden des Formulars Personen, die an der Web-Benutzeroberfläche arbeiten, sollten jedoch beachten, dass die Verwendung der Funktion „Senden“ die Benutzerfreundlichkeit der Seite verbessern kann: Nach der Verwendung der Übermittlungstaste unterstützt die Seite die Eingabetastenbedienung über die Tastatur, vielen Websoftwareentwicklern fällt die Einheitlichkeit der Übermittlung jedoch möglicherweise nicht auf. Nach der Verwendung der Schaltfläche unterstützt die Seite häufig die Eingabetaste nicht. Daher muss die Eingabetaste unterstützt werden und eine Übermittlung muss festgelegt werden. Standardmäßig funktioniert die Eingabetaste bei der ersten Übermittlung der Seite. Code kopieren Der Code lautet wie folgt:<input type="submit" name="b1" value="Senden" onClick="bt_submit_onclick()"> Gehen Sie nach der Ausführung von onClick zur Aktion. Kann automatisch ohne onClick übermittelt werden. Daher ist onclick hier nicht erforderlich. Code kopieren Der Code lautet wie folgt:<input type="button" name="b1" value="Senden" onClick="bt_submit_onclick()"> Nach der Ausführung von onClick wird die Sprungdatei in der js-Datei gesteuert. Zum Senden ist onClick erforderlich. Zum Beispiel: 1. onclick="form1.action='a.jsp';form1.submit();" Dies implementiert die Übermittlungsfunktion. 2. Tastencode Code kopieren Der Code lautet wie folgt:<Formularname="Formular1" Methode="Post" Aktion="<a href="http://www.css.com">http://www.css.com</a>"> <input Typ="Schaltfläche" Name="Schaltfläche" Wert="Schaltfläche" beiKlick="Senden()"> </form>
Schaltflächen-Screenshot 3. HTML-Code der Schaltfläche Code kopieren Der Code lautet wie folgt:<Eingabetyp="Schaltfläche" Name="Schaltfläche" Wert="Schaltfläche" onClick="javascript:windows.location.href="Ihre URL""> 3. HTML-Senden und untere Schaltfläche verschönern CSS p-Layout Zuerst bereiten wir das Schaltflächenbild für die Schaltflächenverschönerung vor, fügen der Eingabe- oder unteren Schaltflächensteuerung einen Klassenstil hinzu, stellen den Schaltflächenhintergrund auf das verschönerte Bild ein und setzen den Rahmen auf Null sowie Breite und Höhe. 1. Verschönern Sie den HTML-Button unten 1) Bildmaterial Sie können das Bild speichern als
Bildknopfmaterial verschönern 2) Entsprechender vollständiger HTML-Quellcode: Code kopieren Der Code lautet wie folgt:<!DOCTYPE html> <html> <Kopf> <title>Online-Demonstration zur Schaltflächenverschönerung – www.css.com</title> <Stil> html{Breite:100%;Höhe:100%;} body{background:#fff;font-size:18px;font-family:"Arial","Tahoma","Microsoft YaHei","YaHei"; Zeilenhöhe: 18px; Polsterung: 0px; Rand: 0px; Textausrichtung: Mitte} div{padding:18px} img{border:0px;vertical-align:middle;padding:0;margin:0} Eingabe, Schaltfläche {Schriftfamilie: "Arial", "Tahoma", "Schriftfamilie": "","Schriftfamilie"; Rahmen: 0; vertikale Ausrichtung: Mitte; Rand: 8px; Zeilenhöhe: 18px; Schriftgröße: 18px} .btn{Breite:140px;Höhe:36px;Zeilenhöhe:18px;Schriftgröße:18px; Hintergrund: URL ("bg26.jpg") keine Wiederholung links oben; Farbe: #FFF; Polsterung unten: 4px} </Stil> </Kopf> <Text> <p> <formid="form1"name="form1"method=""action="<a href="http://www.css.com/"target="_blank">http://www.css.com/"target="_blank</a>"> <div> <inputtype="button"class="btn"value="button"onmouseover="this.style.backgroundPosition='left-36px'" onmouseout="diese.style.backgroundPosition='lefttop'"/> </div> </form> </p> </body> </html> 3) Screenshot des unteren Effekts
Screenshot des unteren Verschönerungseffekts 2. Verschönern Sie den HTML-Senden-Button 1) Bildmaterial Sie können das Bild speichern als
Button Bildmaterial Rechtsklick Speichern unter Verwenden 2) Entsprechender vollständiger HTML-Quellcode: Code kopieren Der Code lautet wie folgt:<!DOCTYPE html> <html> <Kopf> <title>Online-Demo zur Verschönerung der Schaltfläche „Senden“ – www.css.com</title> <!-- <a href="http://www.css.com">www.css.com</a> --> <Stil> html { Breite:100%; Höhe:100%; } body { Hintergrund: #fff; Schriftgröße: 18px; Schriftfamilie: „Arial“, „Tahoma“, „chinesisches Eis“, „chinesisches Eis“; Zeilenhöhe: 18px; Polsterung: 0; Rand: 0; Textausrichtung: Mitte; } div { padding:18px } img { Rahmen:0px; vertikale Ausrichtung:Mitte; Polsterung:0px; Rand:0px; } Eingabe, Schaltfläche { Schriftfamilie: „Arial“, „Tahoma“, „微软雅黑“, „雅黑“; Rahmen: 0; vertikale Ausrichtung: Mitte; Rand: 8px; Zeilenhöhe: 18px; Schriftgröße: 18px } .btns { Breite: 143px; Höhe: 40px; Hintergrund: URL("bg11.jpg") keine Wiederholung links oben; Farbe: #FFF; } </Stil> </Kopf> <Text> <p> <form id="form1" name="form1" method="" action="<a href="http://www.css.com/">http://www.css.com/</a>" target="_blank"> <div> <input Typ="einreichen" Klasse="btns" onmouseover="this.style.backgroundPosition='left -40px'" onmouseout="this.style.backgroundPosition='left top'" value="Senden" /> </div> </form> </p> </body> </html> 3) Screenshot des Submit-Button-Effekts
Screenshot der verschönerten HTML-Einreichung |
<<: MySQL Multi-Instance-Bereitstellungs- und Installationshandbuch unter Linux
>>: Nicht alle Pop-ups sind betrügerisch. Tipps zum Entwerfen von Website-Pop-ups
Artikel empfehlen
So verwenden Sie Node-Scaffolding zum Erstellen eines Servers zur Implementierung der Token-Verifizierung
Inhalt Verwenden Sie Scaffolding, um schnell ein ...
Der Prozess der Installation von SVN auf Ubuntu 16.04.5LTS
Dieser Artikel stellt kurz den Prozess der Einric...
Code zum Ausrichten von Kontrollkästchen und Radiotext im Formular
Ausrichtungsprobleme wie type="radio" un...
Docker-Container-Protokollanalyse
Containerprotokolle anzeigen Verwenden Sie zunäch...
HTML+Sass implementiert HambergurMenu (Hamburger-Menü)
Vor ein paar Tagen habe ich mir ein Video von ein...
Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro
Inhaltsverzeichnis 1. Konfigurieren Sie das Vue-F...
Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8
1. Erstellen Sie zunächst den entsprechenden Ordn...
MySQL-Abfrageoptimierung mit benutzerdefinierten Variablen
Inhaltsverzeichnis Optimieren von Sortierabfragen...
So implementieren Sie HTML, um zu erkennen, ob die Eingabe abgeschlossen ist, und den nächsten Inhalt automatisch einzufügen
Im vorherigen Artikel haben wir die einfache Erke...
So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist
Apache Tika ist eine Bibliothek zur Dateityperken...
Beispielcode zur Implementierung eines Karten-Wasserfall-Layouts mit CSS3-Spalten
In diesem Artikel wird der Beispielcode einer CSS...
Installation und Verwendung der MySQL MyCat-Middleware
1. Was ist mycat Ein vollständig Open Source-Groß...
Fragen zum Vorstellungsgespräch zu JS 9 Promise
Inhaltsverzeichnis 1. Mehrere .catch 2. Mehrere ....
Detaillierte Erläuterung der Wissenspunkte zur Verwendung von TEXT/BLOB-Typen in MySQL
1. Der Unterschied zwischen TEXT und BLOB Der ein...
Reines CSS, um die Textsymbolfunktion zu erreichen, indem das erste Zeichen der Zeichenfolge verwendet wird
So implementieren Sie Textsymbole über CSS /*Symb...