En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.
Formulario - text/password y maxlength
Los controles de tipo text y password pueden limitar la cantidad de caracteres que puede ingresar el usuario a partir de la propiedad maxlength.
Debemos asignarle un valor entero que indica hasta cuantos caracteres está permitido ingresar.
No hay que confundir el objetivo de la propiedad size con maxlength. Con la propiedad size solo indicamos la cantidad máxima de caracteres a mostrar dentro del control antes de hacer scroll de los datos.
Confeccionaremos un formulario que solicite el nombre de usuario y su clave y solo permitiremos ingresar nombres de usuarios de hasta 20 caracteres y claves de hasta 12.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" maxlength="20"
size="20">
<br>
Ingrese su clave:
<input type="password" name="clave" maxlength="12"
size="12">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Cuando ejecute esta página no podremos cargar un nombre de usuario de más de 20 caracteres, el teclado se inhabilita cuando se han ingresado 20 caracteres en el primer control.
Formulario - text/password/textarea y readonly.
Otra propiedad que podemos asignarle a los controles que creamos con el elemento input y también el elemento textarea es readonly.
Si definimos la propiedad readonly a un control el mismo es de solo lectura y no podemos modificar su contenido. Esta propiedad tiene uso cuando mediante un lenguaje de script (generalmente javascript) modificamos el control cambiandolo de estado ante ciertos eventos.
Cuando un control tiene la propiedad readonly el control toma foco pero no se puede cambiar su contenido. La diferencia con la propiedad disabled es que con esta no toma foco el control y generalmente aparece con un color que indica que el control está deshabilitado.
Confeccionemos un formulario que aparezca el nombre de una empresa en un text y el texto de un contrato en un textarea, ambos de solo lectura.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/htmlya/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30" value="Interpolacion"
readonly><br>
Contrato:<br>
<textarea name="comentarios" rows="5" cols="60" readonly>
Por la presente ..............................
</textarea>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Formulario - Envío de datos mediante mail.
Hasta ahora siempre configuramos la propiedad action de la marca <form> con el nombre de un archivo que procesa los datos en el servidor:
<form action="/registrardatos.php" method="post">
Para poder resolver esto debemos conocer el lenguaje PHP o algún otro lenguaje de servidor.
Conociendo solo HTML la solución es enviar los datos mediante el programa cliente de mail que esté configurado en la computadora. Para esto inicializamos la propiedad action de la siguiente forma:
<form action="mailto:pizzasya@htmlya.com" method="post"
enctype="text/plain">
Es decir inicializamos la propiedad action con el texto mailto seguido de dos puntos y la dirección de mail a la que queremos enviar los datos del formulario, recordemos siempre que utilizamos mailto el emisor del mail depende como esté configurado nuestro software de mail en nuestra computadora.
Además inicializamos la propiedad enctype con el valor "text/plain" con lo que le indicamos que se trata de un archivo de texto plano. Tengamos en cuenta que no podemos enviar archivos adjuntos.
Para probar esta funcionalidad confeccionaremos una página que permita hacer un reclamo de reparaciones y se envíen los datos a una dirección de correo.
Se debe poder ingresar el nombre, dirección y un comentario del problema.
La página HTML es:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<h2>Reclamos</h2>
<form action="mailto:reclamos@gmail.com" method="post"
enctype="text/plain">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
Ingrese su dirección:
<input type="text" name="dirección" size="30">
<br>
Informe del problema:
<br>
<textarea rows="5" cols="40" name="problema"></textarea>
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Debe llegar a la casilla de correos reclamos@gmail.com un mail con el contenido de los datos cargados en el formulario. El mail contiene el nombre del control y el contenido ingresado por el operador.
Si queremos que el correo llegue con un título debemos inicializar subject:
<form action="mailto:reclamos@gmail.com?subject=pedido de reparación"
method="post" enctype="text/plain">
Con esto logramos ubicar perfectamente todos los mail que llegan a nuestra casilla de correos reclamos@gmail.com
La desventaja del envío de datos mediante mail es que la persona no puede hacer el envío del formulario desde una máquina ubicada en un ciberbar donde muy posiblemente no nos dejen configurar un cliente de mail.
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
DJL
Angry Birds
Entradas
