Debe estar familiarizado con la etiqueta y sus funciones en el artículo anterior. Esta etiqueta se utiliza para crear elementos que se utilizan para solicitar información al usuario. Estas etiquetas generalmente pueden tener la forma de cuadros de texto, botones, cuadros de selección y otros.
En el tutorial anterior, discutimos el uso de etiquetas de entrada en HTML y los valores de tipo de entrada como texto, contraseña y envío. Bueno, en este tutorial discutiremos el uso de atributos de solo lectura, deshabilitados y de destino en formularios HTML. Los tres atributos ciertamente tienen diferentes funciones en su implementación. Para más detalles sobre estos tres atributos, veamos el siguiente tutorial:
Atributos de solo lectura y deshabilitados
En general, los atributos de solo lectura y deshabilitados se usan para hacer que un cuadro de texto quede inutilizable. Para ciertos propósitos, ciertamente necesita estos dos atributos para que el cuadro de texto no se pueda cambiar, por ejemplo, para un cuadro de texto que tiene un valor predeterminado. A continuación se explican los dos atributos.
1. Atributo de solo lectura
El atributo de solo lectura se usa para especificar que el elemento es de solo lectura y no se puede editar. El siguiente es un ejemplo de escritura y uso del atributo de solo lectura en un formulario HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Readonly pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" readonly> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><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:
En columna Código del objeto, No puedesaporte porque a la columna se le ha asignado un atributo de solo lectura, por lo que la columna solo se puede leer y no se puede editar ni cambiar.
2. Atributo deshabilitado
El atributo disabled se utiliza para desactivar un elemento (por ejemplo, un elemento de entrada). Al igual que con el atributo de solo lectura, este atributo no necesita escribirse en su valor, basta con escribir deshabilitado. El siguiente es un ejemplo de escritura y uso del atributo disabled en un formulario HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Disabled pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" disabled> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><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:
Diferencia entre atributos de solo lectura y deshabilitados
A partir de los dos ejemplos de código anteriores, puede ver la diferencia entre usar los atributos de solo lectura y deshabilitados. El atributo de solo lectura hace que el cuadro de texto permanezca como siempre, mientras que el atributo deshabilitado hace que el cuadro de texto sea gris. Aun así, hay una diferencia que necesita saber, a saber, cuando hace clic en el botón Enviar, el valor en el atributo de solo lectura aún se envía al servidor mientras que el atributo deshabilitado no.
Atributo de solo lectura: valor Código del objeto enviado al servidor
Atributo deshabilitado: valor Código del objeto no enviado al servidor
3. Atributo objetivo
El atributo de destino se utiliza para especificar la ubicación de la respuesta recibida después de que el formulario se haya enviado correctamente. Los valores de los atributos de destino son _blank, _self, _parent y _top. He explicado el uso de este atributo de destino en el artículo sobre cómo crear enlaces en HTML.
El siguiente es un ejemplo de cómo escribir código y usar el atributo de destino en un formulario HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Target di HTML Forms</title>
</head>
<body>
<form action="proses_input.php" method="get" target="_blank">
Nama Depan: <input type="text" name="ndepan"><br>
Nama Belakang: <input type="text" name="nbelakang"><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:
Al hacer clic en el botón Enviar, los resultados de las respuestas recibidas se mostrarán en una nueva pestaña.
Se trata de usar los atributos de solo lectura, objetivo y deshabilitar en formularios HTML. Siga visitando este blog porque siempre actualizaré los materiales de aprendizaje HTML para principiantes.
