Desarrollo de formularios web

¿Cómo se crea?

Todos los formularios HTML comienzan con el elemento <form> de la siguiente forma:

<form action="/my-handling-form-page" method="post">

</form>

Este elemento define formalmente un formulario. Es un contenedor como lo son <div>or <p>, pero también soporta algunos atributos específicos para configurar la forma en que el formulario se comporta. Todos sus atributos son opcionales pero se considera una buena práctica que siempre al menos el los atributos action y method se encuentren presentes.

• El atributo action define la locación (una URL) desde donde la información recolectada por el formulario debería enviarse.
• El atributo method define con que método HTTP se enviará la información (puede ser "get" o "post"). 

Si quieres introducirte en como estos atributos funcionan, lo veras detallado en el artículo Enviando y recuperando información de formularios. 

Agrega widgets con los elementos <label>, <input>, y <textarea>

Nuestro formulario de contacto es muy simple y contiene tres campos de texto, cada uno con un label. El campo de texto para el nombre será de linea simple; el del e-mail también será de linea simple que aceptará solamente una dirección de correo electrónico; el campo de texto para el mensaje será multilínea.

En términos de código HTML vamos a tener algo como lo siguiente:

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

Los elementos <div> están allí para estructurar nuestro código de forma conveniente y poder darles estilos de una forma más sencilla (ver abajo). Puedes notar el uso de atributo for en todos los elementos <label>; es la forma correcta de unir un label a un widget en un formulario. Este atributo referencia el id del widget correspondiente. Hay algunos beneficios de hacer esto. El más obvio es permitir al usuario hacer click en el label para activar el widget correspondiente. Si quieres aprender otros beneficios, tienes todo detallado en el artículo: Como estructurar un formulario HTML.

En el elemento <input>, el atributo mas importante es type. Este atributo es sumamente importante porque define la forma en que el elemento <input> se comporta. Puede cambiar radicalmente el elemento, asi que presta atención a esto. Si quieres saber más sobre esto, lee el artículo Widgets nativos de formularios. En nuestro ejemplo usamos únicamente el valor text - el valor por defecto de este atributo. Representa un campo de texto básico de una linea que acepta cualquier tipo de texto sin ningún control o validación. 

Por último pero no menos importante, veamos la sintaxis del <input /> vs. <textarea></textarea>. Esta es una de las extrañezas del HTML. La etiqueta <input> se cierra a si misma, lo que significa que si quieres cerrar formalmente el elemento, tienes que agregar un " / " al final del mismo y no una etiqueta de cierre. Por el contrario, <textarea> no es un elemento que se cierre a si mismo, por lo que tienes que cerrarlo con su etiqueta correspondiente. Esto tiene impacto sobre una característica específica de los formularios HTML: la forma en que defines el valor por defecto. Para definir el valor por defecto de un elemento <input> debes usar el atributo value de la siguiente forma:

<input type="text" value="by default this element is filled with this text" />

Por el contrario, si quieres definir el valor por defecto de un <textarea>, solamente tienes que poner el valor por defecto entre el comienzo y el final de las etiquetas del elemento <textarea>, así:

<textarea>by default this element is filled with this text</textarea>

Y un <button> para finalizar

Nuestro formulario está casi listo; tenemos que agregar un botón para permitir al usuario enviar la información que llenó en el formulario. Esto se hace simplemente usando el elemento <button>:

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
    
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

Un botón puede ser de tres tipos: submit, reset, o button.

• Un click en un botón submit envía la información del formulario a una pagina web definida por defecto en el atributo action del elemento <form>.
• Un click en un botón reset reinicia inmediatemente todos los widgets del formulario a sus valores por defecto. Desde un punto de viste de UX, esto se considera una mala práctica.
• Un click en un botón button... ¡no hace nada! Puede sonar tonto, pero es muy útil para construir botones customizados con JavaScript.

Puedes también usar el elemento <input> con el type correspondiente para producir un botón. La diferencia principal con el elemento <button> es que el elemento <input>únicamente permite texto plano como su label mientras que el elemento <button>permite contenido HTML en su label.

¿Qué es?

Los formularios HTML son uno de los puntos principales de interacción entre un usuario y un sitio web o aplicación. Ellos permiten a los usuarios enviar información a un sitio web. La mayor parte de las veces se envía información a un servidor web, pero la pagina web también puede interceptarla para usarla por su lado.

Un formulario HTML está hecho de uno o más widgets. Estos widgets puede ser campos de texto (de una linea o multilínea), cajas de selección, botones, checkboxes, o botones de radio. La mayoría del tiempo, estos widgets están junto a un label que describe su propósito.

¿Cuál es la utilidad?

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones.

Calidad de software

La calidad de software es un proceso para el cual se llega mediante varios tipos de pruebas que van desde las más básicas a las más avanzadas poniendo en prueba las líneas de código, interfaces, bases de datos todo esto llevando a un software de óptima calidad para ser entregado al cliente o en determinantes fechas entregándole al cliente un certificación de óptima calidad, sin embargo eso no va a garantizar que el software sea perfecto para eso debe de hacerse las pruebas periódicamente para garantizar el mejor desempeño de él.