Inicio > Blog > Formularios en HTML

Formularios en HTML

HTMLFORMULARIOSWEB DEVELOPMENTFRONTEND

Los formularios HTML son la manera de interacción entre el usuario y el sitio web. Se utilizan para recoger datos introducidos por el usuario y llevarlos al servidor para el procesamiento.

El elemento <form>

Este elemento en HTML5 se utiliza para crear el formulario con el que el usuario tendrá interacción por medio del sitio web al servidor. Puede ser para solicitar una búsqueda o para introducir datos a una base de datos.

<form>
    <!-- elementos del form -->
</form>

Atributos del <form>

Como aprendimos en un post anterior la etiqueta <form> tiene sus atributos como cualquier otra equiqueta HTML, como lo son:

  • action: es la URL de un programa que procesa la información enviada por medio del formulario. Ejemplo:
<form action="/submit-form">
    .
    elementos del form
    .
</form>

  • method: es el método HTTP que el navegador usa para enviar el formulario. Los valores posibles son:

    • GET: los datos del formulario son adjuntados a la URL dek atributo action, con un ’?’ separador, y la URL resultante es enviada al servidor.
    • POST: los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor.

  • enctype: cuando el valor del method es POST este atributo es el tipo MIME del contenido que es usado para enviar el formulario al servidor. Los posibles valores son:

    • application/x-www-form-urlencoded: El valor por defecto si un atributo no está especificado.
    • multipart/form-data: Usar este valor si se está usando el elemento <input> con el atributo type ajustado a “file”.
    • text/plain: Usar este valor si el formulario contiene texto plano.

  • target: un nombre o keyword inicando donde mostrar la respuesta que es recibida despues de enviar el formulario.

    • _blank: Carga la respuesta dentro de una nueva ventana
    • _self: Carga la respuesta dentro del mismo frame HTML
    • _parent: Carga la respuesta en el marco padre del marco actual en HTML.
    • _top: Carga la respuesta en el marco principal del documento HTML.

  • novalidate: Este atributo booleano indica que el formulario no es validado cuando es enviado. Si el atributo no existe formnovalidate en un <button> o en un elemento <input> que pertenece al formulario.

Elementos básicos de un formulario

  • <input>:
  • <label>:
  • <textarea>:
  • <button>:
  • <select> y <option>:

Elemento <input>:

Se utiliza para crear controles interactivos basados en la web, con el fin de recidatos del usuario.

  • Tipos de <input> mas utilizados:
<input type="text" placeholder="Texto">
<input type="password" placeholder="Contraseña">
<input type="email" placeholder="Correo electrónico">
<input type="number" placeholder="Número">
<input type="date" placeholder="Fecha">
<input type="checkbox"> Acepto términos y condiciones
<input type="radio" name="gender" value="male"> Masculino
<input type="radio" name="gender" value="female"> Femenino
<input type="submit" value="Enviar">
<input type="file" accept="image/*">

Mas información

Elemento <label>:

Representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label.

Ejemplo:

<!-- Un simple ejemplo de un label con el atributo for -->
<label for="Name">Click me</label>
<input type="text" id="Name" name="Name" />

<!-- Aun mas simple -->
<label>Click me <input type="text" id="Name" name="Name" /></label>

Elemento <textarea>:

Representa un control para la edición mutilínea de texto sin formato.

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

Elemento <button>:

La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar.

<button name="button">Click me</button>

Elementos <select> y <option>:

Representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos <option>, los cuales pueden ser agrupados por elementos <optgroup>.

Ejemplo:

<!-- The second value will be selected initially -->
<select name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

Construyamos nuestro primer formulario

Haremos un formulario sencillo, para enviar un mensaje a un WhatsApp (hoy utilizaremos solo el código de área de Colombia).

Necesitaremos 3 elementos:

  • El número de teléfono a donde enviar el mensaje.
  • El mensaje que enviaremos.
  • El botón de enviar.
<form>
  <p class="campo">
    <label for="phone-number">Teléfono:</label>
    <input type="text" id="phone-number" name="phone-number" required placeholder="Número de teléfono">
  </p>
  <p class="campo">
    <label for="message">Mensaje:</label>
    <textarea id="message" name="message" placeholder="Escribe tu mensaje aquí"></textarea>
  </p>
  <p class="campo">
    <button type="submit" id="sendBtn">Enviar</button>
  </p>


<!-- agregamos algunos estilos -->
<style>
  form {
    width: 300px;
    background-color: #f1f1f1;
    margin: 20px auto;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .campo {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
  }

  label {
    margin-bottom: 5px;
    font-weight: bold;
  }

  input, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    resize: none
  }

  button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    cursor: pointer;
  }

  button:hover {
    background-color: #45a049;
  }
</style>
<!-- ahora la funcionalidad-->

<script>
    sendBtn.addEventListener('click', (e)=>{
    e.preventDefault()
    let phone = document.querySelector('#phone-number').value;
    let message = document.querySelector('#message').value;
    let url = `https://wa.me/57${phone}?text=${message}`; 
    window.open(url, '_blank');
} ) 
</script>
</form>