Crear formularios HTML básicos

Introducción

En este laboratorio, aprenderemos a crear un formulario HTML básico utilizando la etiqueta <form> y diferentes elementos de formulario.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_valid("Form Validation") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70763{{"Formulario de entrada HTML"}} html/head_elems -.-> lab-70763{{"Formulario de entrada HTML"}} html/doc_flow -.-> lab-70763{{"Formulario de entrada HTML"}} html/forms -.-> lab-70763{{"Formulario de entrada HTML"}} html/form_valid -.-> lab-70763{{"Formulario de entrada HTML"}} html/form_group -.-> lab-70763{{"Formulario de entrada HTML"}} html/form_access -.-> lab-70763{{"Formulario de entrada HTML"}} html/custom_attr -.-> lab-70763{{"Formulario de entrada HTML"}} end

Configurando el documento HTML

Comenzaremos creando un documento HTML básico con la estructura básica:

<!doctype html>
<html>
  <head>
    <title>Ejemplo de formulario HTML</title>
  </head>
  <body></body>
</html>

Creando un formulario básico

Ahora crearemos un formulario HTML básico con un campo de entrada y un botón de envío. Agregue el siguiente código dentro de la etiqueta body:

<h1>Ejemplo de formulario HTML</h1>
<form>
  <label for="name">Nombre:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Enviar" />
</form>

En el código anterior, tenemos una etiqueta <h1> que sirve como título para nuestro formulario. Luego tenemos una etiqueta <form> y dentro de ella, tenemos una etiqueta <label> y una etiqueta <input>. El valor del atributo for de la etiqueta <label> debe coincidir con el atributo id en la etiqueta <input>. También tenemos una etiqueta <br> para agregar un salto de línea. Finalmente, tenemos una etiqueta <input> con un atributo type con el valor "submit".

Agregando elementos de formulario

Podemos agregar varios elementos de formulario utilizando diferentes tipos de campos de entrada en el formulario. Agreguemos un menú desplegable y casillas de verificación a nuestro formulario. Reemplace el código de la etiqueta <form> con el siguiente código:

<form>
  <label for="name">Nombre:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Género:</label>
  <select name="gender" id="gender">
    <option value="male">Masculino</option>
    <option value="female">Femenino</option>
    <option value="other">Otro</option>
  </select>
  <br /><br />
  <label for="hobby">Pasatiempos:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Programación</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Lectura</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Dibujo</label>
  <br /><br />
  <input type="submit" value="Enviar" />
</form>

En el código anterior, hemos agregado una etiqueta <select> para el campo de género con tres opciones utilizando la etiqueta <option>. También agregamos tres casillas de verificación con diferentes etiquetas para los pasatiempos.

Atributos del formulario

Podemos agregar atributos a la etiqueta <form> para personalizar el comportamiento del formulario. Agreguemos los atributos action y method a nuestro formulario. Reemplace el código de la etiqueta <form> con el siguiente código:

<form action="submit-form.php" method="post"></form>

En el código anterior, hemos agregado el atributo action con un valor de "submit-form.php" y el atributo method con un valor de "post". Esto le indica al navegador que envíe los datos del formulario al archivo "submit-form.php" utilizando el método HTTP POST.

Validación del formulario

Podemos utilizar el atributo required para hacer que ciertos campos sean obligatorios. Agregue el atributo required a la etiqueta <input> del campo de nombre.

<input type="text" name="name" id="name" required />

Accesibilidad del formulario

También podemos agregar características de accesibilidad a nuestro formulario utilizando las etiquetas <fieldset> y <legend>. Encierre el campo de género con el siguiente código:

<fieldset>
  <legend>Género:</legend>
  ...
</fieldset>

Esto agrupa el campo de género y agrega una leyenda para el grupo.

Agregando etiquetas

Finalmente, también podemos agregar etiquetas a nuestras casillas de verificación utilizando la etiqueta <label>. Encierre la casilla de verificación y la etiqueta para cada pasatiempo con el siguiente código:

<label for="coding">Programación</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

Esto asocia cada etiqueta con la casilla de verificación correspondiente.

Resumen

En este laboratorio, aprendimos cómo crear un formulario HTML básico utilizando la etiqueta <form> y diferentes elementos de formulario como campos de entrada, menús desplegables y casillas de verificación. También aprendimos cómo agregar atributos de formulario como method, action y required, y cómo agregar características de accesibilidad utilizando las etiquetas <fieldset> y <legend>.