Guía básica HTML 5

formulario

Etiquetas útiles para definir un formulario, asignarle un título y definir elementos de interacción para la captura de datos e información específica proporcionada por los usuarios.

form

Descripción

Define la presencia de un formulario en la página.

Atributos destacados

  • action: Especifíca donde será enviada la información recolectada por los campos del formulario.
  • method: Define el método HTTP usado para el envío de los datos.
  • name: Define un nombre para el formulario.
Cabe destacar que estos atributos cobran mayor sentido en procesos de desarrollo del lado del servidor (back-end) ya que HTML no los utiliza de forma directa. Sin embargo, es importante mencionarlos ya que son fundamentales para la funcionalidad del formulario, por lo tanto, es valioso saber de su existencia.

Sintaxis

<form action=" method=" name=" >
    <!-- Contenido del formulario -->
</form>

fieldset

Descripción

Agrupa todas las etiquetas relacionadas con un form en un conjunto de controles. Por defecto, dibuja una caja que encierra los elementos del formulario.

Sintaxis

<form>
    <fieldset>
    <!-- Elementos del formulario. -->
    </fieldset>
</form>

Vista con estilos

legend

Descripción

Define una leyenda o título para un fieldset.

Sintaxis

<form>
    <fieldset>
        <legend>Mi Formulario</legend>
        Elementos del formulario
    </fieldset>
</form>

Vista con estilos

Mi Formulario Elementos del formulario

label

Descripción

Funciona como una etiqueta o rótulo para los elementos del formulario como input, textarea o select, si bien no tiene un estilo visual definido, su uso está más enfocado en aspectos de usabilidad, ya que puede enlazarse a elementos del formulario para activarlos o interactuar con ellos de forma sencilla y proporciona algunas opciones para aplicar estilos específicos a elementos que, por defecto, no admiten estilos CSS.

Atributos destacados

  • for: Especifica el ID del elemento con el cual interactúa el label.

Sintaxis

<label for="nombre">Nombre: </label>
<input type="text" id="nombre">

Vista con estilos

input

Descripción

Define un campo de captura de datos, sus características se definen en función de su tipo, el cual se establece mediante el atributo type=". Aunque en sí misma es una etiqueta relativamente simple, su complejidad y versatilidad radica en los diferentes tipos de input, cada uno con sus características y consideraciones particulares.

Atributos destacados

  • type: Define el tipo de campo para captura de datos, algunos de estos tipos de inputs tienen atributos particulares dependiendo de su función. Los tipos más comunes son:
    • text: Campo de tipo texto para introducción de datos alfanuméricos.
    • number: Campo para introducción de datos numéricos.
    • password: Similar a un campo de tipo texto, con la diferencia de que éste oculta los caracteres para mantener una vista segura.
    • checkbox: Define una casilla de verificación y permite selección múltiple.
    • radio: Define un campo de selección única con opciones auto descartables. Para establecer un grupo de opciones de radio, todos los inputs del grupo de opciones deberán tener el mismo atributo name=""".
    • file: Presenta la opción para carga de archivos externos.
    • hidden: Campo oculto en el cuál se pueden definir valores predefinidos.
    • submit: Define un botón para el envío del formulario. El atributo value=""" establece el texto de dicho botón.
  • autofocus: Especifica que el input con la propiedad tendrá el foco de forma automática una vez que se cargue la página.
  • checked: Establece el estado del input (checkbox y radio) como verificado (checado).
  • disabled: Presenta el input como deshabilitado y no se puede interactuar con él.
  • max: Especifica el valor máximo de input (numérico).
  • min: Especifica el valor mínimo de input (numérico).
  • maxlength: Define la cantidad máxima de caracteres permitidos en el input.
  • minlength: Define la cantidad mínima de caracteres permitidos en el input.
  • name: Define un nombre para el campo.
  • placeholder: Muestra un texto de ayuda dentro del campo para dar al usuario sugerencias o pistas sobre lo que debe ingresar en él.
  • pattern: Especifica alguna expresión regular para validación y llenado del campo.
  • required: Especifica que el input es obligatorio (requerido) y debe ser llenado para proceder al envío del formulario.
  • value: Establece un valor (contenido) del input.

Sintaxis

<form>
    <fieldset>
        <legend>Mi Formulario</legend>
        
        <label>Campo de texto: </label>
        <input type="text">

        <label>Campo de numérico: </label>
        <input type="number" pattern="[0-9]" placeholder="Este campo solo acepta números">

        <label>Campo de password: </label>
        <input required placeholder="Mínimo 8 caracteres"" minlength="8" type="password">

        <label>Campo deshabilitado: </label>
        <input disabled value="No es posible interactuar con este campo" type="text">

        <h5>Checkbox</h5>
        <ul>
            <li>
                <input id="check1" type="checkbox">
                <label for="check1">Opción 1</label>
            </li>
            <li>
                <input checked id="check2" type="checkbox">
                <label for="check2">Opción 2</label>
            </li>
            <li>
                <input id="check3" type="checkbox">
                <label for="check3">Opción 3</label>
            </li>
        </ul>

        <h5>Radio</h5>
        <ul>
            <li>
                <input id="radioA" name="radioOption" type="radio">
                <label for="radioA">Opción A</label>
            </li>
            <li>
                <input id="radioB" name="radioOption" type="radio">
                <label for="radioB">Opción B</label>
            </li>
            <li>
                <input id="radioC" name="radioOption" type="radio">
                <label for="radioC">Opción C</label>
            </li>
        </ul>

        <h5>Archivo</h5>
        <label for="fileInput">Adjuntar archivo</label>
        <input id="fileInput" type="file">

        <input type="hidden" value="Campo de prueba oculto">

        <input type="submit" value="Enviar formulario">
    </fieldset>
</form>

Vista con estilos

Mi Formulario
Checkbox
Radio
Archivo

textarea

Descripción

Define un campo de texto multilínea para ingresar bloques de texto de mayor tamaño que en un input.

Atributos destacados

  • autofocus: Especifica que el textarea con la propiedad tendrá el foco de forma automática una vez que se cargue la página.
  • disabled: Presenta el textarea como deshabilitado y no se puede interactuar con él.
  • maxlength: Define la cantidad máxima de caracteres permitidos en el textarea.
  • minlength: Define la cantidad mínima de caracteres permitidos en el textarea.
  • name: Define un nombre para el campo.
  • placeholder: Muestra un texto de ayuda dentro del campo para dar al usuario sugerencias o pistas sobre lo que debe ingresar en él.
  • required: Especifica que el textarea es obligatorio (requerido) y debe ser llenado para proceder al envío del formulario.

Sintaxis

<textarea placeholder="Escribe un bloque de texto aquí" required></textarea>

Vista con estilos

select

Descripción

Crea una lista desplegable de opciones. Las opciones disponibles de la lista se definen usando etiquetas option

Atributos destacados

  • multiple: Habilita la selección de varias opciones de la lista

Sintaxis

<select>
    <option value="opcion1">Opción 1</option>
    <option value="opcion2">Opción 2</option>
    <option value="opcion3">Opción 3</option>
    <option value="opcion4">Opción 4</option>
</select>

Vista con estilos