Introducción a los elementos de formulario HTML

En las tecnologías de desarrollo web (especialmente para el front-end), "HTML" es el lenguaje de marcado básico o primario que usamos para mostrar las páginas web (la página que vemos en un sitio web). A veces, en una página HTML, junto con la visualización de otro contenido, también necesitamos tomar algunas entradas del usuario (especialmente en sitios web dinámicos). Y para tomar las entradas del usuario en una página HTML, necesitamos usar múltiples elementos de formulario para crear esos formularios correctamente y con la ayuda de esos formularios, tomamos las entradas del usuario de manera correcta y colocamos esas entradas (datos) en nuestro Bases de datos en el back-end. Ahora, como sabemos que los códigos HTML están escritos bajo varios elementos de etiqueta (), básicamente, los "Elementos de formulario HTML" son aquellos elementos que se usan dentro de una etiqueta "". Y estos elementos junto con otros atributos estándar y únicos dan una forma y estructura que les permite a los usuarios saber qué hacer con el formulario y cómo proceder de manera estructural.

Explicar los elementos de formulario HTML (incluida la sintaxis y ejemplos con salida)

Dado que hay varios elementos de formulario HTML para crear un formulario y darle al formulario un aspecto adecuado de una manera estructurada; a continuación se explican algunos de ellos uno por uno.

Si. No.EtiquetasSignificados / descripciones

1

Para definir un formulario HTML para las entradas del usuario

2

Para definir el control de entrada

3

Para especificar una lista de opciones predefinidas

4 4

Para definir elementos relacionados con el grupo

5 5

Para definir una entrada segura

6 6

Para definir una etiqueta de entrada

7 7

Para definir un título para el conjunto de campos

8

Para definir un grupo de opciones similares.

9 9

Para definir una opción para el menú desplegable

10

Para definir un resultado

11

Para definir una lista de menú desplegable

12

Para definir un área de entrada multilínea

Nota: La mayoría de los elementos de etiqueta HTML discutidos aquí son para HTML5, que es la última versión del lenguaje HTML. El elemento de etiqueta ya no es compatible con HTML5; en realidad se usó para la versión anterior de HTML.

Sintaxis y Ejemplo

A continuación se analizan algunas sintaxis y ejemplos de elementos de formulario HTML con salidas:

  1. Elemento ""

Este elemento puede contener muchos otros elementos, incluido el siguiente:

    Ejemplo para un elemento "" con entrada y botón de envío:

    Sintaxis:


    Your Name:

    Códigos



    Your name:


    Salida:

    1. Elemento ""

    Este elemento es un elemento en línea y pertenece al grupo de elementos de formulario.

    Sintaxis:


    Input name:
    Input age:

    Códigos



    Input name:
    Input age:


    Salida:

    1. Elemento ""

    Por lo general, especifica una lista predefinida de entradas para el elemento donde los usuarios pueden elegir cualquier opción de la lista predefinida.

    Sintaxis:





    Códigos









    Salida:

    1. Elemento ""

    Este elemento se usa básicamente para agrupar elementos relacionados en formas y dibuja un cuadro alrededor de los elementos similares.

    Sintaxis:


    Celebrity:
    Name:
    Phone:
    Age:

    Códigos




    Celebrity:
    Name:
    Phone:
    Age:

    Salida:

    1. Elemento ""

    Este elemento puede ubicarse fuera del formulario, pero aún así, podría ser parte del formulario. Por lo general, este elemento se usa para especificar una o más formas. Este elemento se utiliza recientemente en la versión HTML5 para generar una clave de cifrado para pasar datos cifrados a través de un formulario en un sitio web basado en HTML.

    Sintaxis:

    Códigos



    Username:

    El campo keygen mencionado a continuación está fuera del formulario, pero sigue siendo parte del formulario anterior.

    Cifrado:

    Salida:

    1. Elemento ""

    Este elemento básicamente le da un nombre al formulario de entrada para que los usuarios entiendan qué datos de entrada deberían ser. Actúa como un indicador para los usuarios.

    Sintaxis:

    …

    Códigos


    Example of HTML label tag


    Boy
    Girl

    Salida:

    1. Elemento ""

    Este elemento en realidad define un título para un elemento. Es una especie de elemento de apoyo para otro elemento, una parte del elemento de grupo.

    Sintaxis:


    Celebrity:
    Name:
    Phone:
    Age:

    Códigos


    Example of HTML legend tag


    Celebrity:
    Name:
    Phone:
    Age:

    Salida:

    1. Elemento ""

    Este elemento es un elemento relacionado con el grupo que se utiliza para las opciones en una lista desplegable en un formulario HTML. Ayuda a los usuarios a manejar una lista larga fácilmente.

    Sintaxis:


    Ninja 300
    Ninja 450

    Pulsar 200
    Pulsar 150

    Códigos



    Example of HTML legend tag


    Ninja 300
    Ninja 450

    Pulsar 200
    Pulsar 150

    Salida:

    1. Elemento ""

    Este elemento se usa para representar una opción de una lista desplegable debajo del elemento; la lista desplegable debe contener al menos una opción.

    Sintaxis:

    …

    Códigos



    Example of HTML option tag


    Bikes
    Cars
    Buses

    Salida:

    1. Elemento ""

    Este elemento se usa básicamente para mostrar la salida de un cálculo (por ejemplo, en un cálculo con guión).

    Sintaxis:

    …

    Códigos



    Example of HTML output Tag

    +
    =

    Salida:

    1. Elemento ""

    Este elemento se usa para hacer una selección de una lista dentro de un formulario.

    Sintaxis:


    Bike
    Car
    Bus

    Códigos



    Example of HTML select Tag


    Bike
    Car
    Bus

    Salida:

    1. Elemento ""

    Este elemento se utiliza para definir entradas de texto de varias líneas (por ejemplo, para dirección).

    Sintaxis:

    Pon tu comentario:
    Pon aquí…

    Códigos


    Example of HTML textarea Tag

    Pon tu comentario:
    Pon aquí…


    Salida:

    Conclusión

    Hay tantos elementos de formulario HTML disponibles; En este artículo, hemos discutido algunos de los elementos de formulario HTML básicos o nativos. Los elementos de formulario HTML nos ayudan a crear formularios HTML adecuados y funcionales. El punto a tener en cuenta es que la mayoría de los elementos de formulario HTML necesitan algunos atributos para ser incluidos junto con ellos. Algunos de los elementos dependen unos de otros y deben codificarse juntos. Es posible que todos los navegadores no muestren los elementos que ya están en desuso.

    Artículos recomendados

    Esta ha sido una guía para los elementos de formulario HTML. Aquí discutimos la introducción y los elementos de forma con sintaxis y código de muestra. También puede consultar nuestros otros artículos sugeridos para obtener más información:

    1. Versiones de HTML
    2. Ventajas de HTML
    3. Carrera en HTML
    4. Bloques HTML
    5. Curso gratuito de HTML
    6. Marcos HTML
    7. Establecer un color de fondo en HTML con ejemplo

    Categoría:

    Herramientas de desarrollo web