Temario del Tutorial->29 - FORM (placeholder)


Normalmente cuando creamos un formulario previo a cada control disponemos un mensaje indicando que dato debe cargar el usuario en el mismo, en algunas circunstancias dicha información puede quedar no lo suficientemente clara. Mediante la propiedad placeholder podemos disponer más información directamente dentro del control generalmente con un ejemplo de dato a ingresar. El contenido del control HTML inicial se borra inmediatamente luego que el operador ingresa un caracter.

Es importante tener en cuenta que debemos utilizar la propiedad placeholder si la información que disponemos en ella despeja de dudas al operador.

Problema

Confeccionar un formulario que solicite la carga de la patente de un automóvil, tener en cuenta que toda patente esta formada por dos letras, tres números y finalmente dos letras:

Solución

<!DOCTYPE HTML>
<html>
<head>
  <title>Título de la página</title>  
  <meta charset="UTF-8">
</head>
<body>
  <form action="#">
      Patente:
      <input type="text" id="patente" placeholder="AB123CD">
      <br>
      <input type="submit" value="Confirmar">
  </form>
</body>
</html>

Como vemos al control que deseamos agregar esta marca de agua (o mensaje inicial) inicializamos la propiedad placeholder:

      <input type="text" id="patente" placeholder="AB123CD">

Luego en el navegador podemos observar la marca de agua:

placeholder

Retornar