Marcador de posición frente a atributos de valor en HTML

Atributo de marcador de posición: el atributo de marcador de posición especifica una sugerencia breve que describe el valor esperado de un campo de entrada/área de texto. La sugerencia breve se revela en el campo antes de que el usuario ingrese un valor. Es solo una sugerencia temporal y no tiene nada que ver con ejecuciones lógicas en el backend.

Sintaxis:

<input placeholder = "text"> 
<textarea placeholder = "text"> </textarea>

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Input Placeholder</title>
</head>
  
<body>
    <form>
        <label for="Name">Name:</label>
        <input name="Name" placeholder="Enter your name" />
        <br><br>
          
        <label for="Age">Your age:</label>
        <input name="Age" placeholder="Enter your age" />
        <br><br>
          
        <button type="button">Submit</button>
    </form>
</body>
  
</html>

Producción:

Atributo de valor: el atributo de valor se utiliza para establecer el valor predeterminado en los elementos <input>. Representa el valor relacionado con la entrada y el contenido del conjunto de valores se envía al servidor al enviar el formulario. Si no se inserta ninguno de los valores manuales, se pasará el valor predeterminado en el envío.

Sintaxis:

<input value = "text">

Uso de atributos de valor:

1. Definición de texto en los botones: para los tipos de etiquetas de entrada «botón», «restablecer» y «enviar», el texto proporcionado en el botón parece ser el texto en el botón.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <form>
        <label for="Name">Name:</label>
        <input name="Name" value="Your name" />
        <br><br>
          
        <label for="Age">Your age:</label>
        <input name="Age" value="18" />
        <br><br>
          
        <input type="button" value="Submit" />
    </form>
</body>
  
</html>

Producción:

2. Definición de valores predeterminados: para los tipos de etiqueta de entrada «texto», «contraseña» y «oculto», el texto se proporciona como valor predeterminado. Si no se proporciona un texto manual, el valor predeterminado se tendrá en cuenta durante el envío.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <form>
        <label for="Name">Name:</label>
        <input name="Name" type="text" 
            value="Your name" /><br><br>
  
        <label for="Password">Enter password:</label>
        <input name="Password" type="password" 
            value="12345" /><br><br>
              
        <input type="button" value="Submit" />
    </form>
</body>
  
</html>

Producción:

Diferencia entre marcador de posición y atributos de valor:

Atributo de marcador de posición

Atributo de valor

El atributo de marcador de posición especifica una sugerencia breve que describe el valor esperado (tipo de valor) de un campo de entrada. El atributo de valor especifica el valor predeterminado de un campo de entrada. Si no se especifica ningún valor, se tomará uno predeterminado durante el envío del formulario. 
La sugerencia breve se revela en el campo antes de que el usuario ingrese un valor. Debe borrar el valor y luego agregar el nuevo valor.
Es solo una sugerencia temporal y no tiene nada que ver con ejecuciones lógicas en el backend. Es el valor predeterminado y tiene mucho que ver con las ejecuciones lógicas en el backend. Esto significa que, cuando no se especifica el valor, se tomará el valor predeterminado durante el envío del formulario. 
Si no se inserta ninguno de los valores manuales, se pasará un valor vacío en el envío. Si no se inserta ninguno de los valores manuales, se pasará el valor predeterminado en el envío.
El valor real del marcador de posición está vacío. Una vez que el usuario ingresa algo, el marcador de posición ya no es necesario. Entonces, si completa previamente el valor a través del atributo HTML y luego envía el formulario, ese es el valor que se envía de vuelta a su servidor.

Publicación traducida automáticamente

Artículo escrito por akshara_a y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *