Formularios en HTML

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

HTML es una gran lenguaje para publicar nuestro contenido en internet, pero en ocasiones, y muy frecuentemente dentro de nuestro sitio web.
Desearemos recibir información de nuestros visitantes, y para este propósito usaremos los formularios
Así que dentro de nuestro editor vamos a crear nuestro primer formulario
Para ello, dentro de la etiqueta body como siempre, colocaremos nuestra etiqueta form, seguida de su etiqueta de cierre
Y le añadiremos algunos atributos, en primer lugar añadiremos el atributo action, que es un atributo requerido para todos nuestros formularios
Este atributo debe tener como valor, el sitio web o la página dentro de la estructura de tu sitio web que deseas cargar después de que el visitante envié la información por medio del formulario.
En este caso, no tenemos una página que deseemos cargar en particular y no vamos a procesar los datos que se añadan aquí, ya que para eso necesitaríamos usar programación del lado del servidor, como por ejemplo PHP, y es algo que veremos en otro curso, así que vamos a colocar un numeral en el valor del atributo
Luego del atributo action, colocaremos el atributo method, para el valor de este atributo podemos usar el valor POST en mayúsculas o GET, también en mayúsculas
Estos valores son parte de la programación del lado del servidor, y por el momento no los tocaremos más a fondo, pero cuando veamos los temas de programación, entonces estos valores tendrán más sentido
Y finalmente colocaremos el atributo name, este es el nombre del formulario, para este formulario le colocaremos mi formulario todo unido, pero puedes colocarle el nombre que desees a tu formulario
Este valor también tiene que ver con programación del lado del servidor, este valor le ayuda nuestro servidor en determinar de cual formulario es la información que se encuentra enviando y procesando
Ahora que tenemos creado nuestra etiqueta form con todos los atributos que necesitamos, vamos a seguir con las etiquetas input
Las etiquetas input las usaremos en la mayor parte de nuestro formulario
Esta etiqueta puede funcionar de varias maneras diferentes, y podemos modificar su funcionamiento y que tipo de dato obtienen, simplemente cambiando un atributo llamado type
En esta primera etiqueta input, aprenderemos el primer valor para el atributo type llamado text, así que colocamos text dentro del valor del atributo, y además necesitamos darle un nombre, así que colocamos el atributo name y para este caso vamos a darle el valor de usuario
Así que podemos pensar en este campo de nuestro formulario, como la parte en la que seleccionas un nombre de usuario cuando te registras en un sitio web por ejemplo
Guardamos, vamos al navegador y refrescamos la página
Al hacerlo podremos ver nuestro campo de texto, en el que podemos escribir un texto cualquiera
Regresemos al editor de texto, y vamos a copiar esta etiqueta input y la pegamos abajo, y vamos a cambiar el valor del atributo type por  password
Este valor nos permite añadir el formato de contraseña para este campo, también vamos a cambiar el nombre, le colocaremos contraseña, ten encuentra que los nombres que les estamos dando a estas etiquetas pueden ser el que tú quieras
Antes de ir al navegador, vamos a colocar algunos saltos de línea, lo colocaremos aquí y aquí.
Y cuando regresamos al navegador y refrescamos la página
Podrás ver que tenemos ahora dos cajas de texto, una es para el usuario, y la otra para contraseñas
Y como bien sabemos, cuando colocamos texto en un campo usado para contraseña, podemos ver estos puntos que nos permiten ocultar la contraseña mientras la escribimos
Ahora regresamos a nuestro editor de texto, y vamos a hablar ahora de los radio buttons o botones de selección única
Vamos a copiar y pegar nuestra última etiqueta input, cambiaremos el valor del atributo type hacia radio y cambiaremos el nombre hacia genero por ejemplo, y en este caso debemos añadir un atributo extra llamado value, el valor de este atributo será masculino
En el caso de este botón, vamos a colocar la palabra masculino en esta parte también, de esta forma le podemos indicar al visitante el valor de este botón, no es necesario que tenga el mismo texto que el value, puede ser por ejemplo hombre, pero igualmente lo colocaremos como masculino en nuestro caso
Debemos colocarle esta indicación al usuario debido a que cuando tenemos varios botones agrupados, y no colocamos la indicación del valor del botón, es posible que confundamos a nuestro visitante
Ahora vamos a copiar esta etiqueta input y la pegaremos abajo, y vamos a cambiar el valor hacia femenino y también la indicación en texto, la cambiamos hacia femenino
Y dejaremos los otros atributos tal y como están. De esa forma el navegador sabe que este botón pertenece al mismo grupo de botones que el botón de arriba
Vamos al navegador para ver mejor como funciona, refrescamos el navegador y ahora podemos ver nuestros botones, y si damos clic en uno de ellos el otro pierde su selección, de modo que no podemos seleccionar ambos, únicamente podemos seleccionar uno de ellos a la vez.
Esto es debido a que el valor del atributo name de ambos botones es el mismo, cambiemos el valor de name de unos de nuestros botones a cualquier otra cosa y veamos lo que sucede
Refrescamos el navegador, y ahora como puedes ver, puedo seleccionar ambos botones a la vez. Esto es malo, ya que para permitir multiples selecciones, debemos usar otro tipo de input, llamado checkboxes
Vamos a regresar al editor, regresaremos el nombre de este botón a genero, para indicar nuevamente, que estos dos botones pertenecen al mismo grupo
Ahora hablaremos sobre los checkbox, este valor del atributo type es similar a los radio buttons, pero la diferencia es que pueden seleccionarse más de uno a la vez, en realidad podríamos seleccionarlos todos si lo deseamos
Vamos a colocar nuestro primer checkbox, cambiamos el valor de type hacia checkbox, y ahora en el atributo name vamos a colocar algo diferente, digamos música por ejemplo
Y en valor a este primer checkbox le colocaremos clásica, colocamos también el texto al final de la etiqueta input para indicarle al visitante el valor de esta selección
Y ahora copiamos y pegamos este mismo checkbox en la parte de abajo, y cambiaremos únicamente su valor, ahora colocaremos rock e igualmente añadimos el texto al final para indicar el valor de esta selección
Y hacemos este proceso una últimas vez más y ahora le daremos el valor de pop
Como puedes ver no hemos modificado el valor del atributo name en ninguno de los checkbox, ya que al igual que los radio buttons, es el valor de ese atributo el que le indica al navegador cuales checkbox se encuentran asociados
Ahora guardamos los cambios, y regresamos al navegador
Como puedes observar ahora tenemos nuestros checkbox en esta área, y podemos seleccionarlos a todos
Los checkbox entonces nos sirven cuando deseamos que el usuario pueda hacer selecciones multiples, y los radio buttons cuando el usuario únicamente puede seleccionar una de las opciones disponibles
Finalmente hablaremos sobre el valor submit para el atributo type, crearemos otra etiqueta input, en el atributo type vamos a colocar submit y en el atributo value colocaremos enviar
El valor submit para el atributo type nos permite crear el botón con el que la información podrá ser enviada por el visitante cuando rellene nuestro formulario
Vamos a visualizarlo en el navegador, refrescamos la página y podremos ver en la parte de abajo nuestro botón para enviar la información
El valor de este botón lo podemos cambiar a lo que nosotros deseemos, por ejemplo cambiémoslo a continuar
Ahora regresamos al navegador y podremos ver que el texto ha cambiado pero sigue funcionando correctamente.
Mi nombre es José Lievano y nos veremos en el siguiente video.

Deja un comentario

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

Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image