Las etiquetas <input type=”button”> y <button> son dos enfoques diferentes para usar Button en un documento HTML. La diferencia entre ellos es que los botones creados con la etiqueta <button> ofrecen muchas posibilidades de contribución que el atributo <input type=”button”>. El <button> puede tener contenido dentro. La etiqueta <button> permite redactar el contenido dentro del contenido del elemento del botón, como texto o imágenes, etc., junto con el trabajo con la funcionalidad de tipo definida. Pero el atributo input type=”button” no permite el contenido. Por ejemplo, una etiqueta de botón que contiene una imagen funciona y puede parecerse a una etiqueta de entrada cuyo tipo se establece en «imagen», pero el tipo de elemento de botón admite contenido. Ambos ejemplos a continuación muestran muy claramente la diferencia.
Nota: La etiqueta <button> usa paréntesis de apertura y cierre, pero el atributo <input type=”button”> usa solo una etiqueta.
Ejemplo 1: este ejemplo utiliza el atributo <input type=”button”> para crear un botón en un documento HTML.
<!DOCTYPE html>
<html>
<head>
<script>
function msg() {
alert("values submitted");
}
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>Using Input type</h2>
<form>
<label for="submit">
Enter value
</label>
<input type = "text">
<input type="button" id="submit"
onclick ="msg()" value="button">
</form>
<p>
here the input type button
works properly
</p>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo usa la etiqueta <button> para crear un botón en un documento HTML.
<!DOCTYPE html> <html> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <h2>The Button Element</h2> <form method="post" > <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <br> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <br> <button type="submit"><img src= "https://www.freeiconspng.com/uploads/login-button-png-4.jpg" height="40" width="100"> </button><br> <button type="button" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </form> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por ashishsaini3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA