Menú
gratis
Registro
Hogar  /  Programas/ Se utiliza una etiqueta para crear el formulario. Crear y trabajar con formularios en html.

Se utiliza una etiqueta para crear un formulario. Crear y trabajar con formularios en html.

Buenos días, fanáticos del desarrollo web y aquellos que quieran crear su propio sitio web. Antes de eso, todas mis publicaciones estaban dedicadas a los elementos básicos del lenguaje, formas de crear diversos objetos de contenido, su formato, estructuración, etc. Habiendo dominado los temas anteriores, ya podrá crear un sitio web bastante bueno. Sin embargo, estará incompleto sin el tema de hoy: "Creación de formularios en HTML".

Esta sección del lenguaje de marcado de hipertexto es muy importante. Por lo tanto, preste especial atención a estudiarlo; de lo contrario, el recurso web que creó no se lanzará a producción. Por lo tanto, después de leer el artículo, aprenderá por qué necesita usar formularios, qué etiquetas se utilizan para crear y también podrá probar ejemplos específicos en la práctica. ¡Empecemos!

¿Qué es un formulario y cómo funciona?

Forma– este es uno de los objetos más importantes del sitio, que está destinado al intercambio de datos de información entre el servidor y el usuario.

En pocas palabras, si desea crear una tienda en línea con la capacidad de solicitar productos en el sitio web, solicitar el registro en un recurso web y trabajar con cuentas o brindar a los clientes comentarios de los gerentes de la empresa, entonces no puede prescindir de los formularios.

El formulario se especifica mediante un elemento de lenguaje html especial.

.

Tenga en cuenta que el documento de código puede contener varias declaraciones de etiquetas. Sin embargo, solo se puede enviar una solicitud al servidor para procesar los datos. Es por eso que la información que ingresa el usuario en los campos habilitados para ello y se relaciona con diferentes formularios no debe ser dependiente. Además, no está permitido anidar formas unas dentro de otras.

Para aquellos que están impacientes y ansiosos por echar un vistazo rápido a la representación del código, adjunto un ejemplo simple del uso de un panel con un campo de texto para una contraseña con un botón:

1 2 3 4 5 6 7 8 9 10 11 12 Ejemplo

Ejemplo

Puede que ahora no quede muy claro qué y cómo interactúa en este pequeño programa, pero te garantizo que después de leer el artículo completo podrás crear aplicaciones mucho más complejas.

Envío de datos al lado del servidor

Para enviar la información escrita (o seleccionada) en un cuadro de diálogo, debe utilizar el mecanismo estándar: botón enviar.

El código para dicho método se ve así:

Cuando ejecute la línea presentada en el navegador, aparecerá un botón con la inscripción: "Enviar".

Otra forma de enviar datos al lado del servidor es presionar la tecla Intro dentro del cuadro de diálogo.

Después de confirmar el envío de la información especificada, esta no llega inmediatamente al servidor. Primero, el navegador lo procesa, lo que da como resultado el formato “nombre=valor”.

El parámetro de atributo es responsable del nombre. tipo etiqueta , y para el valor, los datos ingresados ​​por el usuario. A continuación, la cadena convertida se pasa al controlador, que suele especificarse en el atributo acción elemento

.

El parámetro de acción en sí no es necesario y, en algunos casos, no es necesario en absoluto. Por ejemplo, si la página de un sitio está escrita usando php o js, ​​entonces el procesamiento se produce en la página actual y no se necesitan enlaces.

