Elementos de formulario en HTML

Elementos de formulario en HTML

Los elementos de formulario HTML ayudan a crear un formulario con diversas funcionalidades. Un formulario de entrada incluye entrada, salida, botón, seleccionar, TextARea, etiqueta, DataList, FieldSetetc,. Entre estos, la etiqueta de entrada es el elemento más utilizado y se considera la parte central de un formulario HTML. Mientras que otros elementos de forma tienen su propia funcionalidad. Teniendo en cuenta los elementos del formulario, este artículo sirve a los siguientes resultados de aprendizaje.

  • información básica y uso de cada elemento de formulario
  • Varios ejemplos para cada elemento

Elementos de formulario en HTML

Esta sección proporciona una lista de varios elementos de formulario que tienen un papel clave en la generación de formularios. Cavemos en ellos uno por uno:

Elemento de entrada

Este elemento se considera como el elemento central de las formas HTML y es bastante imposible rastrear una forma que no contiene ningún elemento de entrada. La funcionalidad de los elementos de entrada depende del conjunto de atributos respaldados por ellos. Por ejemplo, el atributo de tipo define el tipo (cuadro de texto, radio-botton, casilla de verificación) del campo de entrada.

Ejemplo

Usando el código HTML, las siguientes líneas de código crean un campo de texto con el elemento de entrada.



Junto con el elemento de entrada, hemos utilizado un atributo (marcador de posición) del elemento de entrada.

Producción

La salida muestra que el campo de texto se crea utilizando el elemento de entrada. Como hemos utilizado el atributo de marcador de posición, el texto ficticio también se muestra en el cuadro de texto.

Elemento de etiqueta

El elemento de la etiqueta define el propósito de varios elementos de forma para los usuarios finales. Se puede declarar un elemento de etiqueta utilizando la siguiente sintaxis.

Al igual que la mayoría de los elementos HTML, el contenido para el elemento de la etiqueta se escribe entre las etiquetas.

Ejemplo:

El uso del elemento de la etiqueta se elabora utilizando el siguiente código.





Se crea una etiqueta para asociarlo con un campo de texto que obtenga el nombre del usuario. El para atributo (del elemento de etiqueta) e ID (del elemento de entrada) Debe tener los mismos valores para que puedan unirse.

Producción

La salida contiene una etiqueta que le indica que ingrese su nombre en el cuadro de texto.

Elemento de selección

El elemento Select crea una lista desplegable de varias opciones. El elemento genera múltiples opciones en una lista desplegable.

Ejemplo

El siguiente código practica el elemento select para crear una lista desplegable.





El código anterior se describe como,

  • En primer lugar, se declara una etiqueta de etiqueta (solo en aras de guiar al usuario final).
  • La etiqueta Seleccionar se define y contiene tres opciones

Producción

La salida muestra una etiqueta, un menú desplegable y un botón.

Elemento TextAREA

El elemento TextAREA crea un campo de texto que permite escribir múltiples líneas. Aunque, el elemento de entrada puede crear un campo de texto, pero admite solo entradas de una sola línea.

Ejemplo

El código que se proporciona a continuación muestra el uso del elemento TextAREA





El código anterior crea una etiqueta para un campo de texto y el campo de texto utilizando el elemento TextAREA. Inicialmente, se ejerce la altura y el ancho predeterminados del elemento TextAREA. Sin embargo, puede usar el atributo de altura y ancho para obtener el tamaño personalizado de un elemento TextAREA.

Producción

Elemento de botón

Se puede crear un botón procesable usando el elemento de botón de los formularios HTML.

Ejemplo

El código escrito a continuación practica el elemento del botón




El código escrito anteriormente crea dos botones usando elementos de botón.

Producción

Elemento de campos

Este elemento se utiliza para agrupar los múltiples elementos de una forma en un solo campo.

Ejemplo



Información personal
Su nombre:



Tu correo electrónico:



El código anterior crea un FieldSet usando el elemento FieldSet en HTML y su subtítulo se define usando el elemento Legend. El elemento FielDset contiene dos elementos de entrada que obtienen el nombre y el correo electrónico del usuario.

Producción

Elemento datalista

El elemento de datos extiende la funcionalidad del elemento de entrada. El elemento de datos le proporciona una lista de entradas predefinidas para elegir la entrada de ellos (o también puede ingresar su propio valor).

Ejemplo

El código proporcionado a continuación practica el uso del elemento datalista





En el código anterior,

  • Se crea una lista de entrada y luego se declara el elemento dataList
  • Dentro del elemento datalista, la etiqueta se usa para crear opciones para el elemento dataList.

Producción

Elemento de salida

Este elemento se utiliza para mostrar la salida de cualquier acción (envío de formulario).

Ejemplo

El siguiente código practica el atributo de salida para obtener la suma de dos campos de números.


+
=

En el código anterior,

  • dos tipos de entrada = "número"Están definidos teniendo identificaciones a y B respectivamente
  • el producción El elemento considera ambas identificaciones para el procesamiento
  • el en la entrada El evento del elemento de formulario agrega tanto el número (cuando se insertan)

Producción

Al pasar por este artículo, habría aprendido a crear un formulario HTML con funciones.

Conclusión

Los elementos de formulario son la parte interesada clave en la creación de un formulario detallado. Los elementos de formulario incluyen entrada, etiqueta, textura, botón y muchos más. Este artículo enumera los elementos de formulario en HTML y también se proporciona un ejemplo de cada elemento. Se puede crear una forma HTML simple con la ayuda de algunos elementos de formulario. Sin embargo, si desea un formulario con funcionalidades detalladas, se proporcionan muchos elementos de formulario HTML para practicar en esta guía.