Tabla 2. Atributos de etiqueta
Atributo
Significado/Descripción
desactivado
Si el atributo está presente, entonces un grupo de elementos de formulario relacionados ubicados dentro del contenedor , deshabilitado para completar y editar. Se utiliza para restringir el acceso a ciertos campos del formulario que contienen datos ingresados previamente. El atributo se utiliza sin especificar un valor. .
forma
nombre
define Nombre , que se utilizará para hacer referencia a elementos en JavaScript o para hacer referencia a datos del formulario después de que el formulario se haya completado y enviado. Es análogo al atributo id.
3. Crea campos de formulario
Elemento crea la mayoría de los campos del formulario. Los atributos de un elemento difieren según el tipo de campo que se utiliza para crear el elemento.
Usando estilos CSS puedes cambiar el tamaño de fuente, el tipo de fuente, el color y otras propiedades del texto, así como agregar bordes, color de fondo y imagen de fondo . El ancho del campo lo especifica la propiedad de ancho.
Tabla 3. Atributos de etiqueta
Atributo
Significado/Descripción
aceptar
Determina el tipo de archivo que se permite enviar al servidor. Indicado sólo para . Valores posibles : file_extension: permite descargar archivos desde extensión especificada , por ejemplo, aceptar=".gif", aceptar=".pdf", aceptar=".doc" audio/* - permite descargar archivos de audio video/* - permite descargar archivos de video image/* - permite cargar imágenes media_type: indica el tipo de medio de los archivos descargados.
alternativo
define texto alternativo
para imágenes, indicado sólo para .
autocompletar
Responsable de recordar los valores ingresados en el campo de texto y sustituirlos automáticamente la próxima vez que ingrese: on - significa que el campo no está protegido y su valor se puede almacenar y recuperar, desactivado: desactiva el autocompletar para los campos del formulario.
enfoque automático
Le permite asegurarse de que en el formulario cargado uno u otro campo de entrada ya tenga el foco (ha sido seleccionado), estando listo para ingresar un valor.
comprobado
El atributo verifica si la casilla de verificación predeterminada está marcada al cargar la página para campos como type="checkbox" y type="radio" .
desactivado
forma
El valor del atributo debe ser igual al atributo id del elemento.
formación
Especifica la URL del archivo que procesará los datos ingresados en los campos al enviar el formulario. Establecer solo para campos de tipo="enviar" y tipo="image" . El atributo anula el valor del atributo de acción del propio formulario.
tipo de formulario
Determina cómo se codificarán los datos del campo del formulario cuando se envíen al servidor. Anula el valor del atributo enctype del formulario. Establecer solo para campos de tipo="enviar" y tipo="image" . Opciones: application/-x-www-form-urlencoded es el valor predeterminado. Todos los caracteres se codifican antes del envío (los espacios se reemplazan con el carácter +, los caracteres especiales se convierten a valores ASCII HEX) multipart/form-data - los caracteres no están codificados texto/sin formato: los espacios se reemplazan con el símbolo + y los caracteres especiales no se codifican.
método de forma
El atributo especifica el método que utilizará el navegador para enviar datos del formulario al servidor. Establecer solo para campos de tipo="enviar" y tipo="image" . Anula el valor del atributo del método del formulario. Opciones: get es el valor predeterminado. Los datos del formulario (par nombre/valor) se agregan a la URL y se envían al servidor: URL?nombre=valor&nombre=valor Los datos del formulario posterior se envían como una solicitud http.
formularionovalidar
Especifica que los datos del campo del formulario no deben validarse cuando se envía el formulario. Anula el valor del atributo novalidate del formulario. Se puede utilizar sin especificar un valor de atributo.
objetivo de formulario
Determina dónde mostrar la respuesta recibida después de enviar el formulario. Establecer solo para campos de tipo="enviar" y tipo="image" . Anula el valor atributo objetivo formas. _parent – carga la respuesta en el marco principal _top – carga la respuesta en pantalla completa nombre de marco: carga la respuesta en un marco con el nombre especificado.
altura
El valor del atributo contiene el número de píxeles sin especificar una unidad de medida. Establece la altura de un campo de formulario de tipo type="image" , por ejemplo, . Se recomienda establecer tanto la altura como el ancho del campo al mismo tiempo.
lista
Es una referencia a un elemento. , contiene su id . Le permite proporcionar al usuario varias opciones para elegir cuando comienza a ingresar un valor en el campo correspondiente.
máximo
Le permite limitar la entrada de datos numéricos permitidos. valor máximo , el valor del atributo puede contener un número entero o numero fraccionario . Se recomienda utilizar este atributo junto con el atributo min. Funciona con los siguientes tipos campos: número, rango, fecha, fecha y hora, fecha y hora local, mes, hora y semana.
longitud máxima
El atributo especifica cantidad máxima caracteres ingresados en el campo. El valor predeterminado es 524288 caracteres.
mín.
Le permite limitar la entrada numérica permitida a un valor mínimo.
múltiple
Permite al usuario ingresar múltiples valores de atributos, separados por una coma. Se aplica a archivos y direcciones de correo electrónico. Especificado sin valor de atributo.
nombre
Especifica el nombre que se utilizará para acceder al elemento.
patrón
Le permite determinar usando expresión regular la sintaxis de los datos que se deben permitir ingresar en un campo en particular. Por ejemplo, patrón="(3)-(3)" — corchetes establezca el rango de caracteres válidos, en este caso, cualquiera letras minúsculas , el número entre llaves indica que se requieren tres letras minúsculas, seguidas de un guión y luego tres números que van del 0 al 9.
marcador de posición
Contiene el texto que se muestra en el campo de entrada antes de completarlo (la mayoría de las veces es información sobre herramientas).
solo lectura
No permite al usuario cambiar los valores de los elementos del formulario; la selección y copia de texto aún está disponible. Especificado sin valor de atributo.
requerido
Muestra un mensaje indicando que este campo es obligatorio. Si el usuario intenta enviar el formulario sin ingresar el valor requerido en este campo, se mostrará un mensaje de advertencia en la pantalla. Especificado sin valor de atributo.
tamaño
Establece el ancho visible del campo en caracteres. El valor predeterminado es 20. Funciona con los siguientes tipos de campos: texto, búsqueda, tel, url, correo electrónico y contraseña.
src
Especifica la URL de la imagen utilizada como botón de envío del formulario. Indicado sólo para el campo. .
paso
Utilizado para elementos que requieren la entrada de valores numéricos, indica la cantidad en la que los valores aumentan o disminuyen durante el proceso de ajuste de rango (paso).
tipo
botón: crea un botón.
casilla de verificación: convierte un campo de entrada en una casilla de verificación que se puede marcar o borrar, p. tengo un auto
color: genera paletas de colores en los navegadores compatibles, lo que permite a los usuarios seleccionar valores de color en formato hexadecimal.
fecha: le permite ingresar una fecha en el formato dd.mm.aaaa. Cumpleaños:
datetime-local: le permite ingresar una fecha y hora separadas por letras mayúsculas letra inglesa T según el patrón dd.mm.aaaa hh:mm. Cumpleaños - día y hora:
correo electrónico: los navegadores que admiten este atributo esperarán que el usuario ingrese datos que coincidan con la sintaxis de las direcciones de correo electrónico. Correo electrónico:
archivo: le permite descargar archivos desde la computadora del usuario. Seleccionar archivo:
oculto: oculta el control, que no se muestra en el navegador y evita que el usuario cambie los valores predeterminados.
imagen: crea un botón que le permite insertar una imagen en lugar de texto en el botón.
mes: permite al usuario ingresar el número de año y mes usando el patrón aaaa-mm.
número: destinado a ingresar valores enteros. Sus atributos min , max y step especifican los límites superior, inferior y el paso entre valores, respectivamente. Estos atributos se asumen para todos los elementos que tienen indicadores numéricos. Sus valores predeterminados dependen del tipo de elemento. Por favor indique cantidad (de 1 a 5):
contraseña: crea campos de texto en el formulario, mientras que los caracteres ingresados por el usuario se reemplazan con asteriscos, viñetas u otros, instalado por el navegador iconos. Introduzca la contraseña:
radio: crea un interruptor, un control en forma de un pequeño círculo que se puede encender o apagar. Vegetariano:
rango: le permitirá crear un elemento de interfaz como un control deslizante, mínimo/máximo: le permitirá establecer el rango de selección
restablecer: crea un botón que borra los campos del formulario de los datos ingresados por el usuario.
búsqueda: denota un campo de búsqueda; de forma predeterminada, el campo de entrada tiene forma rectangular. Buscar:
enviar: crea un botón estándar que se activa con un clic del mouse. El botón recopila información del formulario y la envía para su procesamiento.
texto: crea campos de texto en un formulario y genera un campo de texto de una sola línea para la entrada de texto.
hora: le permite ingresar la hora en formato de 24 horas usando el patrón hh:mm. En los navegadores compatibles, aparece como un control de campo de entrada numérico con un valor editable con el mouse y solo permite ingresar valores de tiempo. Especificar tiempo:
URL: el campo está destinado a especificar URL. Página de inicio:
semana: la herramienta de puntero correspondiente permite al usuario seleccionar una semana del año, después de lo cual proporcionará la entrada de datos en el formato nn-yyyy. Dependiendo del año, el número de semanas puede ser 52 o 53. Especificar semana:
valor
Determina el texto que aparece en un botón, en un campo o en el texto asociado. No especificado para campos de tipo archivo.
ancho
El valor del atributo contiene el número de píxeles. Le permite establecer el ancho de los campos del formulario.
4. Campos de entrada de texto
Elemento usado en lugar de elemento cuando necesita crear campos de texto grandes. El texto que se muestra como valor original se coloca dentro de la etiqueta. Las dimensiones del campo se establecen utilizando los atributos cols - dimensiones horizontales, filas - dimensiones verticales. La altura del campo se puede configurar. propiedad de altura . Todos los tamaños se calculan en función del tamaño de un carácter en una fuente monoespaciada.
Tabla 4. Atributos de etiqueta
5. Lista desplegable
Las listas le permiten organizar gran número puntos de forma compacta. Las listas desplegables se crean usando el elemento ... . Le permiten seleccionar uno o más valores del conjunto propuesto. De forma predeterminada, un cuadro de lista muestra su primer elemento.
Los elementos se utilizan para agregar elementos a la lista. ... , que se encuentran en el interior .
Para sistematizar listas, utilice el elemento. ... , que crea encabezados en listas.
Para las listas, puede cambiar el tamaño de fuente, el tipo de fuente, el color y otras propiedades del texto, así como agregar bordes, color de fondo e imagen de fondo.
Tabla 5. Atributos de etiqueta
Atributo
Significado/Descripción
enfoque automático
Establece el enfoque automático en un elemento cuando se carga la página.
desactivado
Deshabilita la lista desplegable.
forma
Define la forma a la que pertenece. esta lista . El valor del atributo es el identificador del formulario.
múltiple
Le permite seleccionar uno o más elementos; para hacer esto, al seleccionar, debe presionar y mantener presionada la tecla Ctrl.
nombre
Define un nombre para la lista desplegable. El valor del atributo contiene un nombre que refleja el tema de la lista.
requerido
Muestra un mensaje que indica que el usuario debe seleccionar un valor de la lista desplegable antes de enviar el formulario.
tamaño
Establece el número de elementos de la lista visibles en la pantalla al mismo tiempo. Si el número de elementos de la lista excede el número especificado, aparece una barra de desplazamiento. El valor del atributo se especifica como un número entero positivo.
6. Etiquetas para campos de formulario
Las etiquetas para elementos de formulario se crean usando el elemento ... . Hay dos formas de agrupar etiquetas y campos. Si el campo está dentro de un elemento , entonces no es necesario especificar el atributo for.
cuando tu último tiempo volaste en un avión?
Gato
7. Botones
Elemento ... Crea botones en los que se puede hacer clic. A diferencia de los botones creados ( , , , ), dentro del elemento puedes colocar contenido: texto o imagen.
Para mostrar el elemento correctamente diferentes navegadores debe especificar el atributo de tipo, por ejemplo, .
Los botones permiten a los usuarios enviar datos a un formulario, borrar el contenido del formulario o realizar alguna otra acción. Puede crear bordes, cambiar el fondo y alinear el texto en un botón.
Tabla 9. Atributos de etiqueta
Atributo
Significado/Descripción
enfoque automático
Establece el foco en el botón cuando se carga la página.
desactivado
Desactiva el botón, por lo que no se puede hacer clic en él.
forma
Indica uno o más formularios a los que pertenece este botón. El valor del atributo es el identificador del formulario correspondiente.
formación
El valor del atributo contiene la URL del controlador de datos del formulario enviado cuando se hace clic en el botón. Solo para tipo de botón tipo="enviar" . Anula el valor del atributo de acción especificado para el elemento .
tipo de formulario
Establece el tipo de codificación de los datos del formulario antes de enviarlos al servidor cuando se hace clic en botones como tipo="enviar". Anula el valor del atributo enctype especificado para el elemento . Valores posibles: application/x-www-form-urlencoded es el valor predeterminado. Todos los caracteres se codificarán antes de enviarlos. multipart/form-data: los caracteres no están codificados. Se utiliza cuando los archivos se cargan mediante un formulario. texto/sin formato: los caracteres no están codificados y los espacios se reemplazan con el símbolo +.
método de forma
El atributo especifica el método que utilizará el navegador para enviar el formulario. Anula el valor del atributo del método especificado para el elemento . Especificado solo para botones del tipo type="enviar". Valores posibles: get: los datos del formulario (par nombre/valor) se agregan a la URL y se envían al servidor. este método tiene restricciones en el tamaño de los datos enviados y no es adecuado para enviar contraseñas e información confidencial. post: los datos del formulario se agregan como una solicitud http. El método es más confiable y seguro que get y no tiene restricciones de tamaño.
formularionovalidar
El atributo especifica que los datos del formulario no deben validarse al enviarlos. Especificado solo para botones del tipo type="enviar".
objetivo de formulario
El atributo especifica en qué ventana se muestra el resultado después de enviar el formulario. Especificado solo para botones del tipo type="enviar". Anula el valor del atributo de destino especificado para el elemento . _blank: carga la respuesta en una nueva ventana/pestaña _self: carga la respuesta en la misma ventana (predeterminado) _parent: carga la respuesta en el marco principal _top - carga la respuesta en pantalla completa framename: carga la respuesta en un marco con el nombre especificado.
nombre
Establece el nombre del botón, el valor del atributo es texto. Se utiliza para vincular a los datos del formulario después de que se haya enviado el formulario, o para vincular a este botón (botones) en JavaScript.
tipo
Define el tipo de botón. Valores posibles: botón - botón en el que se puede hacer clic restablecer - botón de reinicio, devuelve el valor original enviar: botón para enviar datos del formulario.
valor
Establece el valor predeterminado enviado cuando se hace clic en el botón.
8. Casillas de verificación y botones de opción en formularios.
Las casillas de verificación en los formularios se configuran mediante la construcción , y el interruptor - usando .
Las casillas de verificación, a diferencia de los botones de opción, se pueden configurar en varias en un solo formulario. Si el atributo marcado se especifica para las casillas de verificación, cuando se cargue la página, las casillas de verificación en los campos del formulario correspondientes ya estarán seleccionadas.
Elemento Se utiliza al implementar la selección mediante botones de opción y casillas de verificación. puedes elegir artículo deseado , simplemente haciendo clic en el texto asociado al mismo. Para hacer esto necesitas colocar dentro del elemento .
Hola, queridos lectores del blog. Continuando con nuestro estudio, pasamos a considerar el formulario y las etiquetas de entrada con sus atributos (), con las que se pueden crear una amplia variedad de formularios para el sitio.
Cualquiera que sea el tema y el contenido de un recurso web en particular, lo más probable es que contenga formularios de una forma u otra: campos de texto, menús desplegables, varios botones o interruptores. Por cierto, en una de las publicaciones ya hablé de elementos que ayudan a diversificar las formas.
¿Cuál es el propósito práctico de toda la variedad de formas posibles? En primer lugar, son necesarios para enviar los datos ingresados por el usuario al servidor con el fin de procesarlos posteriormente mediante un script (controlador) especialmente creado.
Formularios HTML: cómo se crean utilizando formularios y entradas
Como decía al principio, en cualquier sitio web más o menos desarrollado debe estar presente algún tipo de formulario web, o incluso varios a la vez. Comprender lo importantes que son a la luz del cumplimiento de los recursos web. requisitos modernos , basta con darle de antemano tres objetos que usan formularios basados en las etiquetas de formulario y entrada, que, solo por su nombre, no dejan dudas sobre su necesidad para un proyecto de una dirección u otra:
Si sigues, por ejemplo, un enlace a un artículo sobre la creación comentario (permitiendo a todos los usuarios enviar mensajes a la administración del sitio), luego se presenta allí el código HTML con un formulario, que tiene una apertura (
) y cerrando ( ) Parte:
Aquí es donde el formulario juega un papel vital ya que inicia la instalación del formulario web. En sí mismo no muestra un área en una página web, sino que sirve como contenedor que contiene otras etiquetas.
En nuestro caso (ver captura de pantalla arriba), estos incluyen varios aporte (esta etiqueta HTML es única, es decir, no tiene componente de cierre), y también área de texto , con diferentes conjuntos de atributos. Cada uno de ellos define su propio elemento incluido en el formulario.
16. Enfoque automático (sin parámetros): un atributo lógico que pone el foco en el campo inmediatamente cuando se carga la página web, como resultado de lo cual puede ingresar datos sin hacer clic en ellos. No se puede aplicar únicamente al tipo de entrada = "oculto".
17. Desactivado (sin valores): desactiva para el usuario el elemento de formulario al que se agregó. La mayoría de las veces se usa junto con scripts, donde se especifican las condiciones bajo las cuales se activará un elemento inaccesible.
18. Forma — asocia el elemento con el formulario cuando está ubicado fuera del contenedor
. Para vincular, se agrega un atributo de identificación global a la etiqueta de formulario y un atributo de formulario a la etiqueta de entrada, cuyos valores son los mismos (por ejemplo, id="datos" y formulario="datos") .
19. Múltiple (sin parámetros) - conjuntos opción de opción múltiple para el usuario y solo se usa junto con type="file" y type="email".
Si utiliza el campo para carga de archivos es posible seleccionar varios archivos de su computadora a la vez usando Teclas Ctrl o Cambio. Si se muestra un campo para ingresar una dirección de correo electrónico (type="email"), los correos electrónicos deben ingresarse separados por comas.
20. Requerido (sin valores): activa el requisito para que el usuario ingrese datos. Por lo tanto, el navegador bloquea el envío del formulario web si un campo obligatorio se deja vacío y muestra el mensaje correspondiente sobre la necesidad de completarlo.
Este atributo no se utiliza para gráficos y botones estándar (tipo="botón | imagen"), así como para campo oculto entrada (tipo = "oculto").
21. Tamaño — determina el ancho del campo de texto en caracteres (apto sólo para tipo de elementos con parámetros "email | contraseña | buscar | tel | texto | url"). El valor predeterminado es 20 caracteres. .
Los siguientes cuatro atributos (22-25) para la etiqueta de entrada tienen casi la misma funcionalidad que para , pero para completar, también los mencionaré brevemente.
22. longitud máxima — impone un límite en la cantidad máxima de caracteres que se pueden ingresar al completar un campo de texto. Si intenta exceder este límite, se bloquearán más entradas. Este atributo sólo es aplicable para elementos de texto con tipo="correo electrónico | contraseña | buscar | tel | texto | url".
23. longitud mínima — impone un límite al número mínimo de caracteres necesarios para ingresar en el área de texto. Si se intenta enviar datos que contengan menos caracteres, aparecerá un mensaje corto indicando la necesidad de complementar el contenido del formulario y se proporcionará información sobre el número de caracteres ya ingresados. Las condiciones de uso son exactamente las mismas que en el caso de maxlength.
24. Marcador de posición — puedes colocar una pista (servirá como parámetro) directamente en el campo de texto, que desaparecerá en el momento en que el usuario comience a ingresar caracteres. Sólo para campos que se forman usando parámetros correo electrónico, contraseña, búsqueda, texto, tel, url atributo de tipo de la etiqueta de entrada.
25. Sólo lectura (sin parámetros): indica que el texto ingresado previamente en el campo está disponible para lectura y copia únicamente. Suele utilizarse junto con scripts, donde se especifican condiciones cuyo cumplimiento puede activar este elemento del formulario.
Y finalmente, algunos atributos más que complementan la funcionalidad. varios elementos formas:
26. Patrón - en el papel de su significado refleja expresión regular , sobre cuya base se establecen las reglas para ingresar información. Se recomienda agregar adicionalmente un global atributo de título , cuyo parámetro es agregar texto explicativo para ayudar a los usuarios a completar los campos. El patrón se aplica solo a elementos de correo electrónico, contraseña, búsqueda, texto, teléfono y URL. Entendámoslo con un ejemplo. Aquí está el código para un formulario de registro simplificado (con):
Para el campo de inicio de sesión (tipo="texto"), se especifica una expresión regular (5,) como valor de patrón, lo que implica el uso de caracteres latinos, y se deben ingresar al menos cinco caracteres.
En relación con el área de texto para la contraseña (tipo="contraseña"), el valor se establece en (8,), lo que especifica la entrada de caracteres exclusivamente latinos en cualquier caso (letras mayúsculas y minúsculas), así como números, mientras que el número total de todos los caracteres no debe ser inferior a ocho.
Si se violan las condiciones de entrada especificadas, el navegador no le permitirá enviar datos y mostrará una advertencia adecuada:
27. Src — define la ruta a la imagen (URL, que es su valor) para mostrar el botón gráfico “imagen” (consulte la tabla de parámetros de tipo de entrada arriba).
28. Paso — establece el paso para los elementos que proporcionan una selección de valores numéricos (tipo de entrada="fecha | fechahora-local | mes | número | rango | tel | hora | semana").
Puede tomar como parámetro cualquier número entero o fraccionario. Paso predeterminado="1" . Para establecer el rango de entrada final, puede volver a utilizar los atributos mínimo y máximo mencionados anteriormente. Para mayor claridad, incluiremos 2 elementos tipo="número" en el formulario de prueba. Para el primero, establezca el paso="2", y para el segundo, el paso="0,1":
29. Valor — establece el valor del elemento del formulario que se pasará al controlador. Se envía un par "nombre-parámetro" al servidor, donde el nombre está determinado por el atributo nombre de etiqueta entrada, y el parámetro es el atributo de valor. Además, para varios elementos de forma. El valor jugará diferentes roles. :
for type="botón | restablecer | enviar" - establece la etiqueta de texto en los botones;
para tipo="casilla de verificación | radio | imagen": identifica cada casilla de verificación, interruptor o botón gráfico al enviar y procesar datos en el servidor;
para tipo="contraseña | texto": inmediatamente al cargar el formulario, se muestra el texto preliminar en el campo, que el usuario puede cambiar o eliminar por completo;
for type="file" (carga de archivos) no aplica porque no afecta este elemento.
Uso de ejemplo para cada una de las opciones anteriores:
Aquí valor del atributo de valor define los siguientes componentes de cada elemento: muestra un fragmento de texto para el campo type="text" ("Su nombre"), identifica cada uno de los botones de radio ("1" y "2") configurados usando type="radio", y también activa la inscripción en el botón ("Enviar").
Un ejemplo de cómo crear un hermoso formulario HTML
A continuación, intentaré presentarles un formulario web de muestra, cuyo código incluye no solo combinaciones de tipos de entrada con diferentes valores que forman botones y campos de texto estándar, sino también, por ejemplo, que le permiten iniciar el enfoque en un elemento no sólo con un clic directo del mouse, sino también haciendo clic en el texto.
Tenga en cuenta que para obtener un diseño único componentes individuales se colocan los formularios, cada uno de los cuales con conjuntos:
Atrás (ancho máximo: 350 px; margen: 50 px auto 0; relleno: 20 px; fondo: #f3ebe1; familia de fuentes: "Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (relleno:15px; borde:4px doble #909090) .form-1, .form-2, .form-3 (borde inferior: ninguno) .form-1 entrada (pantalla: bloque; margen- abajo: 10px; ancho: 100%) .in (relleno-izquierda: 40px) .in entrada (ancho: 100%) ..png) sin repetición; posición de fondo: 10px 10px) ..png) sin repetición; posición de fondo: 10px 10px) .form-4 entrada (pantalla: bloque; altura: 50px; tamaño de fuente: 24px; ancho: 100%; cursor: puntero)
Como resultado, dicho formulario web adopta el siguiente esquema:
Información más completa sobre cómo crear este forma específica en esta pagina (por cierto, allí no solo puedes comprobar la funcionalidad de cada uno de ellos). áreas de texto , ingresando datos en ellos, pero también experimentar con el formulario web editando el código HTML y/o Propiedades CSS , cambiando total o parcialmente su apariencia).
Mi objetivo era presentarles el algoritmo para usar diferentes significados escriba atributo y etiqueta de formulario para crear una variedad de formularios HTML en el sitio web. Espero que la tarea esté completa. En cualquier caso, comparte tu opinión sobre este tema tan diverso en los comentarios.
Naturalmente, en publicaciones posteriores continuaré describiendo las etiquetas principales. marcado de hipertexto , así que no olvides suscribirte a las actualizaciones del blog por correo electrónico. Además, para reforzar esto, consulte otra lección de Evgeniy Popov sobre cómo crear un formulario de contacto.
Los formularios están diseñados para enviar datos del usuario al servidor web. Los formularios en HTML pueden constar de campos y áreas de texto, casillas de verificación, botones de opción y listas desplegables. Todos estos son elementos de forma. Cada elemento sirve para transmitir algún significado al sitio. En esencia, un formulario HTML es una página web en la que ve áreas para ingresar su información. Después de completar el formulario y hacer clic en enviar, la información del formulario se empaqueta y se envía al servidor web para su procesamiento mediante un script del lado del servidor (archivo de controlador). Después del procesamiento, se le devuelve otra página web como respuesta. La siguiente figura demuestra claramente cómo funciona el formulario:
No hay nada difícil en crear formularios HTML. La forma más sencilla de tener una idea de los formularios es analizar un pequeño código HTML y luego ver cómo funciona. El siguiente ejemplo muestra la sintaxis para crear un formulario HTML simple:
Ejemplo: formulario HTML simple
Mi primera forma: Nombre: Apellido:
forma sencilla
Mi primera forma: Nombre: Apellido:
Elemento
Los formularios se insertan en páginas web utilizando el elemento.
. Proporciona un contenedor para todo el contenido del formulario, incluidos elementos como campos de texto y botones, así como cualquier otra etiqueta HTML. Sin embargo, no puede contener otro elemento.
. Para enviar el formulario al servidor utilice el botón “Enviar”, el mismo resultado se obtendrá si presiona la tecla “Enter” dentro del formulario. Si el botón "Enviar" no está presente en el formulario, se puede utilizar la tecla "Entrar" para enviar. La mayoría de los atributos de los elementos.
afectan el procesamiento del formulario, no su diseño. Los más comunes son acción Y método . Atributo acción contiene la URL a la que se enviará la información del formulario para que el servidor la procese. Atributo método es método HTTP , que los navegadores deben utilizar para enviar datos del formulario.
Elemento
Casi todos los campos del formulario se crean utilizando el elemento.
(de la entrada en inglés - entrada). Apariencia del elemento
cambia dependiendo del valor de su atributo tipo :
Aquí hay algunos valores de atributos. tipo :
Ingresando texto y contraseña
Uno de los más tipos simples elementos de formulario es un campo de texto diseñado para ingresar texto desde una línea. Este tipo de entrada de texto está configurado de forma predeterminada y, por lo tanto, es el campo de una línea que se mostrará si olvida especificar el atributo. tipo . Para agregar un campo de entrada de texto de una línea a un formulario, debe dentro del elemento
registrar el atributo tipo con valor de texto:
El campo de entrada de contraseña es un tipo de campo de texto normal. Admite los mismos atributos que un campo de texto de una sola línea. Atributo nombre establece el nombre del campo de entrada de contraseña que se enviará al servidor junto con la contraseña ingresada por el usuario. Para crear un campo de contraseña, debe configurar el atributo de contraseña en tipo (contraseña (inglés) - contraseña):
Un ejemplo de creación de un formulario con un campo de contraseña:
Ejemplo: campo de contraseña
Su inicio de sesión:
Contraseña:
Su inicio de sesión:
Contraseña:
Puede utilizar el atributo junto con este atributo. longitud máxima , cuyo valor determina el número máximo de caracteres que se pueden introducir en esta linea . También puede establecer la longitud del campo de entrada usando el atributo tamaño . De forma predeterminada, la mayoría de los navegadores limitan el ancho de un campo de texto a 20 caracteres. Para controlar el ancho de los nuevos elementos del formulario, en lugar de un atributo tamaño , se recomienda utilizar los medios mesas en cascada estilos (CSS). Atributo valor especifica el valor que se muestra de forma predeterminada en el campo de texto cuando se carga el formulario. Al ingresar un valor predeterminado en el campo, puede explicarle al usuario exactamente qué datos y en qué formato desea que ingrese aquí. Esto es como una muestra, porque es mucho más conveniente para el usuario completar el formulario, viendo un ejemplo frente a él.
Interruptores (radio)
Elemento
tipo radio crea interruptores que utilizan el principio lógico "O", lo que le permite seleccionar solo uno de varios valores: si selecciona una posición, todos los demás se vuelven inactivos. La sintaxis básica de un elemento de alternancia es:
Atributo nombre para interruptores es necesario y juega papel importante al combinar varios elementos de botones de opción en un grupo. Para combinar interruptores en un grupo, debe configurar mismo valor atributo nombre Y significado diferente atributo valor . Atributo valor establece el valor del botón de opción seleccionado que se enviará al servidor. El valor de cada elemento del botón de opción debe ser único dentro del grupo para que el servidor sepa qué opción de respuesta eligió el usuario. presencia de atributos comprobado (del inglés - instalado) en el elemento de cambio indica cuál de las opciones propuestas debe seleccionarse de forma predeterminada al cargar la página, si es necesario. Este atributo solo se puede configurar para un elemento de botón de opción del grupo:
¿Cuántos años tiene?
menores de 18 años
de 18 a 24
de 25 a 35
más de 35
¿Cuántos años tiene?
menores de 18 años
de 18 a 24
de 25 a 35
más de 35
Casillas de verificación
Elemento
tipo caja crea casillas de verificación que son similares a los botones de opción en el sentido de que le dan al usuario la posibilidad de elegir entre las opciones que usted proporciona. La principal diferencia con los botones de opción es que el visitante puede seleccionar varias opciones a la vez y las banderas en sí se indican con cuadrados en lugar de círculos. Al igual que con los botones de opción, se crea un grupo de casillas de verificación asignando a cada elemento el mismo valor de atributo. nombre , sin embargo, cada casilla de verificación tiene su propio significado. La sintaxis básica de una casilla de verificación es:
Atributo comprobado , al igual que con los botones de opción, especifica que la casilla de verificación debe estar marcada de forma predeterminada cuando se carga la página. Este atributo se puede configurar simultáneamente para varias casillas de verificación de grupo. El siguiente ejemplo de uso de casillas de verificación tiene varias opciones de respuesta predeterminadas:
Ejemplo: uso de botones de radio
Jazz
Blues
Roca
Canción
País
¿Qué géneros de música te gustan?
Jazz
Blues
Roca
Canción
País
Botones de enviar y restablecer
Elemento
tipo entregar crea un botón que, cuando se hace clic, envía el navegador a un script del servidor para procesar los datos ingresados por el usuario en el formulario. Si creamos un botón que borra el formulario, entonces le asignamos el atributo tipo valor de "restablecimiento". elemento
tipo entregar no puede ser asignado atributo requerido nombre . Atributo valor Se utiliza en este elemento para especificar el texto que indica la etiqueta del botón. De forma predeterminada, los navegadores tienen escrito "Enviar" en el botón; si no está satisfecho con esta inscripción, ingrésela usted mismo. Dado que los estilos de los botones de confirmación pueden diferir en diferentes navegadores, es mejor personalizar el estilo del botón usted mismo utilizando herramientas CSS o botones gráficos. Creando botones de confirmación y borrado:
Ejemplo: usar enviar y restablecer
Al hacer clic en el botón Restablecer se restablecen los datos ingresados por el usuario.
El atributo de acción.
Principal para elemento
es un atributo acción , que especifica el controlador de datos del formulario. Un controlador de datos es un archivo que describe qué hacer con los datos del formulario. El resultado de este procesamiento es una nueva página HTML que se devuelve al navegador. En otras palabras, en el atributo acción especifica la ruta URL a un archivo de controlador en el servidor (a veces llamado página de secuencia de comandos) para procesar el formulario. La sintaxis es la siguiente:
…
El archivo de procesamiento se encuentra en el servidor. mytestserver.com en una carpeta carpeta de nombres y el nombre del script del servidor que procesará los datos - obrabotchik.php . Todos los datos que haya introducido en el formulario de la página web le serán cedidos. La extensión .php indica que el formulario especificado se procesa mediante un script escrito en PHP. El controlador en sí puede estar escrito en otro idioma, por ejemplo, podría ser el lenguaje de programación Python, Ruby, etc. Es recomendable establecer siempre el valor del atributo. acción . Si el formulario debe pasar valores a la misma página donde se encuentra, proporcione una cadena vacía como valor del atributo de acción: action="".
atributo de método
Atributo método especifica cómo se debe transferir la información al servidor. El método de envío del formulario que elija depende de los datos que desee enviar con el formulario. El volumen de estos datos juega aquí un papel importante. Los más populares son dos métodos para transferir los datos de origen de su formulario desde el navegador al servidor: CONSEGUIR Y CORREO . El método se puede configurar en cualquiera que elija y, si no lo especifica, se utilizará el predeterminado. CONSEGUIR . Consideremos el uso de cada uno de ellos.
método de publicación
Método CORREO empaqueta datos del formulario y los envía al servidor sin que el usuario se dé cuenta, ya que los datos están contenidos en el cuerpo del mensaje. Navegador web, al utilizar el método CORREO envía una solicitud al servidor que consta de encabezados especiales seguidos de datos del formulario. Dado que el contenido de esta solicitud sólo está disponible para el servidor, el método CORREO se utiliza para transmitir datos confidenciales como contraseñas, datos de tarjetas bancarias y otra información personal de los usuarios. Método CORREO también apto para enviar grandes volúmenes de información, ya que a diferencia del método CONSEGUIR , no tiene restricciones en la cantidad de caracteres transmitidos.
OBTENER método
Como ya sabes, la función principal de un navegador es recibir páginas web desde el servidor. Entonces cuando usas el método CONSEGUIR , su navegador simplemente recupera la página web como lo hace siempre. Método CONSEGUIR También envuelve los datos del formulario, pero los agrega al final de la URL antes de enviar la solicitud al servidor. Para entender cómo funciona el método. CONSEGUIR , veámoslo en acción. Abra el primer ejemplo de esta lección (Ejemplo: formulario HTML simple) en el Bloc de notas (por ejemplo, Notepad++) y realice un pequeño cambio en el código HTML:
aquellos. reemplazar CORREO en CONSEGUIR . Guarde el archivo con el nombre nombre_archivo.html y actualice la página del navegador (F5), luego complete el formulario, por ejemplo Vasya Pupkin y haga clic en el botón "Enviar". En la barra de direcciones de tu navegador verás algo como esto:
Nombre_archivo.html?firstname=Vasya&lastname=Pupkin
Ahora puedes ver el nombre de cada elemento del formulario, así como su valor, aquí mismo en la URL. La URL está separada del resto de los datos del formulario por un signo de interrogación y los nombres y valores de las variables están separados por un signo comercial. (&)
. Este método debe utilizarse si no va a transferir grandes cantidades de información. Este método no funcionará si los datos de su formulario son confidenciales, como almacenar un número de tarjeta bancaria o una contraseña. Además, el método CONSEGUIR no es adecuado si desea enviar archivos al servidor junto con el formulario.
Agrupar elementos de formulario
Los elementos del formulario que están relacionados en significado se pueden agrupar entre etiquetas.
Y
. El navegador mostrará Es bastante difícil hablar de formularios en un tutorial dedicado a HTML. La razón es muy simple: crear un formulario HTML es mucho más fácil que crear el "punto en el mundo exterior" al que el formulario HTML enviará información. En la mayoría de los casos, dicho "punto" es un programa escrito en Perl o C.
Los programas que procesan datos enviados mediante formularios suelen denominarse scripts CGI. El acrónimo CGI significa Common Gateways Interface. Escribir scripts CGI en la mayoría de los casos requiere un buen conocimiento del lenguaje de programación apropiado y las capacidades del sistema operativo Unix.
Actualmente, se ha generalizado un poco el lenguaje PHP/FI, cuyas instrucciones se pueden incrustar directamente en documentos HTML (los documentos se guardan como archivos con la extensión *.pht o *.php).
Los formularios HTML pasan información a los programas controladores en forma de pares [nombre de variable] = [valor de variable]. Los nombres de las variables deben especificarse en letras latinas. Los controladores tratan los valores de las variables como cadenas, incluso si solo contienen números.
El formulario se abre con la etiqueta.