Textarea y select

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Como puedes ver tenemos el mismo formulario que creamos en el video anterior, y le añadiremos más elementos para crear un formulario aún más completo
En primer lugar, añadiremos un área de texto, y lo añadiremos entre nuestro botón para enviar y el último checkbox de la lista, así que haremos un poco de espacio primero
Ahora escribimos la etiqueta textarea añadiremos el atributo name y como valor colocaremos mensaje, podemos colocarle el nombre que deseemos pero en este caso deseo ser un poco más ilustrativo y de hecho lo que quiero es que el visitante añada su mensaje aquí, y por ello añadimos mensaje en el atributo name
Luego añadiremos el atributo rows, que nos dará la cantidad de filas que esta área de texto tendrá, en este caso le daremos el valor de 10 filas
Luego añadimos el atributo cols que le indicará cuantas columnas tendrá, en este caso añadiremos 30 columnas
Los atributos rows y cols son una forma de indicar que tan grande se verá nuestra área de texto, podemos pensar en rows como el alto y en cols como el ancho del área de texto
Cerramos nuestra etiqueta textarea  y Ahora añadiremos una etiqueta br para crear un salto de línea, de modo que el botón para enviar el contenido quede debajo de nuestra área de texto , guardamos y vamos al navegador
Al refrescar podremos ver nuestro nuevo elemento en el formulario, ahora tenemos nuestra área de texto, y podemos añadir información dentro de ella
Un área de texto es útil cuando requerimos que el visitante nos envié un texto más grande, como en este caso el cuerpo de su mensaje, entonces, en estos casos usamos un área de texto, en lugar de una caja pequeña de texto como la de usuario y contraseña
Podemos modificar la cantidad de filas y columnas que nuestra área de texto tendrá en cualquier momento, digamos que por ejemplo ahora la queremos con 20 filas y 10 columnas
Y al refrescar podemos ver que ha cambiado el tamaño de nuestra área de texto, sin embargo lo regresaremos a las 10 filas y 30 columnas ya que se mucho mejor
Ahora el hecho de que lo dejemos con una cierta cantidad de filas o columnas no significa  que nuestro visitante únicamente podrá escribir un texto limitado a ese espacio
Ya que como podemos ver podemos seguir escribiendo todo el texto que deseemos, lo que hacen esos atributos es solo determinar el tamaño del área de texto, y los navegador modernos, podremos ver que al final de las áreas de texto tenemos este pequeño icono
Tomándolo y arrastrándolo podremos modificar el tamaño del área de texto, de modo que como indicamos anteriormente, las filas y columnas únicamente determinan el tamaño inicial de nuestra área de texto, pero el visitante haciendo uso de este icono podría modificar el tamaño a su gusto
Y esto sería todo sobre el área de texto, ahora hablaremos sobre las listas de selección
Lo que haremos ahora será crear una nueva etiqueta llamada select, la colocaremos debajo de la etiqueta textarea y la cerraremos
Dentro de nuestra etiqueta select debemos añadir las opciones que los visitantes podrán elegir, para ello colocaremos cada opción disponible en etiquetas llamadas option
Supongamos que le deseamos preguntar a nuestro visitante cuál comida le gusta más, y le damos algunas opciones
Primero creamos nuestra etiqueta option y la cerramos, adentro de esta etiqueta colocamos nuestra primera opción, que será Pollo
Ahora simplemente copiaremos esta etiqueta y cambiaremos pollo por otra opción, por ejemplo carne de res, y hacemos lo mismo, colocaremos ahora carne de cerdo, copiamos y pegamos y colocaremos pescado, hacemos el mismo proceso y colocamos Zanahoria, añadiremos otro que será brócoli, y una última opción la cual será cebolla
Muy bien, ahora tenemos una lista de alimentos con 7 diferentes opciones para nuestro visitante, las listas de selección son útiles cuando tienes un gran número de posibles opciones únicas, las listas de selección funcionan igual que los radio buttons, es decir que únicamente puedes seleccionar una de las opciones disponibles, no todas.
¿Por qué usar una lista de selección en lugar de radio buttons?, bien imagina cuando te registras en un sitio web y te preguntan por tu país, imagina que en lugar de una lista donde puedes seleccionar tu país, tengas muchos botones de selección única, se vería muy mal
Entonces como reglas probablemente podamos decir que será bueno usar los botones cuando la lista de opciones sea muy corta, entre 2 a 4 opciones, y que cuando tengamos muchas opciones será mejor usar una lista de selección en lugar de los botones
Ahora veamos esto en el navegador, refrescamos el navegador y ahora podemos ver que tenemos nuestra lista de opciones debajo de nuestra área de texto, y si damos clic en ella podemos ver todas las opciones que añadimos en las etiquetas option
Y podemos seleccionar únicamente una de las opciones como lo mencionábamos antes, igual que los radio buttons
Hay algo que se nos ha olvidado, y probablemente ya lo notaste, nuestro botón para enviar se encuentra al lado de nuestra lista, para colocarlo abajo regresaremos al editor de texto y añadiremos una etiqueta br para colocar el salto de línea
Regresamos al navegador y al refrescar podremos que ver que ahora ya se encuentra en la parte de debajo de nuestra lista
Y finalmente aprenderemos sobre los grupos de opciones, los grupos de opciones son como categorías en las que podemos agrupar nuestras opciones dentro de una lista de opciones
Por ejemplo, en este caso tenemos dos grupos, tenemos carnes y vegetales, así que haremos un espacio aquí y añadiremos la etiqueta optgroup antes de nuestra primera opción y luego cerraremos la etiqueta donde se encuentra la última opción que deseamos colocar en esta categoría
Haremos lo mismo con el siguiente grupo, añadimos la etiqueta optgroup y nos colocamos al final de la última opción que pertenece a esta categoría
Ahora así como se encuentran nuestras etiquetas optgroup si mostrarán una separación entre ambos grupos, pero podemos nombrar estas categorías o grupos de opciones, para darles un nombre y hacer esta etiqueta más útil para nuestro visitante
Añadiremos el atributo label a nuestra primera etiqueta optgroup y como valor del atributo colocaremos carnes
Haremos lo mismo para el siguiente grupo de opciones y le colocamos como valor verduras.
Muy bien, ahora tendríamos nuestros grupos de opciones con sus nombres y las opciones que pertenecen a cada uno de ellos
Ahora guardamos nuestros cambios, vamos al navegador y refrescamos la página
Y como puedes ver ahora cuando damos clic en nuestra lista de selección, podemos observar estos textos en los que se categorizan nuestras opciones
Como puedes ver las opciones tienen un pequeño margen a su lado izquierdo, de esta forma se indica visualmente al visitante que esta opción pertenece a esta categoría, y el nombre de la categoría tiene un formato, un estilo diferente al de las opciones, de modo que se pueda distinguir
También podrás notar que no puedes seleccionar las categorías, no son seleccionables, únicamente sirven para mostrar al visitante los diferentes grupos de opciones si los hay.
Colocar grupos de opciones no es obligatorio cuando creamos listas de opciones, pero es una buena práctica hacerlo si nos encontramos en el caso de necesitarlos, para hacer más amigable nuestro formulario para el visitante.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image