Para algunos propósitos, ciertamente necesita un formulario que pueda cargar archivos adjuntos o imágenes en su sitio web, por ejemplo, adjuntos de CV, portafolios, fotos y otros. Entonces, para hacer que la función de carga use la etiqueta . La etiqueta se utiliza para crear elementos para solicitar información al usuario.
En tutoriales anteriores, hemos estudiado el uso de la etiqueta con los tipos de entrada, a saber, texto, contraseña, envío, casilla de verificación y radio. Bueno, en este tutorial lo que se discutirá es el uso de la etiqueta con los siguientes archivos de entrada y tipos de imágenes con el atributo accept. Para obtener más detalles sobre los dos valores y atributos de tipo de entrada, veamos el tutorial a continuación:
Introduzca el tipo de archivo
La etiqueta de entrada con el tipo de atributo = “archivo” se utiliza para cargar archivos. En general, el uso del atributo type=”file” se relaciona con el uso de PHP. El siguiente es un ejemplo de escritura y uso de la etiqueta con el tipo “archivo” en un formulario HTML:
<!DOCTYPE html> <html> <head> <title>Penggunaan Tag Input Tipe File pada form HTML</title> </head> <body> <form action="proses_input.php" method="get"> NIM : <input type="text" name="nim" size="11" maxlength="9"> <br><br> Upload CV : <input type="file" name="cv"> <br><br> <input type="submit" value="SUBMIT"> </form> </body> </html>
Se ve así en el navegador:
El navegador mostrará un botón con un título junto a él, donde el nombre del botón y el título variarán según el navegador web utilizado.
Atributo Aceptar
El atributo de aceptación se utiliza para especificar o limitar los tipos de archivos que se pueden cargar, ya sean archivos de música, archivos de documentos, archivos de imágenes u otros. Este atributo se usa cuando usa la etiqueta con el atributo type=”file”. Los valores de este atributo son:
Extensión de archivo: extensión de archivo que comienza con un punto como .doc, .pdf, .jpg. audio/* imágenes/* vídeos/*
Incluso utilizando el atributo de aceptación, los usuarios pueden cambiar fácilmente el tipo de archivo cargado. Por lo tanto, es mejor si la limitación del tipo de archivo también se especifica en el lado del servidor web con PHP. El siguiente es un ejemplo de escritura y uso del atributo accept en un formulario HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Accept pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Judul Lagu : <input type="text" name="lagu" size="11"> <br><br>
Mp3 : <input type="file" name="file_musik" accept="audio/*"> <br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:
Imagen de tipo de entrada
La etiqueta de entrada con el tipo de atributo = “imagen” se utiliza para insertar una imagen en el formulario. Donde la imagen sirve como un objeto de formulario en el que el usuario puede hacer clic. Luego, cuando el usuario haga clic en la imagen, el navegador web mostrará las coordenadas del punto donde se hizo clic en la imagen.
Aunque rara vez se usa, puede usar la imagen de tipo de entrada para mostrar otra imagen cuando el usuario hace clic en ciertas coordenadas. El siguiente es un ejemplo de cómo escribir código y usar un tipo de entrada de imagen en un formulario HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Input Type Image pada Form HTML</title>
</head>
<body>
<h4>Contoh Penggunaan Input Type Image pada Form HTML</h4>
<form action="proses_gambar.php" method="get">
<input type="image" src="https://www.nesabamedia.com/penggunaan-input-type-file-atribut-accept-dan-input-type-image-pada-form-html/pantai.jpg" alt="pantai" width="400">
</form>
</body>
</html>Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:
Cuando hace clic en el área de la imagen, las coordenadas (x e y) del área de la imagen en la que hizo clic también se muestran en el servidor.
Esa es una explicación de la utilidad del tipo de archivo de entrada, la imagen y el atributo de aceptación. Asegúrese de continuar visitando este blog para obtener las últimas actualizaciones sobre el aprendizaje de tutoriales de HTML para principiantes.
