Los formularios HTML son una forma de recopilar datos de los visitantes de su página. Los formularios típicamente tienen cuadros de texto para la entrada de datos, botones de radio, cuadros desplegables y botones para que los usuarios puedan enviar el formulario. Un botón de reinicio también es útil, por si acaso se cometen errores al llenar el formulario.

Para esta sección, crea una nueva página web en tu editor de texto. Guarda el archivo como forms.html . Añadiremos los diferentes elementos de la forma a medida que vayamos avanzando.

La etiqueta de la forma

No tienes que decirle a tu navegador sobre ningún elemento de forma en tu página web. Si sólo quieres un elemento de forma simple como un cuadro de texto, puedes insertar el texto la etiqueta de la caja por sí misma. Pero si quieres hacer algo con la información de tu como enviarlo a algún lugar o a alguien, tienes que "decirle" a tu navegador sobre los elementos de forma de su página. Esto se hace con la etiqueta "Form":

Como la mayoría de las etiquetas HTML, la etiqueta FORM viene como un par, la barra precedente la segunda etiqueta de la forma para indicar que la etiqueta de la forma termina. Cualquier elemento del formulario que necesitan entonces ir entre estas dos etiquetas FORM.

Un atributo NAME es una adición útil a la etiqueta FORM. Cuando la forma tiene un nombre, puedes entonces referirte a él en los guiones.

NOMBRE DE LA FORMA = "frmTest";

Para darle un nombre a su forma, escriba un espacio después de FORMA y luego escriba la palabra NOMBRE, seguido de un signo de igualdad. Finalmente, agregue un nombre para su formulario. Puedes llamar a ...que sea lo que quieras. Aquí, hemos llamado al formulario frmTest .

Si quieres que tu forma vaya a algún lugar o a alguien, otros dos atributos son que se necesita en la etiqueta FORM: MÉTODO y ACCIÓN. Como esto:

NOMBRE DE LA FORMA = "frmTest" MÉTODO = "post" Acción ="mailto:[email protected]">

MÉTODO es la forma de enviar los datos. Hay dos opciones, Enviar y Recibir. Enviar envía los datos en una sola línea de texto; Consigue aplastar todos los datos en una sola línea y lo añade a la URL en la parte de Acción. Si la URL era una dirección de Internet, verías todos los datos que estás enviando en la barra de direcciones de tu navegador. Este tipo de cosas:

ProcessSurvey.html?text1=John&text2=Smith

El primer nombre de John fue escrito en el cuadro de texto llamado "text1" y el apellido Smith entró en el cuadro de texto llamado "text2". Elementos de forma están separados por un ampersand ( & ). Eso es un resultado directo de usar el Obtener método para enviar datos. El método Post no añade todo ese código a la dirección de tu navegador.

Deberías usar Post para enviar tus datos, en vez de Get.

La ACCIÓN se utiliza para especificar la dirección a la que desea enviar los datos. Aquí, estamos usando un enlace de correo electrónico para enviar los datos directamente a una dirección de correo electrónico:

ACCIÓN = mailto:[email protected]

Pero el formulario puede ser procesado por un lenguaje de scripts como CGI, ASP .NET, PHP, etc. En cuyo caso, especificaría la dirección del guión en cuestión:

ACCIÓN = "ProcessSurvey.php"

Para asegurarse de que los datos de sus formularios no se envíen a ninguna parte, sólo tiene que añadir un un par de comillas dobles para el atributo de la acción:

ACCIÓN = ""

Esto es bueno para fines de prueba.

Elementos de la forma

Hay bastantes elementos de forma diferentes que se pueden añadir a una forma:

Recuadros de texto
Áreas de texto
Opción Botones
Cajas de verificación
Lista desplegable/Listas fijas
Cajas de contraseña
Botones de comando Submit Buttons
Botones de reajuste
Etiquetas. Botones de comando de imagen
Valores de forma oculta

HTML5, sin embargo, añade aún más. Incluso hay un atributo muy útil llamado marcador de posición:

Marcador de posición Email
Url
Número
Rango
Fecha/hora
Search
Color

Sin embargo, algunos de estos nuevos elementos de la forma sólo son compatibles con ciertos navegadores. Por ejemplo, el color se refiere a un selector de color emergente. Sólo el navegador web Opera apoya esto, en el momento de escribir este artículo.

En las próximas secciones, veremos más de cerca todos los elementos de la forma arriba.

Tablas de HTML 5 | Cuadros de texto, enviar, reiniciar