Im nächsten Artikel erfahren Sie mehr über die Verwendung von HTML5-Bildschaltflächen.
Aufgabe: Wir machen das Bild so, dass es als Schaltfläche fungiert. Wenn der Benutzer auf die Schaltfläche klickt, wird die
Das Formular wird an den Server gesendet. Schauen wir uns das an.
Was ist eine Bildschaltfläche?
Bildschaltflächen werden erstellt, indem das
-Tag innerhalb des
-Tags platziert wird, wodurch eine anklickbare HTML-Schaltfläche mit eingebettetem Bild erstellt wird.
Durch die Verwendung des
Syntax
Folgend ist die Syntax für <img src=”..” alt=”..”>
-Tag
Eine anklickbare Schaltfläche wird durch das Tag definiert. Sie können Text (sowie Tags wie , , , -Elements, das ist nicht möglich!
Sehen wir uns die Beispiele zum Verständnis der Bildschaltfläche mit HTML5 an.
Beispiel 1
Im folgenden Beispiel erstellen wir eine einfache Bildschaltfläche.
<!DOCTYPE html>
<html>
<body>
<p>Click On The Image</p>
<button onclick="JavaScript:alert('DONT HUNT ANIMALS')">
<img style="max-width:90%" style="max-width:90%" src="https://www.tutorialspoint.com/coffeescript/images/coffeescript.jpg" alt="animal">
<br>LOVE ANIMALS</button>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die die Bildschaltfläche mit Text darauf sowie eine Eingabeaufforderung auf der Webseite anzeigt.
Wenn der Benutzer auf die Bildschaltfläche klickt, wird das Ereignis ausgelöst und eine Warnung „Keine Tiere jagen“ angezeigt.
Beispiel 2
Im folgenden Beispiel haben wir mit
<!DOCTYPE html>
<html>
<body style="text-align: center">
<h2>creating an image Button with HTML5?</h2>
<form>
USERNAME:
<input type="name" /><br><br>
PASSWORD:
<input type="password" /><br><br>
<input type="image" src=
"https://www.tutorialspoint.com/images/logo.png"
height="80px" width="110px"
alt="submit" />
</form>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die das Eingabefeld für Benutzername und Passwort zusammen mit einer Bildschaltfläche auf der Webseite anzeigt. Wenn der Benutzer auf die Bildschaltfläche klickt, wird das Formular an den Server gesendet.
Beispiel 3
Im folgenden Beispiel verwenden wir Platzhalter und eine Bildschaltfläche mit <!DOCTYPE html>
<html>
<head>
<style>
input[type='image'] {
width: 80px;
}
</style>
</head>
<body style="text-align: center">
<p>SIGN IN </p>
<div>
<input type="email"
placeholder="Enter your email Address" />
<br><br>
</div>
<input type="image" id="image" alt="Login"
src="https://www.tutorialspoint.com/images/logo.png">
</body>
</html>
Beim Ausführen des obigen Skripts öffnet sich das Ausgabefenster und zeigt die Anmeldung mit einem Platzhalter für die E-Mail-Eingabe sowie eine Bildschaltfläche auf der Webseite an.
Beispiel 4
Im Folgenden erstellen wir eine Bildschaltfläche, fügen aber das -Tag ein
<button type = "submit" name = "learn" value = "myimage">
<p>Tutorials for all</p>
<img src="https://www.tutorialspoint.com/latest/inter-process-communication.png " / alt="Bildschaltflächen mit HTML5" >
</button>
Nachdem das obige Skript ausgeführt wurde, wird eine Bildschaltfläche mit Text auf der Webseite generiert. Das obige ist der detaillierte Inhalt vonBildschaltflächen mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
