Detailliertes Beispiel für die Verwendung von CSS zur Verschönerung von HTML-Formular-Steuerelementen (Formularverschönerung)

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

Implementierung von Docker zum Aufbau eines privaten Warehouse (Registrierung und Harbor)

Da immer mehr Docker-Images verwendet werden, mus...

Beispiel-Tutorial zur Verwendung der Summenfunktion in MySQL

Einführung Heute werde ich die Verwendung der Sum...

CocosCreator Erste Schritte Tutorial: Netzwerkkommunikation

Übersicht zur Netzwerkkommunikation Bei der Entwi...

So verhindern Sie doppelte Übermittlungen in einem JQuery-Projekt

In neuen Projekten kann Axios doppelte Übermittlu...

Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.16 winx64.zip

In diesem Artikel wird der spezifische Code der I...

Acht Implementierungslösungen für domänenübergreifendes JS-Frontend

Inhaltsverzeichnis 1. JSONP domänenübergreifend 2...

Einige Fähigkeiten, die Sie beim Erstellen von Webseiten kennen müssen

1. Z-Index ist in IE6 ungültig. In CSS wird die E...

MySQL5.7.27-winx64 Version Win10 Download- und Installations-Tutorial-Diagramm

MySQL 5.7-Installation Wir lernen in der Schule M...

JS realisiert den automatischen Wiedergabeeffekt von Bildern

In diesem Artikel wird der spezifische Code von J...

So zeigen Sie Anwendungsprotokolle von Docker-Containern an

Docker-Attach-Befehl docker attach [options] 容器st...

Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.

Inhaltsverzeichnis Docker-System df Docker-System...

15 Vim-Kurzreferenztabellen, die Ihnen helfen, Ihre Effizienz um das N-fache zu steigern

Ich habe im ersten Halbjahr des letzten Jahres an...

Interviewer stellen häufig Fragen zum Lebenszyklus von React

React-Lebenszyklus Zwei Bilder zum besseren Verst...

Detaillierte Erklärung einer Methode zum Umbenennen von Prozeduren in MySQL

Kürzlich habe ich die Funktion zum Umbenennen ges...

Implementierung der Docker-Batch-Container-Orchestrierung

Einführung Der Dockerfile-Build-Ausführungsvorgan...