PLANEACIÓN Y CONSULTA FORMULARIOS HTML P4

 PLANEACIÓN Y CONSULTA FORMULARIOS HTML P4

 ¿Qué es un formulario HTML y para qué sirve?

Los formularios HTML son esas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para introducir datos personales, por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados a la base de datos del administrador o bien a un programa que se encarga de procesarlos automáticamente.
Son una forma sencilla de establecer mecanismos para que el usuario pueda introducir información en una página web de forma sencilla e intuitiva, y el sitio web sea capaz de procesarla correctamente y añadirla en una base de datos de la página, enviarla por email o procesarla para mostrar información final al usuario.

Definiciones:

1. Controles de texto en HTML

Un control de texto es un sencillo cuadro de texto que puede admitir la introducción de cualquier valor y que tiene las siguientes propiedades: Identificador. Identificador exclusivo del control. Este es el identificador que se debe utilizar al hacer referencia al control en la plantilla sintaxis, permiten a los usuarios ingresar y editar texto en formularios web. Estos controles son utilizados para capturar información textual, como nombres, apellidos, direcciones de correo electrónico, comentarios, entre otros.

Los controles de texto más comunes en HTML son los elementos <input> con el atributo type="text". Estos elementos crean un campo de entrada de texto donde los usuarios pueden escribir y editar texto.

2. Campos de texto en una sola línea en HTML

Como su nombre indica, no se puede escribir más que una sola línea. Se utiliza para introducir texto corto.

Son elementos de formulario que permiten a los usuarios ingresar y editar texto en una sola línea. Estos campos son ampliamente utilizados en formularios web para recopilar información como nombres, direcciones de correo electrónico, números de teléfono, entre otros.

Los campos de texto en una sola línea solo permiten ingresar texto en una línea y no admiten saltos de línea. Si se necesita permitir la entrada de texto en varias líneas, se debe utilizar un campo de texto de varias líneas (<textarea>).

3. Campos de texto multilínea en HTML

En HTML, los campos de texto multilínea permiten a los usuarios ingresar texto en varias líneas en un formulario de página web. Estos campos son útiles cuando se necesita que el visitante escriba un mensaje largo o extenso.

Para crear un campo de texto multilínea en HTML, se utiliza el elemento <textarea>. A diferencia de los campos de texto de una sola línea, que se crean con el elemento <input>, el elemento <textarea>permite que los usuarios escriban texto en varias líneas.

4. Controles de Opción en HTML

Estos permiten a los usuarios seleccionar una o más opciones de controles de una lista de valores predefinidos. Los controles de opción pueden ser presentados con diferentes estilos y mecanismos de interacción con el usuario, dependiendo principalmente del elemento utilizado. Una lista de opciones puede declararse de tres formas: con casillas de verificación , con botones de opción y con listas .

5. Casillas de verificación en HTML

Las casillas de verificación se pueden indicar utilizando el atributo type="checkbox" en un campo de entrada de datos <input>. Este tipo de control permite mostrar una casilla al usuario, dándole la posibilidad de marcarlo como activado o desactivado. Es útil para recopilar información como preferencias, aceptación de términos y condiciones, categorías, entre otros. Cada casilla de verificación es independiente de las demás en el formulario.

6. Botones de opción en HTML

Un botón de opción permite al usuario seleccionar una única opción de una lista. Solo se puede seleccionar un botón de opción a la vez. Es útil cuando se quiere permitir al usuario elegir una opción exclusiva de entre varias posibles.

Estos botones se crean utilizando la etiqueta <input>con el atributo type="radio".Cada botón de opción debe tener un atributonamepara identificar el grupo al que pertenece y un atributovaluepara especificar el valor que se envía al servidor cuando se selecciona ese botón.

7. Listas en HTML

Las listas en HTML son elementos utilizados para agrupar y mostrar conjuntos de elementos en forma de lista dentro de una página web. Hay tres tipos principales de listas en HTML: listas ordenadas, listas desordenadas y listas de definiciones.

• Listas ordenadas: Las listas ordenadas en HTML son aquellas que muestran los elementos en un orden específico y se representan con números o letras que establecen su secuencia. Se crean utilizando la etiqueta <ol>, y cada elemento se define con la etiqueta <li>.
• Listas desordenadas: Las listas desordenadas en HTML son aquellas en las que el orden de los elementos no es relevante. Se representan con viñetas o símbolos y se crean utilizando la etiqueta <ul>, y cada elemento se define con la etiqueta <li>. 
• Listas de definiciones: Las listas de definiciones en HTML se utilizan para mostrar conceptos y sus definiciones correspondientes. Cada concepto se muestra con la etiqueta <dt>y cada definición con la etiqueta <dd>. Se crean utilizando la etiqueta <dl>. 

8. Botones en HTML

Un botón es un tipo especial de control que ha sido diseñado para interactuar con el usuario de una manera singular: una acción es ejecutada cada vez que el usuario lo presiona. Existe una amplia gama de botones, cada uno con sus peculiaridades en relación a sus capacidades y su conducta.

El elemento <button>se utiliza para crear botones en HTML. Representa un botón que se puede utilizar en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. Por defecto, los botones HTML se presentan con un estilo similar en todas las plataformas, pero este estilo se puede cambiar utilizando CSS.

También existen otros tipos de botones en HTML, como los botones de opción (<input type="radio">) y los botones de selección (<input type="checkbox">), que permiten al usuario seleccionar opciones múltiples.

9. Envío en HTML

En el contexto de HTML, el término "envío" se refiere a la acción de enviar datos desde un formulario en una página web a un servidor para su procesamiento. Cuando un usuario completa un formulario en una página web y hace clic en el botón "Enviar" (o cualquier otro elemento que desencadene la acción de envío), los datos ingresados ​​en el formulario se envían al servidor web para su procesamiento posterior.

Los botones de envío son insertados con el elemento <input>, teniendo el valor "submit" en su atributo type. El atributo value es importante en este control, ya que su valor es mostrado a modo de etiqueta dentro del botón. El siguiente ejemplo muestra un formulario con un control de texto y un botón de envío.

10. Reinicio en HTML

Consiste en el reinicio de la información de los campos del formulario a sus valores iniciales. En otras palabras, el estado de los campos en un formulario que ha sido reiniciado es el mismo que tenía cuando la página ha sido cargada. Esta acción elimina todos los cambios que haya realizado el usuario a los valores de los controles.

Se puede utilizar la etiqueta input con el atributo type="reset"para crear un botón de reinicio explícito en un formulario, que restablecerá los valores de los campos a sus valores iniciales.puede utilizar la etiquetainputcon el atributo type="reset"para crear un botón de reinicio explícito en un formulario, que restablecerá los valores de los campos a sus valores iniciales.

11. Etiquetado de controles en HTML

El etiquetado de controles en HTML se refiere a la asociación de etiquetas con elementos de formulario para proporcionar una descripción o nombre para el control. Esto ayuda a mejorar la accesibilidad y usabilidad de los formularios en la web.

La etiqueta HTML utilizada para asociar una etiqueta con un control de formulario es el elemento<label>. El elemento<label>se utiliza para proporcionar una descripción o nombre para un control específico, como un campo de entrada o un botón.

Para asociar un control con su etiqueta correspondiente, se utiliza el atributo for en la etiqueta <label>. El valor del atributo for debe ser igual al valor del atributo id del control al que se desea asociar.

12. Agrupación de controles en HTML

La agrupación de controles en HTML se refiere a la organización y estructuración de elementos de formulario relacionados en grupos lógicos. Esto se logra utilizando elementos como <fieldset>y <legend>.

El elemento <fieldset>se utiliza para crear un grupo de controles relacionados en un formulario. Proporciona una forma visual de agrupar y organizar los controles relacionados. Dentro del elemento <fieldset>, se pueden incluir varios elementos de formulario, como etiquetas, campos de entrada, botones, etc.

El elemento <legend>se utiliza para proporcionar una etiqueta descriptiva para el grupo de controles. Esta etiqueta se coloca dentro del elemento <fieldset>y se muestra junto al grupo de controles para indicar su propósito o función.

La agrupación de controles en HTML mediante el uso de elementos <fieldset>y <legend>ayuda a mejorar la organización y la usabilidad de los formularios, ya que permite a los usuarios comprender mejor la relación entre los diferentes controles y facilitar la navegación y el uso del formulario.

Webgrafía:

https://www.smsmasivos.com.mx/blog/que-es-un-formulario-html-o-web-y-como-crearlo

https://www.ibm.com/docs/es/spss-statistics/saas?topic=types-text-control#:~:text=Un%20control%20de%20texto%20es,control%20en%20la%20plantilla%20sintaxis%20.

https://comocreartuweb.com/curso-php-y-msql/que-es-un-formulario/campos-de-datos/campo-multilinea.html

https://www.htmlquick.com/es/tutorials/forms/2.html

https://lenguajehtml.com/html/formularios/etiqueta-html-input-checkbox-radio/#:~:text=Casillas%20de%20verificaci%C3%B3n,-Las%20casillas%20de&text=Este%20tipo%20de%20control%20permite,marcarlo%20como%20activado%20o%20desactivado.

https://cybmeta.com/anadir-un-grupo-de-radio-buttons-en-un-formulario

https://www.manualweb.net/html/listas-html/

https://keepcoding.io/blog/como-crear-listas-en-html/

https://developer.mozilla.org/es/docs/Web/HTML/Element/button

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=527:get-y-post-html-method-formas-de-envio-de-datos-en-formulario-diferencias-y-ventajas-ejemplos-cu00721b&catid=69&Itemid=192

http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/minimize-error-cues.html

https://developer.mozilla.org/es/docs/Web/HTML/Element/input