Cómo crear un formulario HTML: guía paso a paso

La siguiente sección describe diferentes tipos de controles que puede usar en su formulario.

Este es el elemento más utilizado dentro de las formas HTML.

Le permite especificar varios tipos de campos de entrada del usuario, dependiendo del atributo de tipo. Un elemento de entrada puede ser de campo de texto de tipo, campo de contraseña, casilla de verificación, botón de radio, botón Enviar, botón de reinicio, cuadro de selección de archivos, así como varios tipos de entrada nuevos introducidos en HTML5.

Los tipos de entrada más utilizados se describen a continuación.

Los campos de texto son áreas de línea que permiten al usuario ingresar texto.

Los controles de entrada de texto de una sola línea se crean utilizando un elemento , cuyo atributo de tipo tiene un valor de texto. Aquí hay un ejemplo de una entrada de texto de una sola línea utilizada para tomar el nombre de usuario:

NOTA: La etiqueta se usa para definir las etiquetas para elementos . Si desea que su usuario ingrese varias líneas, debe usar un en su lugar.

¿Cómo se hace formularios en HTML?

Los elementos de entrada son los elementos más comunes que se utilizan en formas HTML. Se pueden crear varios campos de entrada del usuario, como TextField, Cuestion de verificación, campo de contraseña, botón de radio, botón Enviar, etc. Los elementos de entrada más comunes se enumeran a continuación:

• Campo de texto en formularios HTML: el campo de texto es un campo de entrada de una línea que permite al usuario ingresar texto. Los controles de entrada de campo de texto se crean utilizando el elemento «Entrada» con un atributo de tipo que tiene valor como «texto».
• Campo de contraseña en formularios HTML: los campos de contraseña son un tipo de campo de texto en el que el texto ingresado se enmascara usando Asterisk o puntos para prevención de la identidad del usuario de otra persona que está mirando a la pantalla. Los controles de entrada de campo de contraseña se crean utilizando el elemento «Entrada» con un atributo de tipo que tiene valor como «contraseña».
• Producción :
• Botones de radio en forma HTML: los botones de radio se utilizan para permitir que el usuario seleccione exactamente una opción de una lista de opciones predefinidas. Los controles de entrada del botón de radio se crean utilizando el elemento «Entrada» con un atributo de tipo que tiene valor como «radio».
• Producción :
• Las casillas de verificación en formulario HTML: las casillas de verificación se utilizan para permitir al usuario seleccionar una o más opciones de un conjunto de opciones predefinido. Los controles de entrada de casilla de verificación se crean utilizando el elemento «Entrada» con un atributo de tipo que tiene valor como «casilla de verificación».
• Producción :

Los cuadros de selección de archivos se utilizan para permitir al usuario seleccionar un archivo local y enviarlo como un archivo adjunto al servidor web. Es similar a un cuadro de texto con un botón que permite al usuario buscar un archivo. El archivo, la ruta y el nombre del archivo también se pueden escribir. Los cuadros de selección de archivos se crean utilizando el elemento «Entrada» con un atributo de tipo que tiene valor como «archivo».

El área de texto es un control de entrada de texto de línea múltiple que permite al usuario proporcionar una descripción o texto en múltiples líneas. Se crea un control de entrada de área de texto utilizando el elemento «TextAREA».

Se utilizan cuadros de selección para permitir a los usuarios seleccionar una o más de una opción de una lista desplegable de opciones. Los cuadros de selección se crean utilizando dos elementos que son «Seleccionar» y «Opción». Los elementos de List se definen dentro del elemento Seleccionar.

El botón Enviar permite al usuario enviar los datos del formulario al servidor web. El botón de reinicio se usa para restablecer los datos del formulario y usar los valores predeterminados.

¿Cómo usar el form en HTML?

Mientras que otros elementos de HTML brindan estilo y significado a su sitio web, un formulario HTML agrega interactividad. Los formularios HTML manejan funciones importantes como tomar pedidos, encuestas, registro de usuarios y más. Apenas encontrará un solo sitio web sin formularios.

Un formulario web tiene dos partes: el «front -end» HTML y un procesador de formulario de back -end. La parte delantera HTML maneja la presentación, mientras que la parte trasera maneja las presentaciones del formulario (como guardar los envíos del formulario, enviar correos electrónicos, etc.). El script del procesador de formulario de back -end generalmente se escribe en idiomas como PHP, ASP o Perl. La imagen a continuación ilustra el concepto:

• Un visitante visita una página web que contiene un formulario.
• El navegador web muestra el formulario HTML.
• El visitante llena el formulario y envía
• El navegador envía los datos del formulario enviados al servidor web
• Un script de procesador de formulario que se ejecuta en el servidor web procesa los datos del formulario

Todos los elementos de entrada deben estar encerrados dentro de las etiquetas de apertura y cierre

Action = «Enlace a la secuencia de comandos del procesador de formulario» El atributo de acción apunta al script del lado del servidor (el ‘back -end’) que maneja el envío de formulario. Por lo general, este será un script (PHP, ASP, Perl) o un programa CGI .

método = get | post (o obtenga o publique) en términos simples, si utiliza el método GET, los valores de envío de formulario se pasan como parte de la URL. Si es una publicación, la información se envía al servidor como parte del cuerpo de datos y no será visible en el cuadro URL en el navegador del usuario. Si no especifica el método, Get se toma de forma predeterminada.

¿Qué es un formulario en HTML cuál es su función y que permite crear?

La etiqueta

• Acción: debe especificar qué archivo se enviarán los datos; Por lo general, es un script del lado del servidor, como PHP, ASP o CGI, solo por nombrar algunos
• Método: Sirve para indicar el método a través del cual los datos se enviarán a la página que los procesará. Puede tomar los valores de Get and Post:
• Con Get la información está vinculada a la dirección del archivo especificado por acción, de esta manera: Action.php? Name_CAMPO1 = Value_CAMPO1 & name_campo2 = value_campo2
• Con la publicación, la información se envía solo a través de la solicitud HTTP y evidentemente no se ve visible para el usuario (con programas especiales es posible leer la solicitud HTTP para encontrar estos valores, por lo tanto, no considere que este sistema sea absolutamente seguro).

Para crear un campo de texto, o un cuadro, usaríamos la etiqueta .
Los atributos principales de son tipo (que determina el tipo de elemento), el nombre (que determina un nombre para cada campo para dejarlo claro para un script que se han elegido) y valor (para insertar pre -relleno pre -relleno texto en los campos).

Dentro del formulario, es posible insertar uno o más campos y de varios tipos, haciendo uso de la etiqueta cuyos atributos para definir los tipos de campos son los siguientes:

El valor de texto creará una ventana donde puede escribir lo que desee. Hay otros dos atributos del que pueden ser muy útiles y son:

• Acción: debe especificar qué archivo se enviarán los datos; Por lo general, es un script del lado del servidor, como PHP, ASP o CGI, solo por nombrar algunos
• Método: Sirve para indicar el método a través del cual los datos se enviarán a la página que los procesará. Puede tomar los valores de Get and Post:
• Con Get la información está vinculada a la dirección del archivo especificado por acción, de esta manera: Action.php? Name_CAMPO1 = Value_CAMPO1 & name_campo2 = value_campo2
• Con la publicación, la información se envía solo a través de la solicitud HTTP y evidentemente no se ve visible para el usuario (con programas especiales es posible leer la solicitud HTTP para encontrar estos valores, por lo tanto, no considere que este sistema sea absolutamente seguro).

¿Cómo crear un formulario en una página web?

Aquí hay un tutorial rápido sobre la forma más rápida y fácil de crear un formulario en WordPress. Esta guía supone que ya tiene un sitio de WordPress configurado. Comenzaremos en el tablero, la pantalla que ve al iniciar sesión en su área de administración de WordPress. Primero, en el menú de la barra lateral izquierda, haga clic en «complementos» (como se resalta en rojo a continuación).

En la siguiente pantalla, asegúrese de hacer clic en el botón azul «Agregar nuevo» (como se resalta en el rojo a continuación) para ir a la pantalla de instalación correcta del complemento.

El primer cuadro que aparece será para «WPForms», uno de los mejores complementos de formulario de WordPress disponibles en la actualidad. Haga clic en el botón «Instalar ahora» como se resalta, y se cambiará en un botón azul «Activar». Haga clic en eso también :).

Inmediatamente lo llevarán a la pantalla de introducción WPForms, como se muestra a continuación. Haga clic en el botón Big «Crea tu primer formulario» como se muestra.

A continuación, dale un título al formulario. Elegí «saludar» para el mío. Luego haga clic en «Crear un formulario de contacto simple» como se resalta.

Inmediatamente lo llevarán a una pantalla que muestra su formulario, incluido el nombre, el apellido y el correo electrónico. Dejemos todo como es por ahora. Puedes ir y editar cosas más tarde. Por ahora, haga clic en el botón «Incrustar» como se resalta a continuación, y aparecerá la ventana emergente que se muestra. He resaltado el código de incrustación en azul, pero ni siquiera tiene que copiar este código (verá por qué en unos pocos pasos más). Simplemente haga clic en la «X» para cerrar la ventana, y luego la gran «X» en la parte superior derecha para salir de la interfaz WPForms y volver al área de administración normal de WordPress.

¿Qué etiqueta HTML se usa para crear un formulario?

Asociar un con un elemento ofrece algunas ventajas importantes:

• El texto de la etiqueta no solo se asocia visualmente con su entrada de texto correspondiente; También está asociado programáticamente con él. Esto significa que, por ejemplo, un lector de pantalla leerá la etiqueta cuando el usuario se centre en la entrada del formulario, lo que facilita que un usuario de tecnología de asistencia comprenda qué datos deben ingresarse.
• Cuando un usuario hace clic o toca/toca una etiqueta, el navegador pasa el enfoque a su entrada asociada (el evento resultante también se plantea para la entrada). Esa mayor área de éxito para enfocar la entrada proporciona una ventaja para cualquier persona que intente activarla, incluidas las que usan un dispositivo con pantalla táctil.

Para asociar el elemento con un elemento , debe dar el atributo un atributo de identificación. El necesita un atributo para cuyo valor es el mismo que el ID de la entrada.

Alternativamente, puede anidar el directamente dentro de la , en cuyo caso no son necesarios los atributos FOR e ID porque la asociación está implícita:

 ¿Te gustan los guisantes?
 

El control de forma que una etiqueta está etiquetando se llama control etiquetado del elemento de etiqueta. Múltiples etiquetas pueden estar asociadas con el mismo control de formulario:

El valor del atributo FOR debe ser una sola ID para un elemento relacionado con la forma etiquetable en el mismo documento que el elemento . Por lo tanto, cualquier elemento de etiqueta dado puede asociarse con un solo control de forma.

¿Cuál es la etiqueta para crear un formulario en HTML?

La etiqueta agrega una etiqueta a un elemento de forma particular en una forma. Cada etiqueta de etiqueta está asociada con un elemento de formulario a través del atributo HTML.

Hay algunas razones por las cuales es importante usar la etiqueta . Primero, la etiqueta está vinculada a un campo de formulario particular en una página web. Esto significa que, si un lector de pantalla encuentra el campo de formulario, el contenido de la etiqueta que especifique se lee al usuario. Esto, a su vez, hace que su sitio web sea más accesible.

Además, cuando una etiqueta está asociada con un campo de formulario, el usuario puede hacer clic en el texto dentro de la etiqueta para activar el formulario. Esto facilita que el usuario comience a interactuar con un campo de formulario porque no tiene que hacer clic directamente en el elemento.

Por ejemplo, si tuviera un elemento de casilla de verificación sin etiqueta , el usuario tendría que hacer clic directamente dentro de la casilla de verificación para activar el elemento. Sin embargo, si especificó una etiqueta , el usuario también podría hacer clic en la etiqueta para activar la casilla de verificación.

 contenido de etiqueta 

El atributo for se utiliza para asociar una etiqueta con un elemento particular. El valor del atributo FOR debe ser igual al atributo de ID de entrada utilizado por un elemento .

También puede colocar un campo dentro de una etiqueta para asociar el formulario de entrada con la etiqueta, en lugar de usar el atributo for. La sintaxis para esto es la siguiente:

 contenido de la etiqueta

¿Cómo crear una formulario en HTML?

Puede agregar un módulo a un documento HTML existente dentro de las etiquetas . Estas etiquetas actúan como un contenedor para todos los datos del formulario, como campos de texto, listas y botones. Cuando alguien le proporciona información a través del formulario, los datos se enviarán a un servidor que guardará, explicará o mostrará los resultados de acuerdo con su contenido. Aprenda a usar el

• Puede usar CSS o HTML dentro de las etiquetas para dar la apariencia que desea a su módulo.
• Use Method = «Get» para solicitar datos de un recurso. Solo debe usar GOT para recuperar datos. Nunca lo use con información confidencial, como contraseñas o números de tarjeta de crédito.
• Use Method = «Publicar» para enviar los datos a elaborar. Use este método de transferencia si los datos son confidenciales, como la contraseña o los números de tarjeta de crédito.
• El resultado final debe tener el siguiente formato: .
• Por ejemplo, nombre: cree un campo de texto con el título «Nombre:», para que los usuarios entiendan lo que necesitan escribir dentro.
• Cambie el «id =» valor («nombre» en el ejemplo) en función del uso que realizará datos. Si la información se envía a un script, este valor debe corresponder al código del programa.
• Para crear una elección entre las respuestas de «perro» o «gato»:
• perro
• cat
• Un grupo de botones de radio debe tener el mismo atributo de «nombre».

El equipo de gestión de contenido de Wikihow controla cuidadosamente el trabajo del personal editor para asegurarse de que cada artículo cumpla con nuestros estándares de calidad. Este artículo fue visto 3 214 veces

Artículos Relacionados:

• ¿Qué es un formulario de Google?
• Cómo hacer un formulario en Google: guía paso a paso
• Elabora un formulario en Google con estos 6 sencillos pasos
• ¿Cómo se hace un formulario? Aquí te contamos los pasos necesarios