Resumen: Entrega nº22 del Tutorial básico del programador web: HTML desde cero.
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 acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Descargar archivo: