Creando un Formulario HTML: "Modern Clix Survey Form"

-

 ¡Bienvenidos a Modern Clix! En este blog post, vamos a explorar en detalle cómo crear el emocionante "Modern Clix Survey Form" utilizando HTML. Profundizaremos en los elementos y atributos HTML utilizados para construir este formulario. Puedes ver el código completo en el repositorio de Github y puedes visitar el sitio para revisar el resultado. Vale aclarar que el objetivo es trabajar con la maquetación de formularios con fines didácticos, por ello el formulario en este caso no está enviando la información a un servidor.



Estructura Básica de la Página

Antes de sumergirnos en el formulario en sí, es esencial entender la estructura básica de nuestra página HTML que proporciona la base para nuestro formulario:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Metadatos, enlaces a fuentes y estilos -->
    <title>Modern Clix Survey Form</title>
</head>
<body>
    <!-- Contenido de la página, incluyendo el formulario -->
    <form method="post" action="javascript:void(0);" id="survey-form">
        <!-- Aquí iría el contenido del formulario,         sus elementos de input y selección -->
    </form>
    <!-- Scripts y pie de página -->
</body>
</html>

Creando el Formulario

Datos Personales

El formulario comienza con la recopilación de datos personales, como el nombre y el correo electrónico. Aquí se muestran estos elementos en detalle:

      <label id="name-label" for="name">
        Name
        <input
        id="name"
        type="text"
        placeholder="John Wayne"
        required/>
      </label>
      <label id="email-label" for="email">
        Email
        <input
          id="email"
          type="email"
          placeholder="johnwayne@mail.com"
          required/>
      </label>

  • <label>: Etiqueta que describe el campo de entrada. Se asocia con el <input> correspondiente a través del atributo for.
  • <input>: Elemento de entrada. Su atributo type define el tipo de entrada (en este caso, "text" y "email"). El atributo placeholder proporciona un texto de ejemplo. El atributo required indica que estos campos son obligatorios.

Edad

Si deseamos recopilar la edad de los visitantes, podemos usar un campo de tipo número. El código se ve así:

      <label id="number-label" for="number">
        Age (optional)
        <input
          id="number"
          type="number"
          min="1"
          max="200"
          placeholder="35"/>
      </label>

El <input> con type="number" permite ingresar números. El atributo min establece el valor mínimo y el atributo max el valor máximo permitido.


Área Favorita de Desarrollo Web

Para conocer la preferencia de nuestros visitantes en cuanto al desarrollo web, hemos incluido un menú desplegable (select), comúnmente conocido como un "dropdown menu":

      <label for="dropdown">
        What is your favorite area of ​​web development?
        <select id="dropdown">
          <option value="">(select one)</option>
          <option value="1">Frontend</option>
          <option value="2">Backend</option>
          <option value="3">UX/UI</option>
          <option value="4">Full Stack</option>
        </select>
      </label>

  • <select>: El elemento select crea un menú desplegable. Los visitantes pueden hacer clic en él para seleccionar una opción.
  • <option>: Cada elemento de opción dentro del menú desplegable es definido por una etiqueta <option>. El atributo value de cada opción establece el valor que se envía al servidor cuando se selecciona. Esto es importante para procesar la elección del usuario en el lado del servidor.

Situación Laboral Actual en Desarrollo Web

Queremos conocer la situación laboral de nuestros visitantes. Usamos botones de radio para esto:

      <legend>Current job situation in web development</legend>
      <div class="radio-container">
        <input
          value="web-dev-job"
          id="web-dev-job"
          type="radio"
          name="job-situation"
          checked/>
            <label class="radio-label" for="web-dev-job">
              I've got a job in Web Development
            </label>
      </div>
      <div class="radio-container">
        <input
          value="another-job"
          id="another-job"
          type="radio"
          name="job-situation"/>
            <label class="radio-label" for="another-job">
              I've got another kind of job
            </label>
      </div>
      <div class="radio-container">
        <input
          value="no-job"
          id="no-job"
          type="radio"
          name="job-situation"/>
          <label class="radio-label" for="no-job">
            I have no job currently
          </label>
      </div>

  • <legend>: Etiqueta que proporciona una descripción del grupo de botones de radio.
  • <input> con type="radio": Botones de radio que permiten a los visitantes seleccionar una única opción. El atributo name agrupa los botones de radio para que solo se pueda seleccionar uno a la vez. El atributo value es crucial, ya que define el valor que se envía al servidor cuando se selecciona esta opción.

Temas de Interés para Futuros Blogposts

Por último, permitimos a los visitantes seleccionar los temas que les gustaría que cubriéramos en futuros blogposts utilizando casillas de verificación:

      <legend>
        What topics would you like us to cover in future blogposts? (Check all
        that apply)
      </legend>
      <div class="checkbox-container">
        <input type="checkbox" id="flexbox" value="flexbox" />
        <label for="flexbox">
          CSS Flexbox
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="grid" value="grid" />
        <label for="grid">
          CSS Grid
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="animations" value="animations" />
        <label for="animations">
          CSS Animations
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="accesibility" value="accesibility" />
        <label for="accesibility">
          Accesibility
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="javascript" value="javascript" />
        <label for="javascript">
          JavaScript Algorithms and Data Structures
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="libraries" value="libraries" />
        <label for="libraries">
          Front End Development Libraries
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="backend-dev" value="backend-dev" />
        <label for="backend-dev">
          Backend Development
        </label>
      </div>

Los <input> con type="checkbox" o casillas de verificación permiten a los visitantes seleccionar múltiples opciones. El atributo value es importante para identificar las opciones seleccionadas al procesar el formulario.

Comentarios y Sugerencias

La sección de comentarios y sugerencias es esencial para recopilar las opiniones de los visitantes. Hemos incluido un campo de texto grande para que puedan expresar sus pensamientos. El <textarea> es ideal cuando necesitas recopilar comentarios largos o párrafos de texto debido a que a diferencia del <input type="text"> que permite una sola línea de texto permite la entrada de texto en varias líneas. Se puede definir las dimensiones del campo de texto mediante los atributos rows y cols:

      <label for="comments">Comments and suggestions:</label>
      <textarea id="comments" rows="5" cols="30"></textarea>

En este caso, hemos establecido rows="5" para proporcionar espacio suficiente para un comentario más largo. También hemos establecido cols="30" para que el campo de comentarios sea lo suficientemente ancho para acomodar texto legible.

Envío del Formulario

Una vez que los visitantes han completado el formulario, pueden enviar sus respuestas haciendo clic en el botón "Submit". El botón "Submit" es crucial en cualquier formulario HTML, ya que permite a los usuarios enviar sus datos al servidor para su procesamiento. Aquí está cómo se ve esta sección en el código:

<button type="submit" id="submit">Submit</button>

  • El <button> es un elemento que se utiliza para crear un botón interactivo en un formulario o en cualquier otra parte de una página web. 
  • El botón de type="submit": Indica que este botón tiene la función de enviar el formulario al servidor cuando se hace clic en él.
  • id="submit": El atributo id proporciona una identificación única al botón. Esto es útil si se necesita aplicar estilos o scripts específicos al botón a través de CSS o JavaScript.
Una vez que los usuarios han completado todas las secciones del formulario, pueden hacer clic en el botón "Submit" para enviar sus respuestas al servidor. El servidor procesará los datos ingresados y realizará cualquier acción específica que se haya programado, como almacenar las respuestas en una base de datos, enviar correos electrónicos o realizar cálculos.

Este es un ejemplo de cómo crear un formulario HTML con una variedad de elementos de entrada y selección, cada uno con sus propios atributos específicos. Los formularios son esenciales para recopilar información de los visitantes de un sitio web y pueden ser personalizados de muchas maneras. ¡Esperamos que este ejemplo te haya ayudado a comprender cómo se estructura un formulario HTML! 

¡Gracias por unirte a nosotros en este recorrido por el "Modern Clix Survey Form"!

Comentarios

Publicar un comentario

Entradas populares de este blog

Un viaje a través de las bases de CSS: Diseñando el Menú CBD de Queen Indika

-
Imagen
¡Bienvenidos al mundo del diseño web con CSS! Hoy, vamos a desglosar el código CSS para la creación del menú de "Queen Indika CBD" (Una tienda ficticia de productos de CBD) y explorar cómo utilizar este lenguaje para crear un diseño elegante para tus sitios web. Puedes ver el código aquí y el resultado final del sitio  aquí  . Así luce nuestro menú. Introducción Antes de sumergirnos en el código CSS, observemos la estructura HTML básica de la página. El archivo HTML contiene una estructura jerárquica que organiza el contenido de manera lógica. Luego, el CSS se encarga de darle estilo a esta estructura. Este es el código HTML. Presiona aquí para verlo en Github Para vincular el archivo HTML a nuestro archivo de hoja de estilos CSS, generalmente llamado "styles.css" tenemos que agregar en el <head> la siguient...
Leer más

Cómo hacer tu primer sitio web utilizando solamente HTML

-
Imagen
En un mundo cada vez más digitalizado, tener la capacidad de crear tu propio espacio en línea es una habilidad valiosa. Imagina un lienzo en blanco en el vasto lienzo digital de Internet, esperando a que le des vida con tu creatividad. Bienvenidos a la emocionante aventura de la creación de páginas web con HTML. En este instructivo, te guiaremos a través de los pasos fundamentales para construir tu propia página web desde cero utilizando HTML, en este caso usaremos una página sobre Rock, la idea es que tú le agregues tu toque personal con un contenido que sea de tu interés. No necesitas ser un experto en programación ni tener experiencia previa; todo lo que necesitas es un poco de curiosidad y un deseo de explorar el fascinante mundo de la creación web. Así que, prepárate para sumergirte en el código, dar vida a tus ideas y compartir tu visión en línea. Desde los títulos hasta las imágenes y formularios, aprenderemos juntos a dar forma a la web en este emocionante viaje hacia la creaci...
Leer más