Para una mejor comprensión del panorama general del funcionamiento del sitio, me gustaría añadir que en el servidor los datos se procesan en otros idiomas. Así, se consideran lenguajes del lado del servidor: Python, php, lenguajes tipo C (C#, C, etc.), Java y otros.

Ahora me gustaría detenerme y hablar más sobre el elemento. . Para explicarlo en términos simples, entonces necesario para crear campos de texto, botones de opción, varios botones, campos ocultos, casillas de verificación y otros objetos.

La etiqueta no tiene que estar emparejada con Sin embargo, si necesita procesar registros de usuarios o ingresarlos, por ejemplo, en una base de datos, no puede prescindir de un contenedor.

Los principales atributos de este elemento del lenguaje de marcado de hipertexto son:

  • Texto– crea un campo de texto;
  • Entregar– crea un botón para enviar datos al servidor;
  • Imagen– es responsable del botón con la imagen;
  • Reiniciar– establece un botón para borrar el formulario;
  • Contraseña– establece un campo de texto específicamente para contraseñas;
  • Caja– responsable de los campos con casillas de verificación;
  • Radio– responsable de los campos con la selección de un elemento;
  • Botón– crea un botón;
  • Oculto– utilizado para campos ocultos;
  • Archivo– establece el campo responsable del envío de archivos.

Métodos de transmisión de información.

Hay 2 formas de transferir datos del usuario al lado del servidor: Conseguir Y Correo. Estos métodos realizan la misma acción, pero difieren significativamente entre sí. Por eso, antes de mencionar alguno de ellos, conozcamos sus características.

Correo Conseguir
Tamaño de los documentos transmitidos Limitado al lado del servidor. Máximo: 4 KB.
Cómo se muestra la información enviada Disponible solo cuando se ve a través de extensiones del navegador u otros productos de software especiales. Inmediatamente disponible para todos.
Usando marcadores No hay forma de agregar a favoritos, ya que las solicitudes no se repiten (todas las páginas enlazan a una dirección). Cualquier página con una solicitud se puede guardar como favorita y volver a ella más tarde.
Almacenamiento en caché Según el párrafo anterior, todas las solicitudes están en una sola página. Cada página se puede almacenar en caché por separado.
Objetivo Se utiliza para enviar archivos de gran tamaño (libros, imágenes, vídeos, etc.), mensajes, comentarios. Excelente para buscar valores solicitados en un recurso web o para enviar mensajes de texto cortos.

Para indicar cuál de los dos métodos de transferencia de datos debe utilizar el navegador, en el elemento utilizar el parámetro proporcionado método(Por ejemplo, método = "publicar").

Veamos el segundo ejemplo. Creemos un formulario en el que deberá ingresar sus datos personales (nombre y apellido, fecha de nacimiento) y crear una contraseña. Luego enviamos todo esto al servidor usando el método Correo.

método de publicación

¡Ingresa tu información personal!

Ejecute el ejemplo en un navegador y evalúe la apariencia de cada campo. En HTML, es muy conveniente especificar tipos de campos, que a su vez determinan automáticamente qué elementos adicionales se necesitan para los objetos.

Por ejemplo, para ingresar una fecha, existen interruptores para el número de cada parámetro (día, mes y año), así como un panel desplegable con el propio calendario para mayor comodidad.

Crear un panel de registro

Se han cubierto las etiquetas y atributos básicos. Es por eso que es hora de crear un formulario de registro completo utilizando el estilo CSS y validando los datos ingresados. Por supuesto, no podremos ver el servidor funcionando con ellos, pero proporcionaremos el diseño y detalles importantes.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Registro
Registro en el sitio

Nombre:

Apellido:

Correo electrónico:

Contraseña:

Repita la contraseña:

Registro

Registro en el sitio

Para un posterior trabajo correcto en nuestro servicio, ¡ingrese los datos correctos!

Nombre:

Apellido:

Correo electrónico:

Contraseña:

Repita la contraseña:

Saludos, queridos lectores del sitio del blog. Hoy quiero hablar de algo como los formularios HTML. Cualquiera que sea el motor de su sitio (cms), definitivamente utilizará de una forma u otra los formularios creados utilizando las etiquetas Formulario y Entrada, así como los atributos y parámetros Botón, Marcado, Valor, Casilla de verificación, Radio, Casilla de verificación, Enviar.

Bueno, también puedes agregar a esto elementos para crear listas desplegables y campos de texto: Seleccionar, Opción, Área de texto, Etiqueta, Conjunto de campos, Leyenda.

¿Por qué se necesitan formularios y cómo funcionan en los sitios web modernos?

La misma cadena de búsqueda del sitio () se crea utilizando estas etiquetas y será necesaria una búsqueda en su proyecto. Por lo tanto, comprender cómo están estructurados y cómo funcionan no le impedirá en absoluto trabajar con éxito en el diseño, y no será superfluo si lo promociona usted mismo.

Así pues, justificada la necesidad de estudiar estos elementos, creo que no deberían surgir más dudas, por lo que es hora de pasar directamente al estudio de sus posibles opciones.

Sí, también me gustaría recordarles que ya hemos revisado muchos materiales sobre el tema del lenguaje de marcado de hipertexto, por ejemplo, tres ) y .

En esencia, los formularios constan de elementos, para cuya creación se insertan varias etiquetas desde las etiquetas del formulario dentro del contenedor principal: Marcado, Valor, Casilla de verificación, Radio, Casilla de verificación, Enviar, etc. Solo necesitamos colocar su código en cualquier lugar conveniente. colóquelo en la plantilla del sitio, indicando mediante etiquetas y sus atributos cómo debe verse.

Esto podría ser un campo de texto con un botón para enviar la consulta ingresada, selecciones con botones de opción (donde puede dejar solo uno de los botones proporcionados presionado), múltiples campos de texto con un botón para enviar() y mucho más.

Por ejemplo, en el caso de "búsqueda", utilizando el atributo Valor puede especificar qué se escribirá exactamente en el botón ubicado al lado del campo para ingresar una consulta. Los datos introducidos en los formularios deben ser objeto de algún tratamiento posterior.

Por ejemplo, en el caso de comentarios, el usuario, luego de completar el campo con su nombre, ingresar su correo electrónico y el texto del mensaje, y luego hacer clic en el botón enviar, tendrá derecho a esperar que los datos del formulario será enviado al correo electrónico del autor del sitio. Pero, lamentablemente, no es posible implementar esto utilizando un solo lenguaje de marcado de hipertexto ().

Para estos fines, necesitará un programa de procesamiento especial que, después de que el usuario haga clic en el botón Enviar, tomará todos los datos de los campos de comentarios y los enviará por correo electrónico al propietario del recurso. Debe especificar qué programa hará esto usted mismo utilizando el atributo Acción.

Normalmente, el programa de procesamiento es un script escrito en PHP. Por lo tanto, en el atributo Acción de la etiqueta Formulario, deberá especificar la ruta al archivo de este script ubicado en su servidor de alojamiento. Déjame darte un ejemplo de suscripción al feed RSS de mi blog por correo electrónico:

Puede parecer un poco confuso al principio, pero creo que todo se irá aclarando a medida que avance la historia.

Etiquetas de formulario y entrada para crear botones, casillas de verificación y botones de opción

Cualquier formulario debe estar encerrado en etiquetas de apertura y cierre. Forma. Esta es una especie de contenedor para su creación. Esta etiqueta tiene una serie de atributos obligatorios y opcionales:

  1. Nombre: un nombre único que debe especificarse si el archivo HTML donde está haciendo algo utilizará varios formularios web.
  2. Acción: un atributo obligatorio que indica la ruta al script al que se transferirán los datos para su posterior procesamiento.
  3. Método: con él puede cambiar el método de transferencia de datos desde este formulario web al script del archivo del controlador. Si no lo especifica, se utilizará el método Get de forma predeterminada, que, de hecho, está destinado principalmente a variables y mensajes cortos, así como a la transmisión abierta de datos a través de la barra de direcciones del navegador. Para transferir datos del formulario al script del controlador, es mejor usar método de publicación, diseñado específicamente para la transmisión de mensajes de texto de forma privada

Veamos las etiquetas restantes que le permiten crear una variedad de formularios web. El más versátil es Aporte. Dentro de él se debe escribir el atributo Tipo, lo que determina cuál será exactamente el formulario HTML creado con esta etiqueta.

Usando Entrada y Tipo puedes crear los siguientes elementos:

  1. campos de texto de una sola línea (Type="Text")
  2. campos para ingresar una contraseña (Type="Contraseña")
  3. casillas de verificación (Tipo="Casilla de verificación")
  4. botones de radio (Tipo="Radio")
  5. campos ocultos (Tipo="Oculto")
  6. botones normales (Tipo="Botón")
  7. Botones para enviar datos al controlador (Type="Submit")
  8. Botones para llevar el formulario web a su estado original (Type="Reset")
  9. campos para cargar archivos al servidor (Tipo="Archivo)
  10. botones con una imagen (Type="Image")

La entrada no tiene una etiqueta de cierre. El aspecto exacto de un formulario web creado con él depende completamente del parámetro especificado en el atributo Tipo. Si no se especifica Tipo, se creará un campo de texto de forma predeterminada.

Ejemplos de formularios creados en Entrada con diferentes valores de Tipo

Otros atributos de etiquetas de entrada y ejemplos de su uso

Veamos para qué se necesitan los otros atributos:

  1. Nombre: si los datos deben enviarse al script del programa controlador, debe especificar un parámetro para el atributo Nombre. Bajo este nombre aparecerán en el programa procesador de información los datos enviados desde el formulario.
  2. Tamaño: se utiliza para establecer el tamaño del campo del formulario web que se está creando. El valor se indica en el número de caracteres que pueden caber en este campo. Si no se especifica Tamaño, el ancho predeterminado será de 24 caracteres.
  3. Maxlength: de forma predeterminada, la cantidad de caracteres que se pueden ingresar en un formulario HTML no está limitada, pero usando Maxlength puede establecer esta limitación. No podrá ingresar más caracteres de los indicados en el campo.
  4. Valor: puede usarlo para especificar qué se escribirá exactamente de forma predeterminada en el campo o en el botón de envío de datos.
  5. Marcado es un atributo de bandera que se puede insertar en la Entrada para botones de opción o casillas de verificación. En este caso, este botón de radio o checkbox estarán activos cuando se cargue la página con el formulario web (ya tendrán una marca de verificación)

Ahora veamos todo ejemplos de formularios con entrada. La apariencia del campo de texto es similar a la apariencia del campo de ingreso de contraseña, así que consideremos solo la opción de crear un Texto, por ejemplo, para ingresar una dirección de correo electrónico:

Ahora veamos cómo crear un formulario web con botones de opción (Radio):

Tenga en cuenta que este formulario utiliza la etiqueta Entrada dos veces, una para crear cada uno de los dos botones de opción. Además, cada uno de ellos contiene el atributo Nombre con el mismo valor (resultado), y el valor Valor es diferente (SÍ y NO).

Esto significa que al procesarlo, si se selecciona alguno de los interruptores, se enviará una variable cuyo nombre está escrito en Nombre, pero el valor de esta variable dependerá de qué interruptor se seleccionó.

Veamos un ejemplo de creación de un formulario web con casillas de verificación:

Las casillas de verificación se diferencian de los botones de opción en que le permiten seleccionar varias opciones a la vez. El nombre se utiliza para determinar en el archivo del controlador en qué casilla de verificación se colocan las casillas de verificación, y el Valor especifica el valor que se enviará al controlador (si no se especifica el Valor, entonces el texto ubicado junto a esta casilla de verificación se enviará al controlador). ).

Seleccionar, Opción, Área de texto, Etiqueta, Conjunto de campos, Leyenda: listas desplegables, áreas de texto y otros elementos de formulario web

Para empezar, me gustaría recordarles un poco qué son realmente los formularios web y por qué son necesarios en las páginas de un sitio web. Están diseñados principalmente para replicar elementos que se encuentran en cualquier sistema operativo de una forma fácil de usar: botones, campos de entrada de texto, listas desplegables, casillas de verificación, interruptores y similares.

Todos los usuarios, sin ninguna explicación adicional, entienden el propósito de estos elementos y si ven un botón de formulario HTML, entienden que deben hacer clic en él.

Además, todos sus elementos constituyentes (como Seleccionar, Opción, Área de texto, Etiqueta, Conjunto de campos, Leyenda) ya son espacios en blanco (contenedores) completos, para insertarlos solo necesita usar la etiqueta deseada con los atributos y parámetros necesarios.

Los propios navegadores saben cómo mostrar tal o cual elemento de formulario web. Es cierto que las opciones para mostrar el mismo elemento en diferentes navegadores pueden diferir ligeramente entre sí, pero, por regla general, no de manera significativa.

