En esta discusión, aprenderemos cómo usar elementos de área de texto en formularios HTML. Este elemento es el elemento más utilizado en un sitio web.
Intentaré explicar con el mayor detalle posible el uso de los siguientes elementos de área de texto con sus atributos, a saber, filas y columnas. En general, el
La etiqueta
<!DOCTYPE html> <html> <head> <title>Penggunaan Elemen Textarea pada Form HTML</title> </head> <body> <form action="proses_input.php" method="get"> <textarea name="memo">Masukkan teks disini....</textarea> <br> <input type="submit"> </form> </body> </html>
Después de ejecutar en el navegador, el resultado se ve así:
Esta etiqueta admite varios atributos, como nombre, filas, columnas, longitud máxima, requerido, etc.
1. Filas de atributos
El atributo de filas se utiliza para especificar el número de filas en el área de texto. El valor de este atributo es un número como 40, 10 o un porcentaje como 20%. Donde cuanto mayor sea el valor, mayor será el elemento textarea. El siguiente es un ejemplo de escritura y uso del atributo de filas en la etiqueta
<!DOCTYPE html> <html> <head> <title>Penggunaan Atribut Rows pada Elemen Textarea</title> </head> <body> <form action="proses_input.php" method="get"> <textarea name="memo" rows="15">Masukkan teks disini....</textarea> <br> <input type="submit"> </form> </body> </html>
Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:
2. Cols. Atributo
El atributo cols se usa para especificar el ancho (número de columnas) en el elemento de área de texto. Similar al atributo de filas, el valor de este atributo puede ser un número como 80, 20 o 20%. Donde cuanto mayor sea el valor, más ancho será el elemento textarea. El siguiente es un ejemplo de cómo escribir código y usar el atributo cols en la etiqueta
<!DOCTYPE html> <html> <head> <title>Penggunaan Atribut Cols pada Elemen Textarea</title> </head> <body> <form action="proses_input.php" method="get"> <textarea name="memo" cols="50">Masukkan teks disini....</textarea> <br> <input type="submit"> </form> </body> </html>
Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:
Los dos ejemplos de uso de los atributos de filas y columnas anteriores han mostrado las diferencias en el uso de los atributos de filas y columnas en elementos de área de texto. Específicamente, el atributo filas es para configurar la altura mientras que el atributo cols es para configurar el ancho en el elemento
<!DOCTYPE html> <html> <head> <title>Penggunaan Atribut Rows dan Cols pada Elemen Textarea</title> </head> <body> <form action="proses_input.php" method="get"> <textarea name="memo" rows="15" cols="50">Masukkan teks disini....</textarea> <br> <input type="submit"> </form> </body> </html>
Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:
3. Longitud máxima del atributo
Este atributo también se aplica a la etiqueta de área de texto, que tiene una función para limitar el número de caracteres ingresados en el área de texto. Código de ejemplo como este:
<!DOCTYPE html> <html> <head> <title>Penggunaan Atribut Maxlength pada Elemen Textarea</title> </head> <body> <form action="proses_input.php" method="get"> <textarea name="memo" rows="10" cols="30" maxlength="40">Masukkan teks disini....</textarea> <br> <input type="submit"> </form> </body> </html>
Cuando se ejecuta en el navegador, la salida se ve así:
En el código anterior establecí la longitud máxima en 40, por lo que solo puede ingresar un máximo de 40 caracteres, no más.
4. Atributos requeridos
No solo el atributo maxlength, el atributo requerido también se usa en el área de texto. Esta función de atributo se utiliza para configurar el elemento (en este caso, el área de texto) de modo que deba completarse antes de enviarlo. El ejemplo de código HTML se ve así:
<!DOCTYPE html> <html> <head> <title>Penggunaan Atribut Maxlength pada Elemen Textarea</title> </head> <body> <form action="proses_input.php" method="get"> <textarea name="memo" rows="10" cols="30" required></textarea> <br> <input type="submit"> </form> </body> </html>
Se ve así en el navegador:
Cuando haga clic inmediatamente en el botón Enviar, recibirá una notificación como en la imagen de arriba, lo que significa que primero debe completar el área de texto antes de hacer clic en el botón Enviar.
Ese es el material sobre el uso de textarea en formularios HTML, este textarea también se puede usar fuera de los formularios HTML, por lo que no es solo para formularios HTML. No olvides seguir visitando este blog para obtener los últimos tutoriales sobre HTML.