El atributo de tipo HTML <input> se utiliza para especificar el tipo de elemento <input> que se mostrará. El tipo predeterminado de atributo de tipo <input> es texto. En este artículo, configuramos la imagen como un valor de tipo de entrada. Crea la imagen como el botón de envío.
Sintaxis:
<input type="image">
Valor de atributo:
- imagen: se utiliza para definir una imagen como botón de envío.
Características:
- El elemento de entrada no acepta un atributo de valor .
- La ruta de la imagen se define en el atributo src .
- El elemento de entrada es compatible con varios atributos comunes.
Ejemplo 1: En este ejemplo, estableceremos el tipo de entrada como una imagen para enviar el formulario.
HTML
<!DOCTYPE html> <html> <body style="text-align: center"> <h1 style="color: green"> GeeksForGeeks </h1> <h2>HTML <input type="image"></h2> <form> Name: <input type="text" placeholder ="Enter your name here--" /><br /> Address: <input type="text" placeholder ="Enter your permanent Address" /><br /> Phone No.: <input type="tel" placeholder ="Enter phone number" /> <br /><br /> <input type="image" src= "https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" height="80px" width="110px" alt="submit" /> </form> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, crearemos un formulario de inicio de sesión y usaremos la imagen como tipo de entrada para enviar el formulario.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1,
h2 {
font-family: impact;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color: green">GeeksForGeeks</h1>
<h2>HTML <input type="image"></h2>
<form>
User_id:
<input type="email" placeholder=
"Enter your Email Address h--" /><br />
Password:
<input type="password" placeholder=
"Enter your password" /><br />
<br />
<br />
<b>
<p>
click on the below image to
log in to Geeks Portal
</p>
</b>
<input type="image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
height="40px" width="110px" alt="submit" />
</form>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Microsoft Edges 12.0 y superior
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA