Codificación aprenderaprogramar.com: CU00722B
INGRESO DE DATOS EN FORMULARIOS
Los controles de entrada de datos en formularios suelen ser controles visuales y permiten la introducción de datos o selección de opciones al usuario. Su uso depende del tipo de control y también del tipo de información que pueden obtener.
Los elementos de entrada de un formulario pueden ser definidos mediante el uso de estos elementos:
- El elemento HTML input.
- El elemento HTML textarea.
- El elemento HTML select.
- Otros elementos HTML.
ELEMENTOS DE ENTRADA DE TEXTO
- Entrada de línea
Mediante este control podemos obtener información textual en una sola línea, lo que significa que el usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea (en la mayoría de los formularios, la tecla "enter" presionada en uno de estos campos, envía el formulario que lo contiene como si pulsáramos sobre el botón submit de envío del formulario.).
Este control es insertado en documentos HTML usando la etiqueta HTML input con el valor "text" en su atributo "type". El valor inicial, mostrado cuando la página se carga, puede ser definido usando el atributo "value". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="post" action="action.php"> Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aquí" /> </form> </body> </html> |
- Entradas de password
Este control es igual que el de entrada de línea, es decir, usamos la etiqueta input, pero en este caso escribiremos type = "password". Cuando el usuario escriba sobre este control, los caracteres ingresados quedan "escondidos" mostrándose como puntos o asteriscos para evitar que los usuarios (más bien alguien que pase por detrás) vean su contenido.
Como hemos indicado habrá que indicar el valor "password" en el atributo "type", y su valor inicial puede ser definido usando el atributo "value". Es comúnmente usado para el ingreso de contraseñas. Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="post" action="action.php"> Ingresa tu contraseña: <input name="contrasena" type="password" value="123456" /> </form> </body> </html> |
- Entrada de multi-línea
Con este control los usuarios podrán introducir texto en una o más líneas. Se inserta utilizando la etiqueta HTML textarea y puede ser usado para escribir comentarios, mensajes, etc. que ocupen varias líneas. Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="post" action="action.php"> Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea>
</form> </body> </html> |
En la próxima entrega seguiremos viendo más controles para formularios.
EJERCICIO
Crea una página web que contenga un formulario de registro de usuarios que cumpla estas condiciones:
Como título principal de la página debe figurar con etiquetas h1 el texto “Solicitud de alta como usuario”. Debe contener un campo entrada de línea para solicitar el nombre. Debe contener un campo entrada de línea para solicitar los apellidos. Debe contener un campo entrada de línea para solicitar el correo electrónico. Debe contener un campo entrada de línea y tipo password para solicitar la contraseña. Debe contener un campo multilínea para solicitar observaciones. El formulario se debe enviar por el método get a la dirección de destino http://aprenderaprogramar.com
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