Eso. resulta que los formularios web en HTML son un intento de transferir clave Elementos utilizados en cualquier sistema operativo., a las páginas del sitio web. Pero, ¿por qué podrían ser necesarios en las páginas del sitio?

En principio, con el mismo fin que se utilizan elementos similares en los sistemas operativos: transferir datos del usuario. En el caso de los formularios, los datos del usuario se transfieren al servidor, donde son procesados ​​por un programa especial (el lenguaje de marcado de hipertexto, lamentablemente, no permite el procesamiento de datos).

Sin embargo, los datos se pueden enviar no solo al servidor, sino también, por ejemplo, por correo electrónico a la dirección especificada en el atributo Acción de la etiqueta Formulario. Al enviar datos de HTML a correo electrónico, el usuario que completa los campos, después de hacer clic en el botón enviar datos, iniciará el programa de correo predeterminado utilizado en su computadora.

La etiqueta de formulario de apertura en este caso debería verse así:

Seleccionar y Opción: etiquetas de lista desplegable

Todos los elementos de formulario web que crean campos de lista desplegable se forman de la misma manera. Primero, el contenedor del cuadro combinado se configura usando la etiqueta Html Select de apertura y cierre. Y luego, dentro de este contenedor, se crean contenedores separados con los elementos (elementos) de esta lista. Esto se hace usando etiquetas de opción de apertura y cierre.

Resulta algo como esto:

Pero este es un diseño simplificado, porque Seleccionar y Opción tienen varios atributos, que definen las propiedades y la apariencia del campo de lista desplegable creado.

  1. Nombre: debe especificar un nombre único para este elemento de formulario web creado con Seleccionar. Este nombre se pasará al servidor al programa de manejo de datos como nombre para la variable. El valor de esta variable será el valor del atributo Valor (establecido en Opción para cada elemento) del elemento de la lista desplegable que seleccione el usuario.
  2. Tamaño: puede usarlo para establecer la cantidad de elementos mostrados. En otras palabras, usando Tamaño puede establecer la altura de la lista, medida en el número de líneas mostradas. Si no especifica explícitamente un valor de Tamaño en la etiqueta Seleccionar, se usará la altura predeterminada de la lista desplegable y será diferente si el atributo Seleccionar está ausente o presente en el atributo Seleccionar:
    1. Si Múltiple está presente en Seleccionar, entonces la altura de la lista desplegable en el formulario web será igual de forma predeterminada al número de sus elementos. Aquellos. Se mostrarán todos los elementos de la lista desplegable de selección múltiple. Vea el ejemplo plural a continuación. Si el atributo Tamaño en Seleccionar está configurado en menos que la cantidad de elementos, aparecerá una barra de desplazamiento a la derecha.
    2. Si Múltiple está ausente en Seleccionar, entonces la altura de la lista desplegable en el formulario web será igual a una línea de forma predeterminada. Aquellos. Solo será visible una línea y solo se podrá acceder a los elementos restantes presionando el botón del ascensor (a la derecha). Ver ejemplo a continuación
  3. Múltiple: asignar este atributo a la etiqueta Seleccionar le permitirá crear una lista desplegable con la capacidad de seleccionar varios elementos al mismo tiempo. Lea más sobre este atributo a continuación.

Los formularios con listas desplegables se pueden dividir en dos opciones. En la primera opción, puede seleccionar solo un elemento (línea) del campo con una lista desplegable; en la segunda opción, manteniendo presionado Ctrl o Shift puede seleccionar simultáneamente varios de los elementos disponibles.

En este caso, en la segunda opción, los datos sobre todos los elementos seleccionados se enviarán al servidor. La lista desplegable que se creará está determinada por la presencia o ausencia del atributo Múltiple en la etiqueta Seleccionar.

Múltiple se especifica en Seleccionar sin un parámetro, porque Simplemente se escribe Múltiple y listo. Si está presente, se creará un formulario web de lista desplegable con múltiples capacidades de selección (manteniendo presionada la tecla Ctrl o Mayús).

Una variante de un campo con una lista desplegable en la que habrá opción múltiple posible, se verá así:

A la derecha hay un ejemplo de un formulario web desplegable de opción múltiple basado en el código anterior. Como puedes ver, manteniendo presionado Ctrl o Shift puedes seleccionar varios elementos al mismo tiempo.

Si no hay ningún atributo Múltiple en la etiqueta Seleccionar, solo se puede seleccionar un elemento de esta lista desplegable (fila).

Aquí se puede ver un ejemplo en el que puede seleccionar solo un elemento:

Etiqueta Seleccionar Sitio seleccionado Leyenda

Atributos de etiqueta de opción


En la lista desplegable creada (usando Seleccionar y Opción), puede agregar algo como separadores con encabezados de grupo, que diferirán del resto de los elementos del menú en el estilo de fuente.

Para crear un grupo a partir de elementos de la lista desplegable, debe incluirlos en las etiquetas de apertura y cierre del formulario Optgroup, y en la etiqueta de apertura Optgroup, agregar el atributo Label, como parámetro del cual deberá ingresar el nombre deseado del grupo.

Por ejemplo así:

Seleccionar etiqueta
Leyenda del sitio web de SelectED

Textarea: crear un campo de texto en un formulario

Hay un elemento más de los formularios web que no hemos considerado: Textarea (un campo con la capacidad de ingresar texto de varias líneas). Se crea utilizando la etiqueta HTML emparejada Textarea. Además, puede ajustar el texto en una nueva línea y se transmitirá al servidor teniendo en cuenta las traducciones realizadas.

Entonces, para crear un campo de texto de varias líneas, debe especificar un área de texto de apertura y cierre, y entre ellas puede agregar texto que será visible cuando se cargue la página con el formulario web. El usuario podrá entonces borrar este texto y escribir el suyo propio.

Como puede ver, hacer clic en el texto para activar este elemento es inútil: debe hacer clic en él mismo. Esta es exactamente la situación para la cual la etiqueta Label está diseñada para corregir. Le permite hacer que se pueda hacer clic en el texto junto al elemento del formulario web, lo que sin duda es mejorará la usabilidad.

Pero, ¿cómo conectar el elemento de formulario HTML y el texto? Para hacer esto, debe agregar una ID con un parámetro único al atributo y el texto debe estar rodeado por etiquetas de etiqueta de apertura y cierre. Y eso no es todo. En la etiqueta de apertura, debe incluir el atributo For, cuyo parámetro debe ser exactamente el mismo que el del atributo ID en la etiqueta HTML del elemento de formulario. Resulta algo como esto:

Como puede ver, ahora, gracias al uso de Label, los elementos del formulario web se pueden activar no solo haciendo clic en él mismo, sino también haciendo clic en el texto ubicado al lado.

Fieldset y Legend: dividir el formulario en partes

Probablemente haya visto a menudo que los formularios grandes en HTML se dividen en grupos (Fieldset), que están rodeados por un marco y cada uno de esos grupos tiene su propio título (Leyenda). Esto se implementa utilizando sólo dos etiquetas: Fieldset y Legend. Están emparejados, es decir. Deben tener uno de apertura y otro de cierre.

Entonces, para crear un grupo de componentes, debe incluir todas estas partes en las etiquetas Fieldset de apertura y cierre. Y para establecer un título (Leyenda) para este grupo, debe escribir inmediatamente después del conjunto de campos de apertura una construcción de una Leyenda de apertura y cierre, entre las cuales debe insertar el texto del título del grupo.

A continuación se muestra un ejemplo de creación de grupos utilizando Fieldset y Legend:



¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Quizás te interese

Seleccionar, Opción, Área de texto, Etiqueta, Conjunto de campos, Leyenda: etiquetas HTML para la forma de listas desplegables y campos de texto
Listas en código HTML: etiquetas UL, OL, LI y DL
MailTo: qué es y cómo crear un enlace en HTML para enviar un correo electrónico
Cómo se configuran los colores en código HTML y CSS, selección de tonos RGB en tablas, salida de Yandex y otros programas
¿Qué es el lenguaje de marcado de hipertexto HTML y cómo ver una lista de todas las etiquetas en el validador del W3C?
Cómo insertar un enlace y una imagen (foto) en HTML: etiquetas IMG y A
Tablas en HTML: etiquetas Table, Tr y Td, así como Colspan, Cellpadding, Cellspacing y Rowspan para crearlas
Fuente (cara, tamaño y color), Blockquote y etiquetas previas: formato de texto heredado en HTML puro (no se utiliza CSS)
Cómo crear un hipervínculo (A, Href, Destino en blanco), cómo abrirlo en una nueva ventana del sitio y también convertir una imagen en un enlace en código HTML

...contenido del formulario...

  • Justo dentro del elemento del formulario debe haber controles, de los cuales puede haber tantos como se desee.

    • Atributos del formulario:

    • El atributo de acción especifica un archivo de servidor con un script responsable del procesamiento principal de los datos enviados desde el formulario. Normalmente, el código de este archivo está escrito en un lenguaje de programación del lado del servidor, por ejemplo, en php o perla.
    • El atributo enctype indica el tipo de información transmitida al servidor, si son solo datos de texto - texto/sin formato, si los archivos se envían con el formulario, entonces se debe especificar multipart/form-data.
    • El atributo del método especifica y define la forma de transferencia de datos. No nos detendremos en esto en detalle, pero vale la pena decir que para una transmisión más confiable, se debe especificar el método postal.

    elementos de formulario HTML

      <tipo de entrada = "texto" nombre = "iniciar sesión" tamaño = "20" valor = "Iniciar sesión" maxlength = "25" > !}

      Resultado:

      • El valor del atributo de tipo - texto - indica que se trata de un campo de texto
      • tamaño: tamaño del campo de texto en caracteres
      • maxlength: número máximo de caracteres que pueden caber en el campo
      • valor: texto inicial en el campo de texto
      • nombre — nombre del elemento, necesario para procesar datos en el archivo del controlador

      Resultado:


      En lugar de texto, se muestra una máscara en el campo: estrellas o círculos.

      <tipo de entrada = "enviar" valor = "Enviar datos">

      Resultado:

      El botón de envío recopila todos los datos del formulario ingresados ​​por el usuario y los envía a la dirección especificada en el atributo de acción del formulario.

      <tipo de entrada = "restablecer" valor = "Borrar formulario" > !}

      Resultado:

      El botón devuelve el estado de todos los controles a su estado original (borra el formulario)

      <tipo de entrada = "casilla de verificación" nombre = "asp" valor = "yes" > !}ÁSPID.<br> <tipo de entrada = "casilla de verificación" nombre = "js" valor = "yes" checked = "checked" > !} javascript<br> <tipo de entrada = "casilla de verificación" nombre = "php" valor = "yes" > !} PHP<br> <tipo de entrada = "casilla de verificación" nombre = "html" valor = "yes" checked = "checked" > !} HTML<br>

      ÁSPID.
      javascript
      PHP
      HTML


      Resultado:

      ÁSPID.
      javascript
      PHP
      HTML

      En HTML, se utiliza una casilla de verificación para organizar la selección múltiple, es decir cuando es necesario y posible seleccionar varias opciones de respuesta

      <tipo de entrada = "radio" nombre = "libro" valor = "asp" > !}ÁSPID.<br> <tipo de entrada = "radio" nombre = "libro" valor = "js" > !} JavaScript<br> <tipo de entrada = "radio" nombre = "libro" valor = "php" > !} PHP<br> <tipo de entrada = "radio" nombre = "libro" valor = "html" checked = "checked" > !} HTML<br>

      ÁSPID.
      JavaScript
      PHP
      HTML

      Resultado:

      ÁSPID.
      JavaScript
      PHP
      HTML

      El botón de opción HTML sirve para una única elección entre varias opciones.

      El atributo marcado establece inmediatamente el elemento como marcado

    Importante: Para elementos radio es necesario que el valor del atributo nombre todos los elementos del grupo eran iguales: en este caso, los elementos funcionarán interconectados, cuando un elemento esté encendido, los demás se apagarán

    Lista desplegable HTML

    Veamos un ejemplo de cómo agregar una lista desplegable:

    1 2 3 4 5 6 <seleccione nombre = "libro" tamaño = "1" > <valor de opción = "asp" > !}ÁSPID.</opción> <valor de opción = "js" > !} javascript</opción> <valor de opción = "php" > !} PHP</opción> <valor de opción = "html" selected = "selected" > !} HTML</opción> </seleccionar>

    Resultado:

    • La lista desplegable consta de una etiqueta principal (seleccionar) que tiene un par de cierre, y cada elemento de la lista es una etiqueta de opción, dentro de la cual se muestra el texto del elemento.
    • atributo de tamaño con valor "1" indica que la lista contraída muestra un elemento, el resto se abre haciendo clic en la flecha del menú
    • El atributo seleccionado de un elemento (opción) indica que este elemento en particular será visible inicialmente y que los elementos restantes están "contraídos".

    Para listas grandes y complejas existe una opción. agregar subtítulos— etiqueta optgroup con atributo de etiqueta:

    1 2 3 4 5 6 7 8 9 10 11 12 <seleccione nombre = "libro" tamaño = "1" > <etiqueta optgroup = "inglés" > <valor de opción = "asp" > !}ÁSPID.</opción> <valor de opción = "js" > !} javascript</opción> <valor de opción = "php" > !} PHP</opción> <valor de opción = "html" selected = "selected" > !} HTML</opción> </grupoopt> <etiqueta optgroup = "rusos" > <valor de opción = "asp_rus" > !} ASP en ruso</opción> <valor de opción = "js_rus" > !} JavaScript en ruso</opción> </grupoopt> </seleccionar>


    Para brindar la oportunidad seleccionar varios elementos a la vez necesitas agregar el atributo múltiple. Pero en este caso, el atributo de tamaño también debe establecerse en un valor mayor que 1:

    Resultado:

    • El ancho del elemento depende del atributo cols, que especifica cuántos caracteres caben horizontalmente.
    • El atributo de filas especifica el número de filas en un elemento.

    Otros elementos

    Elementos y atributos adicionales

    • Para controles radio Y caja Es conveniente utilizar elementos adicionales que, en primer lugar, vinculan el texto al elemento de radio o casilla de verificación y, en segundo lugar, agregan un trazo al hacer clic:
      • <tipo de entrada = "casilla de verificación" id = "libro1" > <etiqueta para = "libro1" >ÁSPID.</etiqueta>

      En el ejemplo, se ha creado una inscripción (etiqueta de etiqueta) para el elemento de casilla de verificación. La vinculación se realiza a través del atributo id, cuyo valor se especifica en el atributo for de la etiqueta.

      Resultado:

    • El atributo deshabilitado le permite bloquear un elemento, haciéndolo inalterable para el usuario:
      • <tipo de entrada = "texto" nombre = "iniciar sesión" tamaño = "20" valor = "Iniciar sesión" maxlength = "25" disabled = "disabled" >!}
      <tipo de entrada = "casilla de verificación" nombre = "asp" valor = "yes" > !}ÁSPID.<br> <tipo de entrada = "casilla de verificación" nombre = "js" valor = "yes" checked = "checked" disabled = "disabled" > !} javascript<br>


      ÁSPID.
      javascript

    Mientras navega por sitios web, el usuario generalmente simplemente hace clic en campo de golf para navegar por páginas web.

    Pero está claro que el usuario a veces necesita proporcionar su propia campos de entrada. Estos tipos de interacciones incluyen:

    • registro e inicio de sesión en sitios web;
    • ingresar información personal (nombre, dirección, información de tarjeta de crédito, etc.);
    • filtrado de contenido (mediante listas desplegables, casillas de verificación, etc.);
    • realizar una búsqueda;
    • descargando archivos.

    Para satisfacer estas necesidades, HTML ofrece información interactiva. controles formas:

    • campos de texto (para una o más líneas);
    • interruptores;
    • casillas de verificación;
    • listas desplegables;
    • widgets para descargar;
    • botones de enviar.

    Estos controles involucran diferentes etiquetas HTML, pero la mayoría usa la etiqueta . Debido a que es un elemento de cierre automático, el tipo de campo está determinado por su atributo de tipo:

    Elemento

    es un elemento de bloque que define interactivo parte de una página web. Como resultado, todos los controles (como ,