4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast
  • Entradas

  • Formularios

  • HTML and CSS

Editar en Github

Entendiendo HTML, input (Entrada), Textarea y formularios ...

Formularios HTML

Formularios HTML

Esta lección es muy fácil de entender, pero es esencial debido a que en este nuevo conocimiento, se transmitirá toda la interactividad de Internet. Hay algunas etiquetas HTML adicionales que debemos analizar antes de seguir con el curso: son las primeras formas posibles de interacción que se introdujeron en HTML: las entradas o inputs y los formularios.

Como siempre, comparemos nuestro sitio web con un documento de MS Word... En algún momento, los científicos necesitaban crear formularios como los que llenamos cuando pagamos nuestros impuestos: con espacios en blanco disponibles para que el usuario los llene con su Nombre, Apellido, Fecha de nacimiento, etc.

html textarea html input

Los elementos que el usuario completa en un formulario se denominan <input> y siempre tienen que estar envueltos dentro de una etiqueta <form>. También puedes utilizar todas las demás etiquetas HTML que aprendimos en las lecciones anteriores sin ningún problema.

Aquí hay un ejemplo de un formulario simple en HTML:

Clic para abrir demo en una nueva ventana

La siguiente es una lista de todos los elementos posibles que podemos usar para recibir cualquier entrada o input del usuario:

NombreDeclaraciónDescripción
Texto<input type="text">El input de texto está destinado a recibir cualquier pequeño string de caracteres como: nombre de usuario, nombre, apellido, fecha de nacimiento, etc.
<input type="text" name="Name" />
Textarea<textarea>El área de texto es ideal para inputs de texto largos. Su principal diferencia respecto al input de texto es su capacidad de permitir múltiples líneas.
<textarea name="comments"><textarea/>
Contraseña<input type="password" />Esto es como un tipo de input = "texto" pero con la única diferencia de que los caracteres están ocultos como viñetas: el usuario no puede ver lo que están escribiendo.
<input type="password" name="password" />
Radiobutton<input type="radio">Permite al usuario seleccionar solo una de todos los inputs con el mismo nombre.
<input type="radio" name="color" value="red" />
<input type="radio" name="color" value="green" />
Checkbox<input type="checkbox">Debes usar corchetes en el nombre del input para permitir que el usuario seleccione múltiples opciones al mismo tiempo.
<input type="checkbox" name="color[]" value="green" />
<input type="checkbox" name="color[]" value="blue" />
Archivo<input type="file">Esta es la única manera de trabajar con archivos. Por ejemplo: es lo que usan los sitios web cuando te piden que subas una foto.
<input type="file" name="photo" value="" />
Botón de Enviar<input type="submit">Cuando el formulario está listo para ser enviado, el usuario presiona este botón "enviar" y todo se envía al servidor para su procesamiento.
<input type="submit" value="Send Form" />
Select<select>Pide al usuario que elija uno o más elementos de una lista de opciones.
<select name="color"> <option value="red">Red </option> <option value="yellow">Yellow</option> </select>

Atributos del Input o Entrada

Al igual que cualquier otra etiqueta HTML, las etiquetas de input tienen varios atributos que se pueden configurar para describir su comportamiento de manera más específica:

VALUE: Puedes especificar un valor predeterminado que debe tener el input antes de que el usuario la complete:

1<input type="text" name="firstname" value="John"/>

READ ONLY: Determina si el usuario puede cambiar el valor del input.

1<input type="text" name="firstname" value="John" readonly/>

DISABLED: Determina si el input será gris y de solo lectura. Los inputs deshabilitados no se envían al servidor: actúan como si nunca hubieran existido.

1<input type="text" name="firstname" value="John" disabled/>

SIZE: El número máximo de caracteres permitidos para ese input.

1<input type="text" name="firstname" value="John" size="40"/>

Los Atributos METHOD y ACTION

Los dos atributos más importantes que deben establecerse en la etiqueta <form> son action y method:

Action: Es la URL donde se enviarán los datos recopilados del formulario.

1<form action="/action_page.php">

Method: Puede ser "POST" o "GET". Las principales diferencias serán:

  • Cómo se enviarán los datos recopilados a la página de destino una vez que lleguemos allí.
  • Cómo se envían los datos del formulario al servidor.
GETPOST
Todos los datos del formulario están codificados en la URL. Esto significa que adjuntará toda la información del formulario al final de la URL de destino, por ejemplo: http://www.mydestinationurl.com?input_name1=value1&input_name2&value2…Los datos se ocultarán al usuario. La URL permanecerá como se definió en el atributo "acción" y solo un desarrollador podrá solicitar la información del formulario.

☝ Si vas a utilizar el <input type="file"/> el único método admitido es POST.