Documentos de Académico
Documentos de Profesional
Documentos de Cultura
APRENDERAPROGRAMAR.COM
Seccin: Cursos
Categora: Tutorial bsico del programador web: HTML desde cero
Fecha revisin: 2029
Resumen: Entrega n22 del Tutorial bsico HTML desde cero.
aprenderaprogramar.com, 2006-2029
Los elementos de entrada de un formulario pueden ser definidos mediante el uso de estos elementos:
HTML input, HTML textarea, HTML select y otros elementos HTML.
Entrada de lnea
Mediante este control podemos obtener informacin textual en una sola lnea, lo que significa que el
usuario no podr utilizar la tecla "enter" para ir a la siguiente lnea (en la mayora de los formularios, la
tecla "enter" presionada en uno de estos campos, enva el formulario que lo contiene como si
pulsramos sobre el botn submit de envo 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 pgina se carga, puede ser definido usando el
atributo "value". Escribe este cdigo en un editor de textos, gurdalo como archivo con extensin HTML
y comprueba los resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
aprenderaprogramar.com, 2006-2029
Entradas de password
Este control es igual que el de entrada de lnea, 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" mostrndose como puntos o asteriscos para evitar que los usuarios (ms bien
alguien que pase por detrs) 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 comnmente usado para el ingreso de contraseas.
Escribe este cdigo en un editor de textos, gurdalo como archivo con extensin HTML y comprueba los
resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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
contrasea:
<input
name="contrasena"
type="password"
value="123456" />
</form>
</body>
</html>
Entrada de multi-lnea
Con este control los usuarios podrn introducir texto en una o ms lneas. Se inserta utilizando la
etiqueta HTML textarea y puede ser usado para escribir comentarios, mensajes, etc. que ocupen varias
lneas. Escribe este cdigo en un editor de textos, gurdalo como archivo con extensin HTML y
comprueba los resultados que se obtienen.
aprenderaprogramar.com, 2006-2029
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
EJERCICIO
Crea una pgina web que contenga un formulario de registro de usuarios que cumpla estas condiciones:
Como ttulo principal de la pgina debe figurar con etiquetas h1 el texto Solicitud de alta como
usuario. Debe contener un campo entrada de lnea para solicitar el nombre. Debe contener un campo
entrada de lnea para solicitar los apellidos. Debe contener un campo entrada de lnea para solicitar el
correo electrnico. Debe contener un campo entrada de lnea y tipo password para solicitar la
contrasea. Debe contener un campo multilnea para solicitar observaciones. El formulario se debe
enviar por el mtodo get a la direccin de destino http://aprenderaprogramar.com
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros