Campo de entrada de dirección de correo electrónico. Tipos de elementos de ENTRADA

La etiqueta más común utilizada en los formularios es . No tiene etiqueta de cierre. Toda la información que el navegador necesita para procesar está contenida directamente en la etiqueta y se especifica mediante varios atributos. Semántica varía significativamente dependiendo del valor de su atributo tipo.

Atributos de etiqueta
tipo El atributo principal que especifica el tipo de elemento. Si no se especifica el atributo, se utiliza el valor predeterminado texto.
Valores posibles:

No todos los navegadores admiten los tipos agregados en HTML5.
Si el navegador no admite uno de los nuevos tipos, asumirá que es un archivo .

Cómo organizar el soporte para navegadores antiguos se describe usando el ejemplo de la fecha. Autocompletar="off" Desactiva la función de autocompletar para de este campo . Muy útil para campos de entrada de códigos de un solo uso, captchas, etc..setAttribute("autocompletar","apagado"); ... ... enfoque automático Recibo automático centrarse cuando se carga la página. El valor se puede establecer de tres maneras: ... Un ejemplo de emulación de la propiedad de enfoque automático para navegadores más antiguos. deshabilitado Hace que el elemento sea inaccesible.
Artículos no disponibles no se transmiten al servidor. nombre Nombre del campo. Cada campo de entrada que cree debe tener su propio nombre único De lo contrario, el script no determinará a qué campos se aplican los valores resultantes. Por supuesto, el nombre del campo de entrada debe coincidir con el nombre que se describe para él en el programa de procesamiento. valor El valor predeterminado del campo o la etiqueta del botón. De lo contrario, el script no determinará a qué campos se aplican los valores resultantes. Por supuesto, el nombre del campo de entrada debe coincidir con el nombre que se describe para él en el programa de procesamiento. tamaño El tamaño del campo de tipo. De lo contrario, el script no determinará a qué campos se aplican los valores resultantes. Por supuesto, el nombre del campo de entrada debe coincidir con el nombre que se describe para él en el programa de procesamiento. maxlength Límite en el número de caracteres que se pueden ingresar en un campo de tipo.
readonly="readonly" o "" Impide que el elemento sea modificado.

obligatorio Comprueba automáticamente si el campo está completo. Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo: mín.

Valor mínimo

número
Esta lista está inicialmente oculta y pasa a estar disponible cuando el campo recibe el foco o ingresa texto.

Tipos de elementos de ENTRADA

botón botón

Botón BOTÓN está destinado a aquellos casos en los que necesita ejecutar algún script. Es decir, se adjunta un evento al botón. Al hacer clic y se llama a la función requerida. Atributo valor establece la etiqueta en el botón. Atributo al hacer clic

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

nombre

sirve para nombrar el botón en JavaScript (no se transmite al servidor).

Ejemplo valor Botón botón ENVIAR Este botón es para enviar el formulario. En la mayoría de los navegadores, es casi indistinguible de un botón. En sí mismo no se transmite, sino que sólo sirve para el control. Atributo para botón

ENTREGAR prácticamente no se usa, ya que es mejor usar un controlador de eventos al enviar botón ENVIAR, especificado en la etiqueta . Después de todo, para transferir los datos ingresados ​​en el formulario,

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

Ejemplo y se llama a la función requerida. no es necesario presionar ningún botón

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

Ejemplo Esto provocará la transferencia de datos. Aceptar pedido

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.


Valor mínimo

Rechazar

Aceptar como observador

formularionovalidar se puede utilizar para evitar que se validen los valores del formulario. Examen

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

Botón REINICIAR

Este es el botón de borrar formulario. Al hacer clic, todos los elementos modificados vuelven a su valor predeterminado. Se utiliza muy raramente. Sin embargo, en algunos casos puede resultar bastante útil. Consejo: tenga cuidado al elegir la etiqueta de un botón REINICIAR . Algo como "Borrar", "Comenzar de nuevo", "Eliminar entrada", etc. sería bastante claro (y, lo más importante, intuitivo incluso para los tontos de los tontos). En general, es necesario que el usuario no tenga ni la más mínima duda sobre la finalidad de esta clave. Reiniciar Campo de entrada de TEXTO El campo de entrada de texto es el campo de entrada más utilizado en los formularios. Además, puede considerarse legítimamente el principal y
el elemento más importante Atributo, siempre es obligatorio, ya que en función de este parámetro, el navegador pasa el par nombre=valor al script.

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

El texto "Ivanov" se coloca en el campo creado como valor inicial.

Si el usuario no realiza cambios o hace clic en el botón, el valor Ivanov se enviará al script como apellido del usuario.

Campo de entrada de números NÚMERO El campo está destinado a ingresar números. parte fraccionaria

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

Si el usuario ingresa letras, el formulario no se enviará al servidor. Enviar Puedes establecer el mínimo

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

valor máximo campos y paso de cambio de número..

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

Valor mínimo

El valor del paso puede ser positivo o negativo, pero debe ser mayor que 0. Si el número ingresado en el campo no cumple con las restricciones especificadas, no se realizará el envío al servidor. De lo contrario, el script no determinará a qué campos se aplican los valores resultantes. Por supuesto, el nombre del campo de entrada debe coincidir con el nombre que se describe para él en el programa de procesamiento. Para especificar cualquier paso, utilice

paso = "cualquiera"

Campo

se muestra de manera diferente: algunos navegadores siempre muestran flechas, otros solo cuando pasan el cursor o reciben el foco. Contraseña Campo oculto OCULTO Este es un tipo especial (oculto) campo de texto

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
. Si un script procesa varios
diferentes formas

, luego en el campo oculto de cada formulario podrás especificar un identificador que te permitirá determinar con qué formulario estás tratando. ...Otros elementos de forma.......Otros elementos de forma...

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

El navegador no muestra el campo oculto, aunque se puede descubrir si coloca el navegador en modo de vista de archivo HTML y analiza el texto de la página web. Los campos ocultos son útiles cuando desea proporcionar información necesaria para un script, pero no desea que el usuario pueda cambiarla. Sin embargo, tenga en cuenta que un usuario experto podría guardar su formulario en un archivo, editarlo y luego enviar el formulario modificado al servidor. Por lo tanto no debes confiar en campos ocultos para crear cualquier tipo de protección.

El script recibirá una variable llamada

Versión de formulario , al que se le asignará el valor 1,2. Esta información se puede utilizar para determinar cómo procesar el resto de la información recibida del formulario. Si el usuario cambia este valor, el programa script puede comportarse de forma inesperada. Campo de entrada de dirección de correo electrónico

especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.

, con una coma (,) utilizada para separar direcciones ), dándoles tamaños arbitrarios. Pero como hacer este elemento caucho y satisfacer las condiciones:

  1. Posibilidad de instalar cualquier horizontal y márgenes verticales en el texto;
  2. El elemento debe ocupar todo el contenedor en el que se coloca;
  3. Al hacer clic con el mouse en cualquier parte del campo de texto, se coloca el cursor en él.

La respuesta es bastante sencilla y se puede resolver mediante el siguiente método:

Primero, debe comprender qué sucede con el elemento de entrada cuando establece su ancho en 100% y agrega relleno a la izquierda y a la derecha para el texto.
De acuerdo a Estándares CSS(y en en este caso todos los navegadores los admiten), el ancho resultante del elemento de entrada, si no hay bordes ( borde) y márgenes de margen ( margen), será igual a:

ancho = ancho + relleno-izquierda + relleno-derecha

Aquellos. será mayor en la cantidad de márgenes horizontales internos y el elemento resultante sobresaldrá del área asignada para ello.
Para que el ancho final sea igual al 100%, se puede utilizar un sistema de dos contenedores:


Cada contenedor cumple su función:

  1. ancho de entrada– este contenedor especifica el ancho resultante del campo de texto;
  2. fijador de ancho– este contenedor especifica el ancho del elemento de entrada menos el relleno horizontal.
Aquí hay un conjunto de estilos que aclararán esta construcción:

Ancho de entrada (alto:23px; borde:1px sólido #999; fondo:#fff; ) .width-setter (alto:23px; margen:0 9px; ) .width-setter de entrada (ancho:100%; alto:14px ; relleno: 4px 9px; margen: 0; fondo: #9C6;
Ejemplo 1

De los estilos resulta que el elemento. ancho de entrada especifica el ancho que debe ocupar el campo de texto. Elemento fijador de ancho establece el ancho del elemento de entrada para que sea más pequeño en horizontal relleno. Vale la pena señalar que márgenes campos ( margen) debe ser igual relleno-izquierda Y relleno-derecha para el elemento de entrada.
Con esta descripción, el elemento de entrada sobresaldrá de fijador de ancho por la cantidad de sus sangrías horizontales ( relleno), y en IE6 - estirar todos los "padres" a sus propios tamaños (ejemplo 1). Además, en los navegadores IE6-7, el elemento de entrada tiene un relleno que no se puede eliminar borrando la propiedad. margen. Para cambiar esta disposición, debe mover el campo de texto hacia la izquierda, según el tamaño de la sangría izquierda ( relleno-izquierda). Puedes hacer esto usando la posición: relativa, pero en IE6 permanecerá estirada para ajustarse al ancho del texto. campos de entrada recipiente fijador de ancho. Para eliminar el estiramiento, debe asegurarse de que el elemento no pueda influir en el tamaño de su padre, por ejemplo configurándolo posición:absoluta.
Describamos el conjunto original de contenedores de una manera nueva:

Ancho de entrada (alto:23px; borde:1px sólido #999; fondo:#fff; ) .width-setter (alto:23px; margen:0 9px; posición:relativa; ) .width-setter de entrada (ancho:100% ; altura: 14 px; relleno: 4 px 5 px; familia de fuente: Tahoma, sans-serif; altura de línea: 14 px;
Ejemplo 2

Como resultado, al utilizar dichos estilos, se cumplen las tareas planteadas al principio. El campo de texto resultó ser gomoso y se podía hacer clic en cualquier lugar con las sangrías especificadas.
Para establecer un ancho específico para el elemento final, solo necesita especificar la propiedad ancho para contenedor ancho de entrada.

Nota. El método dado para implementar un campo de texto elástico se prueba en Doctype: HTML 4.01, XHTML 1.0 y HTML (HTML 5) - y es compatible con todos los navegadores: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . Si no hay Doctype, no se garantiza la funcionalidad del método en todos los navegadores.

Etiqueta es uno de los elementos versátiles del formulario y le permite crear diferentes elementos interfaz y proporciona interacción con el usuario. Principalmente diseñado para crear campos de texto, varios botones, botones de opción y casillas de verificación. Aunque el elemento no es necesario colocarlo dentro de un contenedor

, que define el formulario, pero si los datos ingresados ​​por el usuario deben enviarse al servidor, donde son procesados ​​por un programa CGI, entonces se requiere FORM. Lo mismo se aplica en el caso del procesamiento de datos utilizando aplicaciones cliente, por ejemplo, scripts en JavaScript.

Parámetro de etiqueta principal , que determina el tipo de elemento - tipo. Le permite configurar los siguientes elementos del formulario: campo de texto (texto), campo de contraseña (contraseña), botón de opción (radio), casilla de verificación (casilla de verificación), campo oculto (oculto), botón (botón), botón para enviar el formulario ( enviar), botón para borrar el formulario (restablecer), un campo para enviar un archivo (archivo) y un botón con una imagen (imagen). Para cada elemento existe su propia lista de parámetros que determinan su apariencia y características.

Sintaxis

Opciones

Descripción de los parámetros de la etiqueta


Parámetro ALINEAR

Determina cómo alinear el campo de imagen en relación con el texto u otros elementos del formulario.

Sintaxis

Argumentos

  • abajo- Alinear el borde inferior de la imagen con el texto circundante.
  • izquierda- Alinea la imagen con el borde izquierdo de la ventana.
  • medio- Alinea el centro de la imagen con la línea base de la línea actual.
  • bien- Alinea la imagen con el borde derecho de la ventana.
  • arriba- El borde superior de la imagen está alineado con el elemento más alto de la línea actual.

El valor predeterminado es inferior. Los navegadores también admiten argumentos. fondo abs, absmedio, base Y parte superior del texto, que no están incluidos en la especificación HTML 4.01.

Parámetro alternativo

Los conjuntos de parámetros alt texto alternativo para un campo con una imagen. Este texto le permite obtener información de texto sobre el dibujo cuando la carga de imágenes está deshabilitada en el navegador. Debido a que las imágenes se cargan después de que el navegador haya recibido información sobre ellas, el texto de reemplazo de la imagen aparece antes. Y a medida que se carga, el texto será reemplazado por una imagen. Los navegadores también muestran texto alternativo como información sobre herramientas cuando pasa el mouse sobre una imagen.

Sintaxis

El valor puede ser cualquier adecuado. cadena de texto. Debe estar entre comillas dobles o simples.

Parámetro FRONTERA

Los navegadores procesan las imágenes agregadas mediante la etiqueta. , similar a las imágenes creadas con la etiqueta . También puedes agregar un marco alrededor de la imagen, cuyo color coincida con el color del texto.

Sintaxis

El valor válido es cualquier número entero positivo en píxeles. El valor predeterminado es 0.

Parámetro COMPROBADO

Este parámetro determina si un elemento del formulario, como una casilla de verificación o un botón de opción, está premarcado. En el caso de utilizar botones de radio, sólo se puede marcar un elemento del grupo; para las casillas de verificación, está permitido marcar al menos todos los elementos.

Sintaxis


Parámetro DESHABILITADO

Bloquea el acceso y modificación de un campo de formulario. En este caso, se muestra en gris y el usuario no puede activarlo. Además, dicho campo no puede enfocarse presionando la tecla Tab, usando el mouse o de otra manera. Sin embargo, el estado de este campo se puede cambiar mediante scripts.

Sintaxis

Parámetro MAXLENGTH

Establece el número máximo de caracteres que puede ingresar el usuario en un campo de texto. Cuando se alcanza este número mientras se escribe, resulta imposible realizar más entradas.

Sintaxis


NOMBRE del parámetro

Define un nombre único para un elemento de formulario. Normalmente, este nombre se utiliza al enviar datos al servidor o para acceder a los datos de campo ingresados ​​a través de scripts.

Sintaxis

El nombre es un conjunto de caracteres, incluidos números y letras. JavaScript distingue entre mayúsculas y minúsculas, por lo que cuando haga referencia a un elemento por su nombre, utilice la misma forma que el parámetro de nombre.

Parámetro de SÓLO LECTURA

cuando etiquetar Se agrega el parámetro de solo lectura, el usuario no puede cambiar el campo de texto, ni siquiera ingresar nuevo texto o modificar uno existente. Además, dicho campo no puede enfocarse presionando la tecla Tab, usando el mouse o de otra manera. Sin embargo, el estado y el contenido del campo se pueden cambiar mediante scripts.

Sintaxis


parámetro TAMAÑO

El ancho del campo de texto, que está determinado por la cantidad de caracteres en una fuente monoespaciada. En otras palabras, el ancho está determinado por el número de letras adyacentes del mismo ancho horizontal. Si el tamaño de fuente se cambia usando estilos, el ancho también cambia en consecuencia.

Sintaxis

El valor válido es cualquier número entero positivo.

parámetro SRC

DIRECCIÓN archivo gráfico, que se mostrará en la página web en el campo de imagen.

Sintaxis

El valor se toma como total o ruta relativa al archivo.

Parámetro TIPO

El parámetro de tipo requerido le dice al navegador qué tipo es el elemento del formulario.

Sintaxis

Argumentos

  • botón- Botón.
  • caja- Banderas. Le permite seleccionar más de una opción de las propuestas.
  • archivo- Campo para ingresar el nombre del archivo que se envía al servidor.
  • oculto- Campo oculto. No se muestra de ninguna manera en la página web.
  • imagen- Campo con una imagen. Al hacer clic en la imagen, los datos del formulario se envían al servidor.
  • contraseña- Un campo de texto normal, pero se diferencia de él en que todos los caracteres se muestran como asteriscos. Diseñado para evitar que alguien espíe la contraseña ingresada.
  • radio- Interruptores. Se utilizan cuando es necesario elegir una opción entre varias ofrecidas.
  • reiniciar- Un botón para devolver los datos del formulario a su valor original.
  • entregar- Un botón para enviar datos del formulario al servidor.
  • texto- Campo de texto. Diseñado para ingresar caracteres usando el teclado.

El valor predeterminado es texto.

parámetro VALOR

Define el valor del elemento del formulario que se enviará al servidor o se recibirá mediante scripts del cliente. Se envía un par “nombre=valor” al servidor, donde el nombre se especifica mediante el parámetro nombre de etiqueta y el valor es el parámetro de valor.

Dependiendo del tipo de elemento, el parámetro de valor desempeña la siguiente función:

  • para los botones (tipo de entrada = "botón | restablecer | enviar") establece una etiqueta de texto en ellos;
  • para campos de texto (tipo de entrada="contraseña | texto") especifica la cadena ingresada anteriormente. El usuario puede borrar texto e ingresar sus propios caracteres, pero cuando se usa en un formulario Botones de reinicio el texto personalizado se borra y se restaura el valor ingresado en el parámetro de valor;
  • para casillas de verificación y botones de opción (tipo de entrada = "casilla de verificación | radio") define de forma única cada elemento para que el cliente o programa de servidor podría determinar claramente qué elemento seleccionó el usuario.

, con una coma (,) utilizada para separar direcciones ), dándoles tamaños arbitrarios. Pero cómo hacer que este elemento sea caucho y cumplir las condiciones:

  1. Posibilidad de establecer sangrías horizontales y verticales para el texto;
  2. El elemento debe ocupar todo el contenedor en el que se coloca;
  3. Al hacer clic con el mouse en cualquier parte del campo de texto, se coloca el cursor en él.

La respuesta es bastante sencilla y se puede resolver mediante el siguiente método:

Primero, debe comprender qué sucede con el elemento de entrada cuando establece su ancho en 100% y agrega relleno a la izquierda y a la derecha para el texto.
Según los estándares CSS (y en este caso todos los navegadores los admiten), el ancho resultante del elemento de entrada, si no hay bordes ( borde) y márgenes de margen ( margen), será igual a:

ancho = ancho + relleno-izquierda + relleno-derecha

Aquellos. será mayor en la cantidad de márgenes horizontales internos y el elemento resultante sobresaldrá del área asignada para ello.
Para que el ancho final sea igual al 100%, se puede utilizar un sistema de dos contenedores:


Cada contenedor cumple su función:

  1. ancho de entrada– este contenedor especifica el ancho resultante del campo de texto;
  2. fijador de ancho– este contenedor especifica el ancho del elemento de entrada menos el relleno horizontal.
Aquí hay un conjunto de estilos que aclararán esta construcción:

Ancho de entrada (alto:23px; borde:1px sólido #999; fondo:#fff; ) .width-setter (alto:23px; margen:0 9px; ) .width-setter de entrada (ancho:100%; alto:14px ; relleno: 4px 9px; margen: 0; fondo: #9C6;
Ejemplo 1

De los estilos resulta que el elemento. ancho de entrada especifica el ancho que debe ocupar el campo de texto. Elemento fijador de ancho establece que el ancho del elemento de entrada sea más pequeño mediante el relleno horizontal. Vale la pena señalar que sus márgenes de margen ( margen) debe ser igual relleno-izquierda Y relleno-derecha para el elemento de entrada.
Con esta descripción, el elemento de entrada sobresaldrá de fijador de ancho por la cantidad de sus sangrías horizontales ( relleno), y en IE6 - estirar todos los "padres" a sus propios tamaños (ejemplo 1). Además, en los navegadores IE6-7, el elemento de entrada tiene un relleno que no se puede eliminar borrando la propiedad. margen. Para cambiar esta disposición, debe mover el campo de texto hacia la izquierda, según el tamaño de la sangría izquierda ( relleno-izquierda). Puede hacer esto usando la posición: relativa, pero en IE6 el contenedor de entrada permanecerá estirado para ajustarse al ancho del campo de texto. fijador de ancho. Para eliminar el estiramiento, debe asegurarse de que el elemento no pueda influir en el tamaño de su padre, por ejemplo configurándolo posición:absoluta.
Describamos el conjunto original de contenedores de una manera nueva:

Ancho de entrada (alto:23px; borde:1px sólido #999; fondo:#fff; ) .width-setter (alto:23px; margen:0 9px; posición:relativa; ) .width-setter de entrada (ancho:100% ; altura: 14 px; relleno: 4 px 5 px; familia de fuente: Tahoma, sans-serif; altura de línea: 14 px;
Ejemplo 2

Como resultado, al utilizar dichos estilos, se cumplen las tareas planteadas al principio. El campo de texto resultó ser gomoso y se podía hacer clic en cualquier lugar con las sangrías especificadas.
Para establecer un ancho específico para el elemento final, solo necesita especificar la propiedad ancho para contenedor ancho de entrada.

Nota. El método dado para implementar un campo de texto elástico se prueba en Doctype: HTML 4.01, XHTML 1.0 y HTML (HTML 5) - y es compatible con todos los navegadores: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . Si no hay Doctype, no se garantiza la funcionalidad del método en todos los navegadores.

Etiqueta (del ingles Algo como "Borrar", "Comenzar de nuevo", "Eliminar entrada", etc. sería bastante claro (y, lo más importante, intuitivo incluso para los tontos de los tontos). En general, es necesario que el usuario no tenga ni la más mínima duda sobre la finalidad de esta clave.- entrada) es uno de los elementos de formulario versátiles y le permite crear diferentes partes de la interfaz y proporcionar interacción al usuario.

Principalmente diseñado para crear campos de texto, varios botones, botones de opción y casillas de verificación.

Atributo principal , que determina el tipo de elemento - tipo . Le permite configurar los siguientes elementos del formulario: campo de texto (texto), campo de contraseña (contraseña), botón de opción (radio), casilla de verificación (casilla de verificación), campo oculto (oculto), botón (botón), botón para enviar el formulario ( enviar), botón para borrar el formulario (restablecer), un campo para enviar un archivo (archivo), un botón con una imagen (imagen), etc. Para cada elemento existe su propia lista de atributos que determinan su apariencia y características. Además, se han agregado más de una docena de atributos nuevos a HTML5.

Sintaxis

No se requiere una etiqueta de cierre.

WAI ARIA

No valores de rol por defecto.

Valores de rol válidos:

  • botón
  • caja
  • cuadro combinado
  • enlace
  • elemento de menú
  • casilla de verificación del elemento del menú
  • menúelementoradio
  • opción
  • radio
  • cuadro de búsqueda
  • control deslizante
  • botón giratorio
  • cambiar
  • cuadro de texto

Atributos

  • aceptar: establece un filtro para los tipos de archivos que puede enviar a través del campo de carga de archivos.
  • alt: texto alternativo para un botón con una imagen.
  • autocompletar: activa o desactiva la función de autocompletar.
  • enfoque automático: establece el foco en un campo de formulario.
  • marcado: un botón de opción o casilla de verificación preactivado.
  • dirname: parámetro que transmite la dirección del texto al servidor.
  • deshabilitado - Bloquea el acceso y modificación del elemento.
  • formulario: asocia un campo con un formulario mediante su identificador.
  • formaction: define la dirección del controlador del formulario.
  • formenctype: establece cómo se codifican los datos del formulario cuando se envían al servidor.
  • formmethod: le indica al navegador qué método utilizar para enviar datos del formulario al servidor.
  • formnovalidate: cancela la validación de datos integrada.
  • formtarget: define la ventana o marco en el que se cargará el resultado devuelto por el controlador de formulario.
  • lista: apunta a una lista de opciones que se pueden seleccionar al ingresar texto.
  • max: valor superior para ingresar un número o fecha.
  • longitud máxima - Cantidad máxima caracteres permitidos en el texto.
  • min: valor más bajo para ingresar un número o fecha.
  • minlength: el número mínimo de caracteres permitidos en el texto.
  • múltiple: le permite descargar varios archivos al mismo tiempo.
  • nombre: el nombre del campo, destinado a que el procesador del formulario pueda identificarlo.
  • patrón: establece el patrón de entrada.
  • marcador de posición: muestra texto de sugerencia.
  • solo lectura: especifica que el usuario no puede modificar el campo.
  • obligatorio: campo obligatorio.
  • tamaño: el ancho del campo de texto.
  • src: dirección del archivo gráfico para el campo de imagen.
  • paso: incrementa el paso para campos numéricos.
  • tipo: le dice al navegador qué tipo es el elemento del formulario.
  • valor: el valor del elemento.

aceptar

Establece un filtro sobre los tipos de archivos que puede cargar a través del campo de carga de archivos. El tipo de archivo se especifica como tipo MIME; para varios valores, se enumeran separados por comas. Si el archivo no coincide filtro instalado, no se muestra en la ventana de selección de archivos.

Se aplica al campo de carga de archivos ( ).

Soporte del navegador

Valor predeterminado

alternativo

El atributo alt establece texto alternativo para el campo de imagen. Este texto le permite obtener información textual sobre una imagen cuando la carga de imágenes está deshabilitada en el navegador y también está destinado a motores de búsqueda.

Sintaxis

Valores

Cualquier cadena de texto adecuada.

Valor predeterminado

autocompletar

Este atributo ayuda a completar los campos del formulario con el texto que se ingresó previamente en ellos. Los valores los guarda y sustituye el navegador, mientras que el usuario puede desactivar la función de autocompletar en la configuración del navegador por razones de seguridad y luego no puede controlarse mediante el atributo de autocompletar.

Cuando ingresas las primeras letras del texto, se muestra una lista de valores previamente guardados, entre los cuales puedes seleccionar el que necesitas.

Autocompletar campo específico El formulario está vinculado a su atributo de nombre y se pierde cuando cambia el valor.

Sintaxis

Valores

  • on: habilita el autocompletado de texto.
  • off: desactiva el autocompletar. Este valor generalmente se usa para evitar que el navegador guarde datos importantes (contraseñas, números tarjetas bancarias), así como datos únicos o raramente ingresados ​​(captcha).

Valor predeterminado

Depende de la configuración del navegador.

enfoque automático

Establece automáticamente el foco en un campo de formulario. En dicho campo, puede escribir texto inmediatamente sin hacer clic explícitamente en él con el cursor del mouse.

Sintaxis

Valores

Valor predeterminado

De forma predeterminada, el atributo de enfoque automático no está configurado.

comprobado

Este atributo determina si un elemento del formulario, como una casilla de verificación o un botón de opción, está premarcado. Cuando se utilizan botones de opción, solo se puede marcar un elemento del grupo; para las casillas de verificación, está permitido marcar al menos todos los elementos.

Sintaxis

Valores

Valor predeterminado

nombre de dirección

Si el atributo dirname está presente, se envía un par nombre/valor al servidor, donde el nombre se especifica mediante el atributo dirname y el navegador sustituye el valor. Para el texto que va de izquierda a derecha, el valor será ltr y para el texto que va de derecha a izquierda (hebreo, por ejemplo), el valor será rtl.

Sintaxis

Valores

Una cadena de texto arbitraria que sirve como nombre del parámetro. Para indicar que este parámetro especifica la dirección del texto, es común agregar .dir al final de la línea.

Valor predeterminado

desactivado

Bloquea el acceso y modificación de un campo de formulario. En este caso, se muestra en gris y el usuario no puede activarlo. Además, dicho campo no puede enfocarse presionando la tecla Tab, usando el mouse o de otra manera. Sin embargo, el estado de este campo se puede cambiar mediante scripts. Un valor bloqueado en un campo no se envía al servidor.

Sintaxis

Valores

Valor predeterminado

De forma predeterminada, este atributo está deshabilitado.

forma

Asocia un campo a un formulario por su identificador. Esta conexión es necesaria cuando el campo se encuentra en el exterior.

, por ejemplo, al crearlo mediante programación o por motivos de diseño.

Sintaxis

...

Valores

ID del formulario (el valor del atributo id del elemento

).

Valor predeterminado

formación

Define la dirección del controlador del formulario: este es un programa que recibe datos del formulario y realiza las acciones deseadas con ellos. El atributo de formación es similar en efecto a atributo de acción elemento .

Sintaxis

Valores

tipo de formulario

Establece cómo se codifican los datos del formulario cuando se envían al servidor. Normalmente se especifica explícitamente cuando el campo se utiliza para enviar un archivo (tipo de entrada="archivo"). Este atributo tiene un efecto similar al atributo enctype de un elemento. , en intercambio formenctype y enctype este último se ignora.

Sintaxis

Valores

  • application/x-www-form-urlencoded: en lugar de espacios, coloque +, los símbolos como las letras rusas están codificados por ellos valores hexadecimales(por ejemplo, %D0%9F%D0%B5%D1%82%D1%8F en lugar de Petya).
  • multipart/form-data: los datos no están codificados. Este valor se utiliza al enviar archivos.
  • texto/sin formato: los espacios se reemplazan con un signo +, las letras y otros caracteres no están codificados.

Valor predeterminado

aplicación/x-www-formulario-urlencoded

método de forma

El atributo le dice al navegador qué método utilizar para enviar datos del formulario al servidor.

Sintaxis

Valores

Hay dos métodos: GET y POST, que se especifican palabras clave obtener y publicar.

  • get: este método está diseñado para pasar datos del formulario directamente a barra de direcciones como pares nombre=valor que se agregan a la dirección de la página después signo de interrogación y están separados por un signo comercial (y símbolo). dirección completa por ejemplo será http://site.ru/doc/?name=Vasya&password=pup. El volumen de datos del método está limitado a 4 KB.
  • post: envía datos al servidor en una solicitud del navegador, la cantidad de datos enviados está limitada únicamente por la configuración del servidor.

Valor predeterminado

formularionovalidar

Anula la validación integrada de los datos ingresados ​​por el usuario en el formulario antes de enviarlo. Esta verificación la realiza automáticamente el navegador para los campos. , , así como si el elemento tiene un patrón o atributo requerido .

Sintaxis

Valores

Valor predeterminado

De forma predeterminada, este atributo está deshabilitado.

objetivo de formulario

Define el nombre del marco en el que se cargará el resultado devuelto por el controlador de formulario como documento HTML.

Sintaxis

Valores

El valor es el nombre del marco, especificado por atributo nombre. Si se establece un nombre inexistente, se abrirá una nueva pestaña. Los siguientes nombres se pueden especificar como nombres reservados.

  • _blank: carga la página en nueva pestaña navegador.
  • _self: carga la página en la pestaña actual.
  • _parent: carga la página en el marco principal; si no hay marcos, entonces este valor funciona como _self.
  • _top: cancela todos los marcos y carga la página en la ventana completa del navegador; si no hay marcos, entonces este valor funciona como _self.

Valor predeterminado

lista

Apunta a una lista de opciones creadas por un elemento. , que puede seleccionar mientras escribe. Esta lista está inicialmente oculta y pasa a estar disponible cuando el campo recibe el foco.

Sintaxis

Valores

Nombre de identificación del artículo .

Valor predeterminado

máximo

Establece el valor superior para ingresar un número o fecha en un campo de formulario.

Sintaxis

Valores

Valor predeterminado

longitud máxima

Establece el número máximo de caracteres que puede ingresar el usuario en un campo de texto. Cuando se alcanza este número mientras se escribe, resulta imposible realizar más entradas.

Sintaxis

Valores

Valor predeterminado

La entrada de caracteres no está limitada.

mín.

Establece el valor más bajo para ingresar un número o fecha en un campo de formulario.

Sintaxis

Valores

Entero positivo o número negativo(para tipo="número", tipo="rango").

Fecha en formato AAAA-MM-DD (por ejemplo: 2012-12-22) para tipo="fecha" .

Valor predeterminado

longitud mínima

Especifica el número mínimo de caracteres que puede ingresar el usuario en un campo de texto. Si el número de caracteres es menor valor especificado, entonces el navegador muestra un mensaje de error y no envía el formulario.

Sintaxis

Valores

Cualquier número entero positivo.

Valor predeterminado

múltiple

El atributo múltiple le permite especificar varios archivos simultáneamente en el campo de carga de archivos, así como varias direcciones correo electrónico. Cuando se utilizan dos o más direcciones postales deben estar separados por comas.

Sintaxis

Valores

Valor predeterminado

De forma predeterminada, el atributo múltiple está deshabilitado.

nombre

Define un nombre único para un elemento de formulario. Normalmente, este nombre se utiliza al enviar datos al servidor o para acceder a los datos de campo ingresados ​​a través de scripts.

Sintaxis

Valores

El nombre es un conjunto de caracteres, incluidos números y letras. JavaScript distingue entre mayúsculas y minúsculas, por lo que cuando haga referencia a un elemento por su nombre, utilice la misma forma de ortografía que el atributo de nombre.

Valor predeterminado

patrón

Especifica una expresión regular que requiere que se ingresen y validen datos en un campo de formulario. Si el atributo de patrón está presente, el formulario no se enviará hasta que el campo se complete correctamente.

Soporte del navegador

¿Puedo utilizar el patrón de entrada? Datos sobre la compatibilidad con la función de patrón de entrada en los principales navegadores de caniuse.com.

Sintaxis

Valores

Algunos típicos expresiones regulares se enumeran en la tabla. 1.

Mesa 1. Expresiones regulares
Expresión Descripción
d Un dígito del 0 al 9.
D[^0-9] Cualquier carácter que no sea un número.
s Espacio.
Sólo capital letra latina.
En cualquier caso, sólo letras latinas.
[A-Yaa-yaYoyo] En cualquier caso, sólo letras rusas.
Cualquier letra del alfabeto ruso y latino.
{3} Tres números.
{6,} Al menos seis letras latinas.
{,3} No más de tres dígitos.
{5,10} De cinco a diez dígitos.
^+$ Cualquier palabra en latín.
^[А-Яа-яЁеоs]+$ Cualquier palabra en ruso incluidos los espacios.
^[ 0-9]+$ Cualquier número.
{6} Código Postal.
d+(,d(2))? Número en formato 1.34 (delimitado por comas).
d+(.d(2))? Número en formato 2.10 (delimitador de puntos).
d(1,3).d(1,3).d(1,3).d(1,3) dirección IP

marcador de posición

Muestra texto dentro de un campo de formulario que desaparece al recibir el foco o al escribir. Normalmente se muestra en gris.

Soporte del navegador

¿Puedo utilizar un marcador de posición de entrada? Datos sobre la compatibilidad con la función de marcador de posición de entrada en los principales navegadores de caniuse.com.

Sintaxis

Valores

Cadena de texto. Si se espera un espacio dentro de una cadena, debe estar entre comillas dobles o simples.

Valor predeterminado

sólo lectura

cuando elemento Se agrega el atributo de solo lectura, el usuario no puede cambiar el campo de texto, ni siquiera ingresar texto nuevo o modificar uno existente. Sin embargo, el estado y el contenido del campo se pueden cambiar mediante scripts y los datos se envían al servidor.

Sintaxis

Valores

Valor predeterminado

De forma predeterminada, este atributo está deshabilitado.

requerido

Establece un campo de formulario que será obligatorio antes de enviar el formulario al servidor. Si un campo obligatorio está vacío, el navegador mostrará un mensaje de error y no se enviará el formulario. La apariencia y el contenido del mensaje dependen del navegador y el usuario no puede modificarlos.

Sintaxis

Valores

Valor predeterminado

Por defecto atributo requerido apagado.

tamaño

El ancho del campo de texto, que está determinado por la cantidad de caracteres en una fuente monoespaciada. En otras palabras, el ancho está determinado por el número de letras adyacentes del mismo ancho horizontal. Si el tamaño de fuente se cambia usando estilos, el ancho también cambia en consecuencia.

Sintaxis

Valores

Cualquier número entero positivo.

Valor predeterminado

src

La dirección del archivo gráfico que se mostrará en la página web en el campo de imagen. Los archivos más populares en formato PNG y JPEG.

Sintaxis

Valores

El valor es la ruta completa o relativa al archivo.

Valor predeterminado

paso

Establece el paso de cambio de número para controles deslizantes y campos de entrada de números.

Sintaxis

Valores

Cualquier número entero o fraccionario.

Valor predeterminado

tipo

Le dice al navegador de qué tipo es el elemento del formulario.

Soporte del navegador

correo electrónico, tel, url:

¿Puedo utilizar input-email-tel-url? Datos sobre la compatibilidad con la función input-email-tel-url en los principales navegadores de caniuse.com.

¿Puedo usar color de entrada? Datos sobre la compatibilidad con la función de color de entrada en los principales navegadores de caniuse.com.

¿Puedo utilizar el rango de entrada? Datos sobre la compatibilidad con la función de rango de entrada en los principales navegadores de caniuse.com.

¿Puedo utilizar el número de entrada? Datos sobre la compatibilidad con la función de número de entrada en los principales navegadores de caniuse.com.

¿Puedo utilizar la búsqueda de entrada? Datos sobre la compatibilidad con la función de búsqueda de entrada en los principales navegadores de caniuse.com.

fecha, hora, fechahora:

¿Puedo utilizar input-datetime? Datos sobre la compatibilidad con la función input-datetime en los principales navegadores de caniuse.com.

Sintaxis

Valores

Valores de tipo:

  • botón - Botón.
  • casilla de verificación: casillas de verificación. Le permite seleccionar más de una opción de las propuestas.
  • archivo: campo para ingresar el nombre del archivo que se envía al servidor.
  • oculto: campo oculto. No se muestra de ninguna manera en la página web.
  • image - Campo con una imagen. Al hacer clic en la imagen, los datos del formulario se envían al servidor.
  • contraseña: un campo de texto normal, pero se diferencia de él en que todos los caracteres se muestran como asteriscos. Diseñado para evitar que alguien espíe la contraseña ingresada.
  • radio - Interruptores. Se utilizan cuando es necesario elegir una opción entre varias ofrecidas.
  • restablecer: botón para devolver los datos del formulario a su valor original.
  • enviar: botón para enviar datos del formulario al servidor.
  • texto: campo de texto. Diseñado para ingresar caracteres usando el teclado.

Nuevos valores agregados a HTML5:

  • color: widget para elegir un color.
  • fecha: campo para seleccionar una fecha del calendario.
  • datetime: especifica la fecha y la hora.
  • datetime-local: especifica la fecha y hora locales.
  • correo electrónico: para direcciones de correo electrónico.
  • número: ingrese números.
  • rango: control deslizante para seleccionar números en el rango especificado.
  • buscar: campo de búsqueda.
  • tel: para números de teléfono.
  • tiempo - Por tiempo.
  • URL: para direcciones web.
  • mes: seleccione el mes.
  • semana: seleccione la semana.

Valor predeterminado

valor

Define el valor del elemento del formulario que se enviará al servidor o se recibirá mediante scripts del cliente. Se envía un par “nombre=valor” al servidor, donde se especifica el nombre atributo de nombre elemento y el valor por el atributo de valor.

Dependiendo del tipo de elemento, el atributo de valor desempeña el siguiente papel:

  • para los botones (tipo de entrada = "botón | restablecer | enviar") establece una etiqueta de texto en ellos;
  • para campos de texto (tipo de entrada="contraseña | texto") especifica la cadena ingresada anteriormente. El usuario puede borrar el texto e ingresar sus propios caracteres, pero cuando se usa en el botón Restablecer del formulario, el texto del usuario se borra y se restaura el valor ingresado en el atributo de valor;
  • para casillas de verificación y botones de opción (tipo de entrada = "casilla de verificación | radio") define de forma única cada elemento para que un programa cliente o servidor pueda determinar claramente qué elemento seleccionó el usuario.
  • para un campo de archivo (tipo de entrada = "archivo") no tiene ningún efecto.

Sintaxis

Valores

Cualquier cadena de texto.

Valor predeterminado

Valores de rol ARIA

  • - rol=botón
  • - rol=casilla de verificación
  • - rol=cuadro de texto
  • - rol=botón
  • - rol=botón giratorio
  • - rol=radio
  • - rol=control deslizante
  • - rol=botón
  • - rol=cuadro de búsqueda
  • - rol=botón
  • - rol=cuadro de texto
  • - rol=cuadro de texto
  • - rol=cuadro combinado
  • - rol=cuadro de texto



Arriba