No es un elemento de formulario. Elementos de forma como objetos. Eventos generales de elementos de formulario
Cada elemento de la página puede considerarse como un objeto que tiene sus propias propiedades, métodos y controladores de eventos. La mayoría de las veces, los eventos de la página están asociados con un formulario (hacer clic en un botón, por ejemplo).
Los formularios de un documento están representados por la familia Formularios. Se puede acceder a los formularios con nombre directamente por nombre: formularios.MyForm.property o MyForm.property.
Propiedades generales elementos de forma:
Valor: devuelve el contenido del objeto.
Deshabilitado: desactiva el objeto.
Nombre: devuelve una cadena con el valor del nombre del objeto.
Eventos de elementos de formulario comunes:
OnFocus: el objeto se enfocó y se activó.
OnBlur: el objeto está desenfocado.
OnClick: se produjo un clic del mouse en el área del objeto.
OnDblClick - sucedió doble toque ratón en el área del objeto.
OnMouseOver: el mouse se sitúa sobre el elemento.
OnMouseOut: el puntero del mouse ha “abandonado” el elemento.
Métodos generales elementos de forma:
foco: da foco al elemento de formulario especificado.
desenfoque: elimina el foco de un elemento de formulario.
Elementos de texto,Contraseña,Área de texto.
Propiedades:
maxLength – devuelve longitud máxima pauta.
defaultValue: devuelve el valor inicial del elemento establecido en las etiquetas.
Métodos:
select() – selecciona el área de entrada elemento especificado formas.
Eventos:
OnChange: se ha cambiado el contenido del objeto. Comprobado resultado final. Es decir, durante el proceso de edición se podrían realizar cambios y luego eliminarlos. Si el estado inicial del campo es estado final, entonces se considera que el evento no ocurrió.
OnSelect: se ha seleccionado parte del texto.
CheckBox, elemento de radio.
Propiedades:
marcado: verifica el estado actual de la casilla de verificación. Verdadero: instalado, Falso: eliminado.
defaultChecked: devuelve el valor inicial del elemento establecido en las etiquetas.
Seleccionar elemento.
Propiedades:
opciones: conjunto de parámetros de objetos de opción.
selectedIndex: devuelve el índice del elemento seleccionado.
seleccionado: devuelve un valor booleano que indica el estado actual del parámetro en el objeto.
defaultSelected: devuelve un valor booleano: el valor inicial del elemento, establecido en las etiquetas.
índice: devuelve el índice del elemento.
Eventos:
OnChange: se ha cambiado el contenido del objeto.
Etiquetas separación lógica. Atributos de etiquetas comunes.
etiqueta HTML
(regla horizontal) define linea horizontal, que inserta un salto de línea antes y después de sí mismo y ocupa todo el ancho disponible. Esta línea será útil al separar una introducción temática del texto principal, por ejemplo, al cambiar escenas en una historia o hacer la transición a información adicional dentro de la sección del directorio.
Algunos elementos HTML que pueden estar presentes en el interior etiqueta CUERPO, se denominan elementos de "nivel de bloque", mientras que otros se denominan elementos "en línea" (también llamados elementos de "nivel de texto").
Modelo de contenido
Los elementos a nivel de bloque pueden contener elementos en línea y otros elementos a nivel de bloque.
Los elementos en línea solo pueden contener datos y otros elementos en línea. Inherente a esta diferencia estructural es la idea de que los elementos de bloque crean estructuras "más grandes" que los elementos en línea.
Formato
De forma predeterminada, los elementos a nivel de bloque tienen un formato diferente al de los elementos en línea. Normalmente, los elementos de nivel de bloque comienzan con nueva linea, pero los elementos integrados no.
Elementos de agrupación: elementos DIV y SPAN
Etiqueta inicial: requerida, Etiqueta final: requerida
Los elementos DIV y SPAN, junto con los atributos id y class, proporcionan mecanismo general añadiendo estructura a los documentos. Estos elementos definen información en línea (SPAN) o información a nivel de bloque (DIV), pero no imponen ninguna otra expresión para representar el contexto.
Navegadores visuales Generalmente se pone un carácter de nueva línea antes y después. elementos div
Atributos de etiquetas comunes
Los atributos comunes se pueden utilizar para casi cualquier etiqueta HTML. Por eso se distinguen en grupo separado para evitar numerosas repeticiones sin sentido.
Clave de acceso
Le permite navegar a un campo de texto usando algún atajo de teclado con la letra o número especificado en el atributo. Uso de los navegadores varias combinaciones llaves..
Especifica uno o más nombres de clase para asociar un elemento con una hoja de estilo. Si se especifican varias clases, se enumeran separadas por un espacio. El nombre de la clase puede contener letras latinas(A-Z, a-z), números (0-9), guión (-) y guión bajo (_), el primer carácter debe ser una letra.
contento
Indica si el contenido del elemento se puede editar o no. Valores posibles: "verdadero", "falso". El valor "verdadero" puede omitirse (contenteditable).
Menú contextual
Instalaciones menú contextual para el elemento. El valor del atributo es el identificador del menú creado usando la etiqueta.
- prefijo datos- eliminado;
- se elimina el guión antes de la letra y la letra posterior se pone en mayúscula;
- los demás guiones permanecen sin cambios.
Por ejemplo, el atributo de número de usuarios de datos se convierte en la variable número de usuarios.
Establece la dirección en la que se muestra el texto. Valores posibles:
- litros – de izquierda a derecha,
- rtr – de derecha a izquierda.
Arrastrable
Indica si el elemento se puede arrastrar con el ratón o no. Valores posibles: "verdadero", "falso".
El elemento está oculto, es decir. no se muestra en la página, pero se puede acceder a él mediante scripts.
El atributo oculto no funciona en Safari, Android, iOS.
El identificador del elemento, que se utiliza para acceder al elemento a través de scripts. IDENTIFICACIÓN - nombre único elemento, es decir debe aparecer sólo una vez en el código del documento. El identificador puede contener letras latinas (A–Z, a–z), números (0–9), guión (-) y guión bajo (_), el primer carácter debe ser una letra.
En HTML5 identificación También se puede utilizar para vincular a una ubicación específica en una página web.
El idioma del contenido del elemento.
corrector ortográfico
Determina si se revisa o no la ortografía y la gramática del texto. Valores posibles: "verdadero", "falso". El valor "verdadero" se puede omitir por completo (corrección ortográfica). El resultado sólo será visible para los campos del formulario. Y
Estilos de elementos internos.
índice de tabulación
Determina el orden en el que el formulario recibe atención al navegar entre elementos usando la tecla Tab. El valor posible es cualquier número entero positivo. La transición a elementos que no tienen un atributo tabindex ocurre después de todos los elementos "numerados" en el orden en que se especifican en el código.
Texto emergente que aparece al pasar el ratón sobre un elemento.
Hojas de estilo. Selectores
Hojas de estilo.
El estilo es todo lo que define. apariencia Documento HTML cuando se muestra en una ventana del navegador: fuentes, colores, posición, etc.
Las hojas de estilo en cascada son tecnología simple adjuntar estilos a documentos HTML. Una hoja de estilo es una plantilla que controla el formato de las etiquetas en un documento. Es un conjunto de reglas de visualización.
cualquier regla mesas en cascada estilos consta de dos partes: un selector y una definición. Cada elemento HTML representa posible CSS selector. Las propiedades de un selector determinan el estilo del documento para el que se define.
Tipos de selectores:
Común.
Selector ( definición}
Una definición consta de dos partes: una propiedad y su valor, separados por dos puntos. El propósito de la propiedad se desprende claramente de su nombre.
Selectores de clases.
selector.clase( definición}
En CSS, los selectores de clases se pueden utilizar para describir estilos propios para diferentes clases de los mismos elementos.
Las clases también se pueden declarar sin estar vinculadas explícitamente a elementos específicos.
Las clases también se pueden declarar sin vincularlas explícitamente a elementos específicos.
Selectores de identificación.
#ID (definición)
ID: estilo con nombre individual. Con su ayuda, puedes crear excepciones estilísticas entre elementos de la misma clase. Los identificadores se utilizan principalmente para otorgar propiedades individuales a uno o más elementos de la misma clase.
Selectores de contexto.
selector selector ( definición}
Los selectores contextuales son combinaciones de varios selectores ordinarios. El estilo lo establece únicamente el elemento en la secuencia dada dependiendo del orden en cascada.
Para dar múltiples elementos propiedades idénticas Los selectores se enumeran separados por comas.
Una de las opciones para procesar el formulario podría ser el envío de datos a través de correo electrónico:
acción="correo a:Adpec@cepver.dominio"
Usando el atributo de método, puede configurar el protocolo para enviar datos al servidor. El protocolo GET se utiliza de forma predeterminada, pero en la mayoría de los casos no satisface a los desarrolladores, por lo que se utiliza con mayor frecuencia el protocolo POST.
El atributo enctype le permite especificar cómo se codifica el contenido del formulario.
El formulario esta lleno diferentes usuarios, por lo que hay un atributo que le permite definir una lista de codificaciones válidas:
aceptar-charset="lista de juegos de caracteres"
También puede definir una lista de tipos de datos válidos:
aceptar="lista de tipos de datos"
La mayoría de los formularios están equipados con botones que le permiten restablecer el formulario o confirmar que se ha completado correctamente y enviar los datos para definir los programas de script que deben ejecutarse después. acciones especificadas usuario, hay dos atributos de evento al enviar y al restablecer.
Atributos estándar: id, clase, idioma, estilo, directorio, título, destino, atributos de evento
Este elemento le permite crear varias partes del formulario, como casillas de verificación, botones de opción y campos de entrada. El elemento no tiene etiqueta final, ya que todos los parámetros se especifican mediante atributos.
El tipo de elemento determina atributo de tipo:
Type="text" - creación de un campo de entrada en el que puede colocar automáticamente texto libre, utilizando el atributo de valor;
Type="contraseña": crea un campo para ingresar una contraseña y la información ingresada se muestra como asteriscos;
Type="checkbox" - crear una casilla de verificación;
Type="radio" - definición de un botón de opción. Para crear un grupo de botones de opción, debe utilizar varios elementos INPUT. A continuación se muestra un ejemplo de un grupo de tres botones de opción:
interruptores
El atributo marcado especifica qué botón de opción debe seleccionarse
por defecto. En la figura. La Figura 4.4 muestra la apariencia de este grupo de interruptores.
Fig.4.4. Cambiar grupo
Type="button" - creación de un botón personalizado;
Type="enviar": crea un botón, al hacer clic en él se confirma la introducción de información en el formulario. El atributo de valor se utiliza para definir la etiqueta en el botón;
Type="reset" - también un botón, pero para cancelar la entrada de datos en el formulario;
Type="image" - crear un botón con una imagen. para indicar archivo gráfico Se utiliza el atributo src. alinear atributo Diseñado para posicionar un botón con un patrón. Los valores de los atributos ya se han mencionado varias veces:
abajo, izquierda, medio, derecha, arriba. Utilice este atributo en en este caso No lo recomiendo porque no todos los navegadores lo admiten;
Type="file": una forma de seleccionar un archivo para adjuntarlo al formulario. Se solicita al usuario que escriba el nombre del archivo en el campo de entrada. Además, el navegador crea automáticamente un botón Examinar al lado del campo de entrada, que le permite iniciar un estándar (por ejemplo Sistema operativo) cuadro de diálogo de selección de archivos;
Type="hidden" - elemento oculto al usuario. Estos elementos se utilizan para incluir información fija en el conjunto de datos de un formulario. Básicamente, se trata de definir un nombre de variable y su valor.
Los atributos restantes son necesarios para definir las propiedades del elemento. Muchos de ellos son necesarios porque proporcionan procesamiento de datos de formulario en el lado del servidor.
El atributo de nombre debe estar presente en todos los elementos de ENTRADA excepto en los botones de confirmación y reinicio. El valor de este atributo especifica el nombre del campo del formulario, es decir, el bloque de datos ingresado en ese campo. El programa del servidor puede seleccionar los datos necesarios usando este nombre.
Ya conocemos el alcance del atributo de valor. El valor del atributo especifica el valor predeterminado para un campo de entrada o determina la etiqueta de un botón.
Arriba mostramos cómo crear un grupo de botones de opción usando el atributo marcado. Este atributo se puede utilizar para casillas de verificación exactamente de la misma manera. Su presencia indica que la casilla de verificación debe estar marcada de forma predeterminada. A diferencia de los botones de opción, se puede seleccionar cualquier número de casillas de verificación al mismo tiempo.
El atributo de tamaño le permite establecer la longitud del campo de entrada. La longitud se expresa en caracteres, pero este valor sólo se puede dar de forma aproximada. Para colocar en un campo de entrada una cierta cantidad caracteres, deberá seleccionar el valor del atributo. Al mismo tiempo, nadie puede garantizar que todos los navegadores proporcionen la longitud de línea requerida, y no menos. Por tanto, la longitud del campo de entrada debe elegirse con reserva.
El atributo maxlenght se puede utilizar de dos maneras. Primero, define la longitud máxima de una cadena que se puede escribir en un campo de entrada. En segundo lugar, se puede utilizar para limitar el tamaño del archivo adjunto al formulario.
El atributo de solo lectura le permite crear un elemento que no es editable.
El atributo usemap (consulte la sección "Dibujos y mapas" más arriba) se puede utilizar si se está creando un mapa en el formulario.
Al igual que en FORM, en elemento de ENTRADA puede especificar el atributo de aceptación.
Aceptable atributos generales: clave de acceso, índice de tabulación, solo lectura, deshabilitado.
Atributos estándar: id, clase, idioma, título, directorio, estilo, atributos de evento.
Usando elementos de FORMATO y ENTRADA, puede crear un objeto que reemplazará un objeto similar creado a partir del elemento ISINDEX. El siguiente código realiza las mismas funciones que el código del elemento ISINDEX (ver Figura 4.3):
Veamos algunos atributos importantes etiqueta
El atributo de acción especifica un archivo que se ejecuta en el servidor y recibe datos del formulario. El valor del atributo es la ruta al archivo.
El atributo del método establece el método de solicitud. Puede tomar valores:
método = "obtener"
método = "publicar"
Ejemplo de formulario HTML:
|
Dentro de una etiqueta
Etiqueta
Etiqueta puede aparecer de forma diferente en la página según el tipo. También puede crear diferentes campos de entrada. Tipos de etiquetas bastante, por lo que se analiza en un tema aparte. Por ahora, lo crearemos en la página como ejemplo. Agreguémoslo dentro de la etiqueta.
|
El atributo del nombre es muy importante. El nombre del elemento del formulario se envía al servidor junto con el valor. Los datos se envían al servidor de la siguiente forma:
nombre = valor
Si en el ejemplo anterior el usuario ingresa Andrey en el campo de entrada, los datos se enviarán al servidor en el formulario:
Si a un elemento del formulario no se le asigna un nombre, los datos de este elemento no se enviarán al servidor.
Etiqueta
Etiqueta
Etiqueta
en la etiqueta
Si algún elemento de la lista tiene un atributo seleccionado, este elemento se selecciona de forma predeterminada. No es necesario establecer ningún valor para este atributo, solo debe especificarse en la etiqueta.
Si no se especifica una altura de lista, entonces la lista tiene una fila de alto. La altura se cambia utilizando el atributo de tamaño. La apariencia de la lista depende de su altura. Si la lista tiene una línea de alto, parece una lista desplegable. Si la altura es más de una línea, la lista se muestra como un bloque. El ancho de la lista corresponde al ancho del elemento más grande. También se puede cambiar usando CSS.
Cambiemos la altura de la lista. Mira cómo cambia su apariencia.
Pero en esta forma es sólo una etiqueta de texto. Función principal de una etiqueta
El atributo de valor contiene el texto que se muestra en el botón.
Cuando hace clic en el botón, el archivo que se especifica en el atributo de acción de la etiqueta se inicia en el servidor.
Enfoque automático
Puede establecer el atributo de enfoque automático en cualquier elemento del formulario. No es necesario especificarlo, simplemente se establece en la etiqueta. Un elemento que tiene este atributo establecido se convierte en el foco después de que se carga la página. El atributo no funciona en todos los navegadores.
Es un campo de texto de una línea (Fig. 1), tamaño físico que se puede configurar usando el atributo TAMAÑO, y la secuencia de caracteres ingresada originalmente usando el atributo VALOR.
Arroz. 1. Elemento de formulario TEXTO
Un ejemplo del uso de este elemento en código HTML es siguiente línea:
TIPO="CONTRASEÑA"
Un tipo completamente similar al anterior, excepto que la información ingresada por el usuario en el campo de texto se mostrará en pantalla con símbolos “*” para ocultar el texto a un espectador externo.
Un elemento que es una forma simple de elección, que toma uno de dos estados estables: "verificado" - "no verificado" (Fig. 2).
Arroz. 2. Elemento de formulario CHECKBOX
Este artículo opera con las llamadas variables booleanas, es decir, variables, cada una de las cuales puede tomar el valor “VERDADERO” o “FALSO”. Cada elemento del formulario CHECKBOX crea un par lógico de valores del formulario "elemento_nombre-estado" y los transmite al servidor. Para establecer el estado inicial del elemento (marcado o no), utilice el atributo CHECKED.
Ejemplo de uso:
El llamado botón de opción (Fig. 3) se utiliza cuando una variable lógica puede tomar solo un valor entre muchos posibles.
Arroz. 3. Elemento de formulario RADIO
Todos los elementos RADIO de la misma forma se designan con el mismo valor de atributo NOMBRE.
El uso de botones de radio requiere una indicación explícita de los valores del atributo VALOR; uno de los botones debe estar marcado con el atributo CHECKED.Ejemplo de uso:
<Р АLIGN="СЕМТЕR">Por favor indica tu edadР>
Muestra un botón normal (Fig. 4), al hacer clic en él se realiza alguna acción del servidor.
Arroz. 4. Elemento de formulario BOTÓN
Usando el atributo NOMBRE, a este elemento se le asigna un nombre único; el atributo VALOR le permite cambiar la etiqueta que se muestra en el botón.
Ejemplo de uso:
TIPO="ENVIAR"
Define un botón, al hacer clic, los datos del formulario se transfieren al servidor. Como en el caso anterior, la etiqueta que se muestra en el botón se especifica mediante el atributo VALOR.
Ejemplo de uso:
Crea un botón que borra un formulario de texto completado incorrectamente. Los parámetros y valores de este botón no se envían al servidor junto con otros datos del formulario. Ejemplo de uso:
TIPO="ARCHIVO"
Genera un botón en la pantalla, al hacer clic, aparece el Explorador de Windows en la pantalla, permitiéndole adjuntar cualquier archivo de la computadora local del usuario a los datos enviados al servidor. Este elemento se utiliza principalmente en formularios para enviar mensajes de correo electrónico desde un servidor para organizar archivos adjuntos, así como para cargar imágenes al servidor. Por lo general, se muestra un pequeño campo de texto junto al botón, donde se ingresan automáticamente el nombre del archivo que se envía y la ruta al mismo en el disco local.
Ejemplo de uso:
TIPO="IMAGEN"
Crea un botón de envío similar al elemento ENVIAR, pero utilizando un gráfico creado por el usuario. Normalmente se utiliza en los casos en los que un botón rectangular gris estándar "no encaja" en el diseño del sitio. La URL de la imagen que actúa como botón se indica mediante el atributo SRC, y el elemento en sí puede contener sus propios atributos similares a los utilizados en la etiqueta. (consulte la lección 5), incluidos ALIGN, ALT, etc. Los atributos NOMBRE y VALOR se tratan de la misma manera que atributos similares del elemento ENVIAR.
Ejemplo de uso:
Este elemento está oculto y no se muestra en la pantalla del monitor del usuario.
Se utiliza para almacenar y transmitir información sobre el estado actual del formulario al servidor: cuando se presiona el botón ENVIAR elemento OCULTO formará un par lógico variables de tipo"nombre-valor", que se enviará al servidor usando protocolo HTTP. Los elementos OCULTOS sirven alternativa asequible galletas - archivos especiales, en el que se almacenan ajustes individuales usuario y permitiendo, por ejemplo, restaurar el último estado del formulario cuando el usuario vuelve a visitar la página que contiene este formulario.Ejemplo de uso:
Sin embargo, usando la etiqueta No es posible transferir todos los elementos del formulario disponibles a un diseñador web. Por ejemplo, los campos de texto especificados por los atributos TEXTO y CONTRASEÑA tienen un número muy limitado de caracteres que se pueden ingresar en esos campos. Si un webmaster se enfrenta a la tarea de crear dicho campos de texto para que el usuario pueda entrar gran número caracteres, se utiliza una etiqueta independiente
Arroz. 5. Elemento Formularios de área de TEXTO
Sintaxis de grabación de esta etiqueta se ve así:
Texto predeterminado en un cuadro de texto
Ya estás familiarizado con el atributo NAME, que define el nombre individual de cada elemento del formulario. Los atributos ROWS y COLS indican, respectivamente, el número máximo permitido de líneas de texto de entrada y caracteres por línea. Si el texto escrito por el usuario no cabe en la parte visible del contenedor de texto, aparecen barras de desplazamiento verticales y horizontales en los bordes del campo para desplazar el contenido del elemento TEXTAREA.
Ejemplo de uso:
Introduce tu mensaje aquí
Para crear un menú de selección en el formulario (Fig.6), el webmaster puede utilizar la etiqueta
Arroz. 6. SELECCIONAR elemento de formulario
La sintaxis general para escribir esta etiqueta es la siguiente:
OPCIÓN VALUE="Artículo N">Пункт N!}
El atributo MULTIPLE define la capacidad del usuario de marcar no uno, sino varios elementos de la lista propuesta a la vez. Si este atributo especificado, puede utilizar el atributo TAMAÑO, que determina el número de posiciones visibles en la pantalla al mismo tiempo.
Ejemplo de uso:
<Р АLIGN ="CENTER">Por favor indica tu ciudadР>
OPCIÓN VALOR="a">Санкт-Петербург!}
OPCIÓN VALOR="b">Mocква!}