Dans le prochain article, nous découvrirons l'utilisation des boutons d'image HTML5.
tâche, nous faisons en sorte que l'image agisse comme un bouton. Lorsque l'utilisateur clique sur le bouton, le
Le formulaire est envoyé au serveur. Examinons-le.
Qu'est-ce qu'un bouton image
Les boutons d'image sont créés en plaçant la balise , ce qui crée un bouton HTML cliquable avec l'image intégrée.
En utilisant la balise
, nous pouvons inclure une image sur une page HTML. Les images ne sont pas réellement intégrées dans les pages Web, elles y sont connectées via des chemins prédéterminés. La balise se compose de deux attributs obligatoires, à savoir src et alt. .
Syntaxe
Voici la syntaxe de la balise
<img src="/static/imghwm/default1.png" data-src="https://www.tutorialspoint.com/coffeescript/images/coffeescript.jpg" class="lazy" src=”..” alt=”..”>
Un bouton cliquable est défini par la balise
. Vous pouvez insérer du texte (ainsi que des balises telles que , , , Avec un bouton créé avec l'élément Examinons les exemples pour comprendre le bouton image avec HTML5.
Exemple 1
Dans l'exemple ci-dessous, nous créons un simple bouton d'image.
<!DOCTYPE html>
<html>
<body>
<p>Click On The Image</p>
<button onclick="JavaScript:alert('DONT HUNT ANIMALS')">
<img src="/static/imghwm/default1.png" data-src="https://www.tutorialspoint.com/coffeescript/images/coffeescript.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="animal">
<br>LOVE ANIMALS</button>
</body>
</html>
Lorsque le script est exécuté, il génère une sortie affichant le bouton d'image avec du texte dessus ainsi qu'une invite sur la page Web.
Lorsque l'utilisateur clique sur le bouton image, l'événement se déclenche et affiche une alerte "Ne chassez pas les animaux".
Exemple 2
Dans l'exemple ci-dessous, nous avons créé un bouton image en utilisant
<!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>
Lorsque le script est exécuté, il génère une sortie affichant le champ de saisie du nom d'utilisateur et du mot de passe ainsi qu'un bouton d'image sur la page Web. Lorsque l'utilisateur clique sur le bouton d'image, le formulaire est soumis au serveur.
Exemple 3
Dans l'exemple ci-dessous, nous utilisons des espaces réservés et un bouton image avec
<!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>
Lors de l'exécution du script ci-dessus, la fenêtre de sortie apparaîtra, affichant la connexion fournie avec un espace réservé pour saisir l'e-mail ainsi qu'un bouton d'image sur la page Web.
Exemple 4
Dans ce qui suit, nous créons un bouton d'image mais insérons la balise
<button type = "submit" name = "learn" value = "myimage">
<p>Tutorials for all</p>
<img src="https://www.tutorialspoint.com/latest/inter-process-communication.png " / alt="Boutons d'image utilisant HTML5" >
</button>
Après avoir exécuté le script ci-dessus, il générera un bouton d'image avec du texte sur la page Web. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
à l'intérieur de la balise