El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Elementos del Formulario: Input, Textarea y Select

Siguiente ►
►

En este tema, aprenderemos sobre los elementos fundamentales de los formularios en HTML: <input>, <textarea> y <select>. Estos elementos permiten a los usuarios ingresar y seleccionar datos en una página web.

  1. Elemento <input>

El elemento <input> es uno de los más versátiles en HTML y se utiliza para crear diferentes tipos de campos de entrada, como texto, contraseñas, correos electrónicos, números, etc.

Tipos de <input>

A continuación, se presentan algunos de los tipos más comunes de <input>:

Tipo Descripción Ejemplo de Código
text Campo de texto de una sola línea <input type="text" name="username">
password Campo de texto para contraseñas <input type="password" name="password">
email Campo para ingresar correos electrónicos <input type="email" name="email">
number Campo para ingresar números <input type="number" name="age">
checkbox Casilla de verificación <input type="checkbox" name="subscribe">
radio Botón de opción <input type="radio" name="gender" value="male">
submit Botón para enviar el formulario <input type="submit" value="Submit">

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Ejemplo</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="username">Nombre de Usuario:</label>
        <input type="text" id="username" name="username"><br><br>

        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password"><br><br>

        <label for="email">Correo Electrónico:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="age">Edad:</label>
        <input type="number" id="age" name="age"><br><br>

        <label for="subscribe">Suscribirse:</label>
        <input type="checkbox" id="subscribe" name="subscribe"><br><br>

        <label>Género:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Masculino</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Femenino</label><br><br>

        <input type="submit" value="Enviar">
    </form>
</body>
</html>

  1. Elemento <textarea>

El elemento <textarea> se utiliza para crear un campo de texto de varias líneas, ideal para comentarios o descripciones largas.

Atributos Comunes

  • rows: Define el número de filas visibles.
  • cols: Define el número de columnas visibles.
  • placeholder: Texto que aparece cuando el campo está vacío.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario con Textarea</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="comments">Comentarios:</label><br>
        <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Escribe tus comentarios aquí..."></textarea><br><br>
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

  1. Elemento <select>

El elemento <select> se utiliza para crear un menú desplegable, permitiendo a los usuarios seleccionar una opción de una lista.

Atributos Comunes

  • name: Nombre del campo.
  • multiple: Permite seleccionar múltiples opciones si está presente.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario con Select</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="country">País:</label>
        <select id="country" name="country">
            <option value="es">España</option>
            <option value="mx">México</option>
            <option value="ar">Argentina</option>
            <option value="co">Colombia</option>
        </select><br><br>
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Ejercicio Práctico

Instrucciones

Crea un formulario HTML que incluya los siguientes elementos:

  1. Un campo de texto para el nombre del usuario.
  2. Un campo de contraseña.
  3. Un campo de correo electrónico.
  4. Un campo de número para la edad.
  5. Una casilla de verificación para suscribirse a un boletín.
  6. Botones de opción para seleccionar el género.
  7. Un campo de texto de varias líneas para comentarios.
  8. Un menú desplegable para seleccionar el país.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario Completo</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="username">Nombre de Usuario:</label>
        <input type="text" id="username" name="username"><br><br>

        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password"><br><br>

        <label for="email">Correo Electrónico:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="age">Edad:</label>
        <input type="number" id="age" name="age"><br><br>

        <label for="subscribe">Suscribirse:</label>
        <input type="checkbox" id="subscribe" name="subscribe"><br><br>

        <label>Género:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Masculino</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Femenino</label><br><br>

        <label for="comments">Comentarios:</label><br>
        <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Escribe tus comentarios aquí..."></textarea><br><br>

        <label for="country">País:</label>
        <select id="country" name="country">
            <option value="es">España</option>
            <option value="mx">México</option>
            <option value="ar">Argentina</option>
            <option value="co">Colombia</option>
        </select><br><br>

        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Conclusión

En esta lección, hemos aprendido sobre los elementos fundamentales de los formularios en HTML: <input>, <textarea> y <select>. Estos elementos son esenciales para recopilar datos de los usuarios y son ampliamente utilizados en el desarrollo web. En la próxima lección, exploraremos los atributos y la validación de formularios para mejorar la experiencia del usuario y la integridad de los datos.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados