HTML5 DOM Entrada Texto Propiedad Value Value

A menudo, necesitamos averiguar el valor predeterminado del campo de texto. Para hacerlo, se utiliza la propiedad de valor predeterminado. La propiedad de DefaultValue especifica o devuelve el valor predeterminado del campo de texto. En HTML, el valor predeterminado se especifica como el "valor" atributo.

Esta publicación demostrará:

• ¿Cuál es la diferencia entre las propiedades de valor predeterminado y de valor??
• Cómo mostrar el valor predeterminado del elemento de entrada?
• Cómo mostrar el valor actual del campo de entrada?

¿Cuál es la diferencia entre las propiedades de valor predeterminado y de valor??

El "valor" y "valor por defectoLas propiedades son diferentes de tal manera que la propiedad de valor predeterminado contiene el valor predeterminado del campo de entrada. En contraste, la propiedad de valor contiene el valor actual después de los cambios.

Cómo mostrar el valor predeterminado del elemento de entrada en HTML?

Para mostrar el valor predeterminado del elemento de entrada, el "valor por defecto"La propiedad se usa en JavaScript. Vamos a ver su trabajo con la ayuda de un ejemplo.

Ejemplo:
Primero, cree un elemento Div con el nombre de la clase "contenido"En el archivo HTML. Agregue otro Div con el nombre de la clase "subcontente"Dentro de este elemento. Luego, incluya un título en el campo de texto y agregue un elemento asociado con el atributo "para"Tener el valor"nombre". Dentro de este elemento de etiqueta, coloque el elemento de entrada con atributos:

• tipo: Especifica el tipo de campo de entrada, como texto, casilla de verificación, radio o más.
• identificación: Especifica la ID única utilizada en CSS o JavaScript para la manipulación.
• valor: Especifica un valor y lo asocia con la ID del campo de entrada

Luego añade

elemento para agregar contenido a la página web. Después de eso, especifique un elemento de botón con los atributos "tipo"Con el valor"entregar" y "al hacer clic"Atributo con el valor"Showvalue ()". Esta función se definirá en JavaScript. Por último, para ver el valor predeterminado, especifique un

elemento diseñado como un elemento en línea de bloque. El elemento de la span con la identificación "d_val"Mostrará el valor predeterminado:

Nombre:

Haga clic aquí para ver los valores

Hacer clic

El valor predeterminado:

Ahora, dirígete a la sección JavaScript donde se definirá una función que contiene el "valor por defecto" propiedad.

Javascript

El nombre de la función "Showvalue ()"Es seguido por la palabra clave"función". Dentro de esta función, escribiremos un bloque de código para especificar la tarea:

• VAR InputDefault: Crear una variable "InputDefault"Usando la palabra clave"varilla".
• documento.GetElementById ("Nombre").valor por defecto: Asigne el valor predeterminado del campo de entrada utilizando el "valor por defecto"Propiedad a la variable creada anteriormente.
• Para incrustar el valor de la variable en el elemento HTML SPAN con el ID d_value, incluya el código "documento.getElementById ("D_Value").innerhtml". Luego, asigne el valor variable.

La siguiente sección dada demostrará el estilo CSS.

Elementos de estilo "todos" de estilo

*
margen: 0;
relleno: 0;
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

Para diseñar todos los elementos HTML, aplique estas propiedades:

• "margen"La propiedad agrega espacio alrededor del elemento.
• "relleno"La propiedad agrega espacio alrededor del contenido del elemento o dentro del borde.
• "Familia tipográfica"La propiedad se establece con los valores"Verdana, Ginebra, Tahoma, Sans-Serif". Esta lista se proporciona para garantizar que si el navegador no admite el primer valor, se aplicará otra fuente.

Estilo "Contenido" Div

.contenido
borde: 1px sólido #f8c4c4;
Ancho: 400px;
relleno: 20px;
Margen: 40px Auto;
Border-Radius: 12px;
Color de fondo: Antiquewhite;

El elemento div con la clase "contenido"Se aplica con estas propiedades CSS:

• "bordeSe utiliza la propiedad para aplicar un borde alrededor del elemento con el ancho de la frontera, el estilo de borde y el color.
• "ancho"La propiedad establece el ancho del elemento.
• "radio fronterizo"La propiedad hará que los bordes del elemento reduzcan.
• "color de fondo"La propiedad especifica el color de fondo del elemento.

Estilo "Subcontent" Div

.subcontente
Ancho: 500px;
Altura: 150px;

Elemento de "entrada" de estilo

.entrada subcontente
relleno: 3px;
Border-Radius: 5px;
tamaño de fuente: 16px;

El campo de entrada tiene el estilo de estas propiedades:

• "tamaño de fuenteLa propiedad se utiliza para la configuración del tamaño de fuente del elemento.

Elemento de estilo "botón"

botón
Color de fondo: marrón;
relleno: 8px 20px;
Color: #ffffff;
borde: 1px sólido #ffd5d5;
Border-Radius: 6px;
tamaño de fuente: 14px;
margen: 5px 100px;
Shadow de caja: 1px 1px 2px 1px gris;

El elemento del botón tiene las siguientes propiedades de CSS:

• "color"La propiedad establece el color de texto del elemento.
• "sombra de la cajaLa propiedad es una propiedad abreviada para agregar una sombra alrededor del elemento. Especifica el despido X, la compensación y, el radio de desenfoque, el radio de propagación y el color de la sombra.

Estilizar el "botón" en el flotador

Botón: Hover
transformar: traducido (2px);
cursor: puntero;

Al pasar el ronco, los elementos del botón están diseñados con estas propiedades:

• "transformarSe utiliza la propiedad para la transformación del elemento. El valor "Traducido (2px)"Reubica el botón en el eje Y.
• "cursor"Propiedad con el valor"puntero"Cambia el cursor del mouse a una mano con un dedo puntiagudo.

Se puede observar que el valor de entrada ingresado en el campo es "John", Mientras que el valor predeterminado es"Margarita":

Cómo mostrar el valor actual del campo de entrada?

Para mostrar el valor actual/presente del campo de entrada, primero, vaya al archivo HTML. Añade el

elemento asociado con el atributo de estilo que tiene el "mostrar"Propiedad con el valor"bloque de entrada". Luego, agregue un elemento SPAN especificado con el "Val" identificación:

El valor actual:

Después de eso, agregue el siguiente código en JavaScript:

var inputCurrent = documento.GetElementById ("Nombre").valor;
documento.GetElementById ("Val").innerhtml = inputCurrent;

• Primero, cree una variable "corriente de entrada"Con la palabra clave"varilla".
• Para almacenar el valor existente del campo de entrada en la variable, especifique "documento.GetElementById ("Nombre").valor". Aquí la propiedad del valor contiene el valor actual del campo.
• Para incrustar el valor en el elemento de la tramo que tiene ID "Val"En HTML, especifique la función"documento.getElementById ("Val").innerhtml". Luego, asigne el valor del "corriente de entrada"Variable para él.

Como puede ver, el primer elemento muestra el valor predeterminado, mientras que el segundo

El elemento muestra el valor actual:

Eso se trataba del valor de campos de entrada predeterminado y actual.

Conclusión

El "valor por defecto"La propiedad contiene el valor predeterminado del campo de entrada. Esta propiedad se utiliza para establecer o devolver el valor predeterminado del campo de entrada. En HTML, el "valorLa propiedad establece un nuevo valor que se ingresa en el campo. Este blog ha explicado el texto de entrada HTML5 DOM, Value y la propiedad de valor con los ejemplos apropiados.