martes, 14 de mayo de 2013

PRACTICA 20 y 21


SERVIDORES


Uno de los mejores servidores gratuitos. Te ofrece de forma absolutamente instantánea 30 MB de espacio SIN NINGÚN TIPO DE PUBLICIDAD en tus páginas. Aunque está en inglés esto no debe suponer ningún problema porque puedes acceder a sus servicios muy fácilmente rellenando un simple formulario de registro. Por si todo esto te parece poco te ofrecen soporte para ASP 3.0 y para publicar bases de datos de Microsoft Access entre otros servicios gratis. Después de rellenar el formulario se te enviará un password para activar tu sitio web y al instante ya lo podrás utilizar, en todo este proceso tardarás menos de 5 minutos, por lo que es la opción más suculenta vista hasta ahora. Tu dirección será del tipo http://www25.brinkster.com/tuweb.
Geocities tiene cientos de complementos para enriquecer vuestra web. Podéis añadir contadores de visitas, consultar todo tipo de estadísticas sobre la gente que os visita, obtener servidores de noticias, de tiempo, de horóscopo, insertar todo tipo de imágenes, intercambiar banners, etc. La publicidad es poca (una pequeña ventana que se sitúa en la parte superior derecha y que se puede cerrar cuando queramos o un banner en la parte superior, según nuestra elección ). Tiene un sistema de ayuda excepcional, aunque está prácticamente todo en inglés, y un servicio de boletines informativos vía e-mail para informarnos de todas las novedades en el servidor, aunque esto a veces es un poco molesto. En Geocities disponemos de 15 MB de espacio (es más que suficiente si sólo queremos subir una web temática sin muchas fotos y sin vídeos ni archivos musicales que engrosarían muchísimo el tamaño del website). También decir que al registrate en Geocities obtienes automáticamente una cuenta de correo en Yahoo!, aunque esto es típico en todos los servidores que veremos a continuación.
Uno de los mejores servidores gratuitos en español. De reciente aparación, I España ofrece tamaño ilimitado (primero te dan 50 megas, pero puedes solicitar más tarde todo el que necesites si es necesario). Pensaréis que es el mejor servidor para alojar páginas desde donde poder descargar archivos de video y de música, pues gracias a esos megas el espacio no será un problema..., pues no! I! España da muchos problemas a la hora de descargar grandes ficheros de forma continuada, por lo que deberemos optar por otro servidor si tenemos una web con esta finalidad. La publicidad de este lugar también es poca, una ventana del tipo "pop-up" que podemos cerrar, o un banner en la parte inferior de la página. También dispondremos de un buzón de correo con 20 megas (por lo visto, para este servidor el espacio no es ningún problema).
Con uno de los mejores servicios de ayuda o con poca publicidad, el portal Ya.com ofrece 30 Megas de espacio web a quien lo necesite de forma gratuita. Pese a que este servicio está todavía en construcción, su velocidad de acceso es de las mejores y los servicios que promete ofrecer en el futuro hacen tener en cuenta este servidor y clasificarlo como uno de los mejores en español. Además, también aseguran ofrecer espacio totalmente ilimitado bajo petición, si queremos ampliar los contenidos de nuestra web y no tenemos suficiente con esas 30 MB. Por cierto, este lugar es uno de los pocos que no te ofrece de forma automática el servicio de e-mail gratuito, aunque eso no tiene ninguna importancia, sí es un poco inhabitual.
Ofrece 20 MB de espacio y un típico buzón de correo con 10 MB más. La publicidad es del tipo "pop-up" (pequeña ventana emergente) y podemos ampliar de forma ilimitada y bajo petición el espacio que necesitemos para nuestro website, aunque no es de carácter inmediato (se supone que deben estudiar si merece la pena ofrecerte estos MB extras para ampliar tu sitio, esto también es bastante habitual). Tripod ofrece en la actualidad uno de los mayores índices de páginas web alojadas gratuitamente en español, debido a que es uno de los lugares más veteranos que ofrecen este servicio, pero encontramos a faltar muchos pequeños detalles que nos ofrecen los otros servidores para mejorar el contenido de nuestras páginas.
Galeón se hubiera impuesto en esta página como el mejor servidor gratuito por sus múltiples cualidades y servicios, aunque últimamente hay dos razones para no decantarse por él. El banner publicitario es un pequeño recuadro que se abre en la parte superior derecha del explorador, pero cuando este es cerrado por el usuario todos los gifs animados de la página, así como la carga de esta se detiene completamente, por lo que nuestra página puede llegar a perder mucha calidad. Además, brinkster supera con creces los servicios de los demás servidores analizados aqui. Aún así, Galeón tiene muchas cualidades y es seguramente el mejor servidor gratuito en español:  el espacio es ilimitado desde el principio, sin peticiones ni nada, e incluso dan suculentos premios en metálico a las mejores web alojadas en el servidor cada cierto tiempo para motivar a los usuarios. También ofrece otros servicios más típicos como contadores, libros de visitas, botones, etc. Evidentemente, al registrarnos en Galeón dispondremos al instante de un típico buzón de correo electrónico, en este caso, de 3 Megas.
Para terminar, hay que apuntar que en determinadas horas el servidor está absolutamente saturado, aunque tampoco se puede pedir más de un servidor gratuito que ofrece espacio ilimitado al instante, ¿no?.
Ofrece 100 MB desde el principio (es muchísimo, pese a que no permite solicitar más espacio). También nos ofrece la posibilidad de ganar dinero mediante inserción de publicidad, aunque personalmente creo que siempre es mejor contratar estos servicios de forma independiente a empresas especializadas, pero eso es otro tema. Una de las pegas es que sus servicios están en inglés y (¿he dicho pega?) no ofrece (impone) cuenta de correo gratis. La publicidad es del tipo "pop-up" y en FortuneCity está uno de los equipos más expertos del mundo en este tipo de servicios, pues lleva años al pie del cañón y alberga miles de websites en inglés.
Pese a que sólo nos ofrecen 10 MB y no permite solicitar más, este servidor nos ofrece la posibilidad de registrarnos de forma totalmente anónima (increible, ojalá todos fueran así). La publicidad que ofrecerá nuestra web está en forma de banner en la parte inferior de las páginas, y sólo con registrar la web (recordad, anónimamente) nos dan de alta la URL en los mejores buscadores del momento de forma automática. De todas maneras, veremos que esto no tiene tanta importancia si descubrimos que hay otros sitios en Internet que con un simple formulario nos damos de alta en más de 100 buscadores en un sólo instante. Demasiado.com es un lugar perfectamente válido para alojar nuestras primeras páginas web si estamos comenzando en este mundo, pero no ofrece muchos de los servicios que podemos encontrar en otros servidores gratuitos españoles.
El mejor servidor hispano en el tema publicidad (no tiene!!!!!!), pero demasiado pobre en cuanto a servicios. Gratisweb nos ofrece la posibilidad de crear una página web personal en unos segundos rellenando un pequeño formulario (aunque estos lo hacen la mayoría de los lugares que hemos visto aqui). El espacio ofrecido es de sólo 3 MB, y estamos delante del servidor ideal para alojar nuestra primera página web sin ningún tipo de complicación, pues en Gratisweb puede navegar y crear páginas cualquier usuario que no tenga ni idea de código HTML o ninguna noción del funcionamiento de las páginas web. También nos ofrece una cuenta de E-mail gratis, y la pega es que es el único servidor comentado aqui que no ofrece la posibilidad de actualizar las páginas mediante FTP, por lo que subir cierto tipo de archivos al servidor puede ser poco menos que un calvario si disponemos de una conexión de 56 k a Internet. (Aunque no podrás subir archivos muy grandes porque enseguida te comes las 3 MB!).
Muy buen servidor en ingles. Presenta varias formas dde  hacer la pagina. La primera es usando sus modelos de paginas, que los podes rellenar con varias cosas. La segunda, todo Html. Y la tercera es con acceso a FTP con Front Page u otros programas (con un costo).
Otro servidor en ingles, con acceso a varios recursos, como imagenes y otras cosas que el mismo servidor te da. Puedes hacerla con sus "moldes" o puro html.

Qué es el servicio de hospedaje de páginas
Cuando se habla de hospedaje web (web hosting) se está hablando siempre de computadoras. Las computadoras que se utilizan para otorgar este servicio suelen ser, sin embargo, algo distintas a las que se utilizan en el hogar, pero al fin y al cabo son computadoras conectadas a internet donde se almacenan archivos y desde donde estos archivos son enviados a otras computadoras (como la tuya) a través de internet.
Las compañías que se dedican a ofrecer el servicio de hospedaje web (o web hosting en inglés) son llamadas proveedores de hospedaje web o alguno de sus sinónimos como alojamiento web, web hosting o simplemente hosting.
¿Cómo funciona el hospedaje web (web hosting)?
Un proveedor de hospedaje web (web hosting) renta por lo general espacio y conectividad dentro de uno de sus servidores web de tal forma que el cliente pueda tener sus sitios web disponibles y accesibles a través de internet. Los proveedores de hospedaje web son responsables del mantenimento de los servidores que controlan así como de otros servicios básicos como los respaldos (backups) y las actualizacione de software de los servidores de alojamiento web (upgrades).
Existen compañías proveedoras de hospedaje web (web hosting) de todos los tamaños, desde aquellas que apenas tienen uno o dos servidores hasta las compañías más grandes que cuentan incluso con centros de datos (datacenters) completos con cientos de servidores conectados a internet.
Un centro de datos eficiente y profesional, es un lugar físico que cuenta con todas las facilidades para ofrecer los servicios de hospedaje web (web hosting) principalmente una o varias conexiones permanentes a internet de alta velocidad, monitoreo de servicios 24/7, energía electríca ininterrumpida (respaldo de energía o UPS), control de temperatura y humedad, seguridad física (accesos seguros) y otras más, de tal forma que exista un ambiente ideal para los sistemas y las computadoras que se localizan dentro de la instalación.
Dependiendo de las necesidades y el presupuesto que tenga cada cliente, es posible rentar desde un espacio básico en un servidor web hasta uno o varios servidores completos (lo que se llama servidores dedicados puesto que son dedicados a un solo cliente a diferencia de los servidores compartidos, cuyos recursos son usados por muchos clientes). Incluso con algunos proveedores existe la opción de comprar un servidor o llevar uno propio al datacenter (colocación de servidores) con lo que el cliente paga unicamente por los servicios de conectividad, energía y mantenimiento. Como se puede suponer, entre más crecen los requerimientos del cliente, los costos asociados al servicio pueden ir incrementándose de manera similar, sin embargo, para la inmensa mayoría de las empresas que comienzan en internet, un servicio de hospedaje web compartido basico (shared web hosting) suele ser más que suficiente en un inicio.
En resumen, cuando se habla del servicio de hospedaje web (web hosting), usualmente se está hablando de uno de los siguientes tres tipos de servicio: hospedaje web dedicado (dedicated hosting), hospedaje web compartido (shared hosting) y colocación de servidores.
Tipos de hospedaje web (web hosting)
Como hemos podido ver, existen tres tipos principales de servicios cuando se habla de hospedaje web. A continuación se describe cada uno de estos tipos:
Hospedaje web Dedicado / VPS
Con el hospedaje web dedicado (dedicated hosting) el cliente tiene un servidor completo a su servicio en el que puede hospedar sus sitios web y servicios relacionados (e-mails, ftp, etc.) sin compartir los recursos de dicho servidor con nadie más. El cliente cuenta con acceso remoto a su servidor web mediante el cual puede hacer mantenimiento, instalaciones, acualizaciones o cualquier otra cosa que quiera o necesite. Este tipo de hospedaje web (web hosting) es requerido por sitios grandes con una cantidad de tráfico (visitas) importante. Los costos suelen ser, en mayor o menor medida, más altos que otros tipos de hosting para sitios o clientes con requerimientos menores, como por ejemplo, el hospedaje web compartido (shared web hosting).
Los Servidores Privados Virtuales (VPS: Virtual Private Server) son similares a los servidores dedicados en cuanto al uso y acceso de los clientes, sin embargo, lo que el cliente en realidad tiene es una sección de servidor dedicado particionada (dividida) y dedicada para su uso exclusivo. Se comparten muchos de los beneficios de tener un servidor dedicado, sin embargo los recursos del servidor se tienen que compartir con otras personas (por la misma razón, los costos de un VPS suelen ser menores que los de un servidor dedicado).
Hospedaje web compartido (shared web hosting)
El servicio de hospedaje web compartido significa que los sitios web del cliente comparten espacio y recursos en un servidor web en el que estan también hospedados otros sitios web de otros clientes. El espacio total del disco duro del servidor se subdivide en varias partes y cada cliente obtiene una parte de ese espacio total. Esto quiere decir que cada cliente va a tener una cuota o capacidad de almacenamiento en disco así como de transferecia de datos asignada, las cuales no pueden ser excedidas ya que esto ocasionaría la suspensión del servicio o un incremento en precios por tarifas excedentes (las políticas respecto a esto varían de proveedor a proveedor). De la misma forma, los sitios web comparten otros recursos del sistema con otros usuarios (memoria, procesamiento de CPU, etc), pero por lo general esto no significa que la confidencialidad de la información de cada cliente quede vulnerada en ninguna forma ya que en practicamente todas las instalciones modernas de sistemas de hospedaje web (web hosting), existen varios niveles de protección para que ningún usuario pueda acceder a la información de otro usuario dentro del mismo servidor.
Este tipo de hospedaje web (web hosting) suele ser la variedad más económica que existe en el servicio, sin embargo y como se comentó previamente, suele ser suficiente para la inmensa mayoría de las empresas que comienzan en internet.
Colocación de servidores (Collocation)
La colocación de servidores es similar al servicio de hospedaje web dedicado con la diferencia de que el cliente en realidad es propietario del servidor web y no solo lo renta como en el otro caso. Esta modalidad se utiliza principalmente con empresas medianas y/o grandes que desean tener control de los equipos que utilizan pero no tienen presupuesto asignado para instalar un centro de datos propio (o simplemente prefieren utilizar los servicios de los centros de datos establecidos por cuestiones logísticas y no de presupuesto).

PRACTICA 18


 Formularios

Antes de insertar los elementos o controles del formulario, hemos de crear un formulario. Los elementos los introduciremos dentro de él, ya que cuando lo demos a enviar, sólo se enviarán los datos de los elementos de dentro del formulario.
Puedes crear formularios a través del menú Insertar → Formulario, opción Formulario, o desde el panel Insertar.
Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas naranjas discontinuas, similar al de la imagen siguiente.

Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el formulario final.
Entre las propiedades del formulario, encontramos el campo Acción. En el indicamos a dónde se envían los datos. Normalmente, una página PHP que se encara de tratarlos.

Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario o desde el panel Insertar.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos emplear el selector form.
9.4. Validar formularios
La validación de formularios sirve para hacer que JavaScript valide el formulario antes de que se envíe, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho más eficiente y rápido que enviar la página y validarla sólo en el servidor.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús + F4. Comportamientos forma parte del panel Inspector de etiquetas.
En este panel hay que desplegar el botón y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número) y si ha de estar en un rango, una Dirección de correo electrónico, etc.


lunes, 13 de mayo de 2013

PRACTICA 16


PRACTICA 16
<html>
<head> <title> practica 7: TABLAS </title>
</head>
<body>
h2><center> <font color="red"> Tablas </font></center></h2>
<hr>
<p> Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio.
<br>
<br>Ejemplos:
<br>

<TABLE BORDER=3 CELLPADDING=10>
<TD>
Texto en una celda.
</TD>
</TABLE>
<br>

<TABLE BORDER=2 CELLPADDING=5>
<TD> Celda 1 </TD>
<TD> Celda 2 </TD>
</TABLE>
<br>

<TABLE BORDER=5 CELLPADDING=8>
<TD> Celda 1 </TD>
<TD> Celda 2 </TD>
<TR>
<TD> Celda 3 </TD>
<TD> Celda 4 </TD>
</TABLE>
<br>

<TABLE BORDER=5>
<TH ALIGN=RIGHT>Nombre</TH>
<TH> Significado </TH>
<TR>
<TD> HTML </TD>
<TD> Hyper Text Markup Language </TD>
</TABLE>
<br>

<TABLE BORDER=2>
<TH bgcolor="cyan"> Plataforma </TH>
<TH COLSPAN=2 bgcolor="silver">Navegador</TH>
<TR>
<TD>Unix </TD>
<TD ROWSPAN=2>utilizar</TD>
<TD>Mosaic<BR>Lynx</TD>
</TR>
<TR>
<TD>Windows 95</TD>
<TD>Netscape<BR>
 Explorer</TD>
</body>
</html>
Manejo de Formularios Web
Estructura de un formulario
Una de las ventajas de la Web es que resulta tremendamente interactiva. Los usuarios de una página no tienen más que ingresar ya sea comentarios o consultar información llenando un formulario y sus datos seguros serán recibidos por el lado del servidor.
La estructura básica de un formulario es el siguiente:
<form name=" " method=" " action=" " enctype=" " target=" ">
aquí se pueden incluir entradas o campos de texto, opciones, selección, entradas o campos de archivos, entradas o campos ocultos
</form>
name: nombre que se le da al formulario.
method: define el método en que se enviará los datos del formulario, dos valores posibles (GET/POST), se recomienda el uso de "post"
action: define la URL que deberá gestionar el formulario, de una dirección de correo hasta un script que procese la  información.
enctype: el tipo de contenido que se enviará en el formulario.
target: donde se abrirá el script que procese la información.
Todos los elementos de un formulario deben estar encerrados entre <form> y </form>
Práctica: html_4.htm - Diseño de un formulario.
<html>
<head>
<title>Formulario B&aacute;sico</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="frmContacto" action="procesar.php" method="post">
<table>
<tr><td colspan="2"><h2>Ingrese sus datos</h2></td></tr>
<tr><td>Nombres:</td><td><input type="text" name="nombres"
size="20"/></td>
</tr>
<tr><td>Apellidos:</td><td><input type="text" name="apellidos"
size="20"/></td>
</tr>
<tr><td>Comentario:</td><td></td></tr>
<tr><td colspan="2"><textarea name="comentario" rows="4"
cols="30"></textarea></td></tr>
<tr><td colspan="2"><input type="reset"
value="limpiar"/>&nbsp;&nbsp;<input type="submit" value="¡enviar
ya!"/></td></tr>
</table>
</form>
</body>
</html>
Propiedades básicas de formularios y elementos
JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de aplicaciones que manejan formularios. En primer lugar, cuando se carga una página web, el navegador crea automáticamente un array llamado forms y que contiene la referencia a todos los formularios de la página.
Para acceder al array forms, se utiliza el objeto document, por lo que document.forms es el array que contiene todos los formularios de la página. Como se trata de un array, el acceso a cada formulario se realiza con la misma sintaxis de los arrays. La siguiente instrucción accede al primer formulario de la página:
document.forms[0];
Además del array de formularios, el navegador crea automáticamente un array llamado elements por cada uno de los formularios de la página. Cada array elements contiene la referencia a todos los elementos (cuadros de texto, botones, listas desplegables, etc.) de ese formulario. Utilizando la sintaxis de los arrays, la siguiente instrucción obtiene el primer elemento del primer formulario de la página:
document.forms[0].elements[0];
La sintaxis de los arrays no siempre es tan concisa. El siguiente ejemplo muestra cómo obtener directamente el último elemento del primer formulario de la página:
document.forms[0].elements[document.forms[0].elements.length-1];
Aunque esta forma de acceder a los formularios es rápida y sencilla, tiene un inconveniente muy grave. ¿Qué sucede si cambia el diseño de la página y en el código HTML se cambia el orden de los formularios originales o se añaden nuevos formularios? El problema es que "el primer formulario de la página" ahora podría ser otro formulario diferente al que espera la aplicación.
En un entorno tan cambiante como el diseño web, es muy difícil confiar en que el orden de los formularios se mantenga estable en una página web. Por este motivo, siempre debería evitarse el acceso a los formularios de una página mediante el array document.forms.
Una forma de evitar los problemas del método anterior consiste en acceder a los formularios de una página a través de su nombre (atributo name) o a través de su atributo id. El objeto document permite acceder directamente a cualquier formulario mediante su atributo name:
var formularioPrincipal = document.formulario;
var formularioSecundario = document.otro_formulario;

<form name="formulario" >
  ...
</form>

<form name="otro_formulario" >
  ...
</form>
Accediendo de esta forma a los formularios de la página, el script funciona correctamente aunque se reordenen los formularios o se añadan nuevos formularios a la página. Los elementos de los formularios también se pueden acceder directamente mediante su atributo name:
var formularioPrincipal = document.formulario;
var primerElemento = document.formulario.elemento;

<form name="formulario">
  <input type="text" name="elemento" />
</form>
Obviamente, también se puede acceder a los formularios y a sus elementos utilizando las funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual función document.getElementById() para acceder de forma directa a un formulario y a uno de sus elementos:
var formularioPrincipal = document.getElementById("formulario");
var primerElemento = document.getElementById("elemento");

<form name="formulario" id="formulario" >
  <input type="text" name="elemento" id="elemento" />
</form>
Independientemente del método utilizado para obtener la referencia a un elemento de formulario, cada elemento dispone de las siguientes propiedades útiles para el desarrollo de las aplicaciones:
  • type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es textarea.
  • form: es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizar document.getElementById("id_del_elemento").form
  • name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.
  • value: permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el botón. Para los elementos checkbox y radiobutton no es muy útil, como se verá más adelante
Por último, los eventos más utilizados en el manejo de los formularios son los siguientes:
  • onclick: evento que se produce cuando se pincha con el ratón sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">).
  • onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type="text"> o <textarea>). También se produce cuando el usuario selecciona una opción en una lista desplegable (<select>). Sin embargo, el evento sólo se produce si después de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que técnicamente se conoce como que "el otro campo de formulario ha perdido el foco".
  • onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario.
  • onblur: evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. Técnicamente, se dice que el elemento anterior "ha perdido el foco".

Obtener el valor de los campos de formulario

La mayoría de técnicas JavaScript relacionadas con los formularios requieren leer y/o modificar el valor de los campos del formulario. Por tanto, a continuación se muestra cómo obtener el valor de los campos de formulario más utilizados.

7.2.1.1. Cuadro de texto y textarea

El valor del texto mostrado por estos elementos se obtiene y se establece directamente mediante la propiedad value.
<input type="text" id="texto" />
var valor = document.getElementById("texto").value;
 
<textarea id="parrafo"></textarea>
var valor = document.getElementById("parrafo").value;

7.2.1.2. Radiobutton

Cuando se dispone de un grupo de radiobuttons, generalmente no se quiere obtener el valor del atributo value de alguno de ellos, sino que lo importante es conocer cuál de todos los radiobuttons se ha seleccionado. La propiedad checked devuelve true para el radiobutton seleccionado y false en cualquier otro caso. Si por ejemplo se dispone del siguiente grupo de radiobuttons:
<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI
<input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/NC
El siguiente código permite determinar si cada radiobutton ha sido seleccionado o no:
var elementos = document.getElementsByName("pregunta");
 
for(var i=0; i<elementos.length; i++) {
  alert(" Elemento: " + elementos[i].value + "\n Seleccionado: " + elementos[i].checked);
}

7.2.1.3. Checkbox

Los elementos de tipo checkbox son muy similares a los radiobutton, salvo que en este caso se debe comprobar cada checkbox de forma independiente del resto. El motivo es que los grupos de radiobutton son mutuamente excluyentes y sólo se puede seleccionar uno de ellos cada vez. Por su parte, los checkbox se pueden seleccionar de forma independiente respecto de los demás.
Si se dispone de los siguientes checkbox:
<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/> He leído y acepto las condiciones
<input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/> He leído la política de privacidad
Utilizando la propiedad checked, es posible comprobar si cada checkbox ha sido seleccionado:
var elemento = document.getElementById("condiciones");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
 
elemento = document.getElementById("privacidad");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);

7.2.1.4. Select

Las listas desplegables (<select>) son los elementos en los que es más difícil obtener su valor. Si se dispone de una lista desplegable como la siguiente:
<select id="opciones" name="opciones">
  <option value="1">Primer valor</option>
  <option value="2">Segundo valor</option>
  <option value="3">Tercer valor</option>
  <option value="4">Cuarto valor</option>
</select>
En general, lo que se requiere es obtener el valor del atributo value de la opción (<option>) seleccionada por el usuario. Obtener este valor no es sencillo, ya que se deben realizar una serie de pasos. Además, para obtener el valor seleccionado, deben utilizarse las siguientes propiedades:
  • options, es un array creado automáticamente por el navegador para cada lista desplegable y que contiene la referencia a todas las opciones de esa lista. De esta forma, la primera opción de una lista se puede obtener mediante document.getElementById("id_de_la_lista").options[0].
  • selectedIndex, cuando el usuario selecciona una opción, el navegador actualiza automáticamente el valor de esta propiedad, que guarda el índice de la opción seleccionada. El índice hace referencia al array options creado automáticamente por el navegador para cada lista.
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
 
// Obtener el índice de la opción que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
 
// Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
 
alert("Opción seleccionada: " + textoSeleccionado + "\n Valor de la opción: " + valorSeleccionado);
Como se ha visto, para obtener el valor del atributo value correspondiente a la opción seleccionada por el usuario, es necesario realizar varios pasos. No obstante, normalmente se abrevian todos los pasos necesarios en una única instrucción:
var lista = document.getElementById("opciones");
 
// Obtener el valor de la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].value;
 
// Obtener el texto que muestra la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].text;
Lo más importante es no confundir el valor de la propiedad selectedIndex con el valor correspondiente a la propiedad value de la opción seleccionada. En el ejemplo anterior, la primera opción tiene un value igual a 1. Sin embargo, si se selecciona esta opción, el valor de selectedIndex será 0, ya que es la primera opción del array options (y los arrays empiezan a contar los elementos en el número 0).

7.2.2. Establecer el foco en un elemento

En programación, cuando un elemento está seleccionado y se puede escribir directamente en el o se puede modificar alguna de sus propiedades, se dice que tiene el foco del programa.
Si un cuadro de texto de un formulario tiene el foco, el usuario puede escribir directamente en el sin necesidad de pinchar previamente con el ratón en el interior del cuadro. Igualmente, si una lista desplegable tiene el foco, el usuario puede seleccionar una opción directamente subiendo y bajando con las flechas del teclado.
Al pulsar repetidamente la tecla TABULADOR sobre una página web, los diferentes elementos (enlaces, imágenes, campos de formulario, etc.) van obteniendo el foco del navegador (el elemento seleccionado cada vez suele mostrar un pequeño borde punteado).
Si en una página web el formulario es el elemento más importante, como por ejemplo en una página de búsqueda o en una página con un formulario para registrarse, se considera una buena práctica de usabilidad el asignar automáticamente el foco al primer elemento del formulario cuando se carga la página.
Para asignar el foco a un elemento de XHTML, se utiliza la función focus(). El siguiente ejemplo asigna el foco a un elemento de formulario cuyo atributo id es igual a primero:
document.getElementById("primero").focus();
 
<form id="formulario" action="#">
  <input type="text" id="primero" />
</form>
Ampliando el ejemplo anterior, se puede asignar automáticamente el foco del programa al primer elemento del primer formulario de la página, independientemente del id del formulario y de los elementos:
if(document.forms.length > 0) {
  if(document.forms[0].elements.length > 0) {
    document.forms[0].elements[0].focus();
  }
}
El código anterior comprueba que existe al menos un formulario en la página mediante el tamaño del array forms. Si su tamaño es mayor que 0, se utiliza este primer formulario. Empleando la misma técnica, se comprueba que el formulario tenga al menos un elemento (if(document.forms[0].elements.length > 0)). En caso afirmativo, se establece el foco del navegador en el primer elemento del primer formulario (document.forms[0].elements[0].focus();).
Para que el ejemplo anterior sea completamente correcto, se debe añadir una comprobación adicional. El campo de formulario que se selecciona no debería ser de tipo hidden:
if(document.forms.length > 0) {
  for(var i=0; i < document.forms[0].elements.length; i++) {
    var campo = document.forms[0].elements[i];
    if(campo.type != "hidden") {
      campo.focus();
      break;
    }
  }
}

7.2.3. Evitar el envío duplicado de un formulario

Uno de los problemas habituales con el uso de formularios web es la posibilidad de que el usuario pulse dos veces seguidas sobre el botón "Enviar". Si la conexión del usuario es demasiado lenta o la respuesta del servidor se hace esperar, el formulario original sigue mostrándose en el navegador y por ese motivo, el usuario tiene la tentación de volver a pinchar sobre el botón de "Enviar".
En la mayoría de los casos, el problema no es grave e incluso es posible controlarlo en el servidor, pero puede complicarse en formularios de aplicaciones importantes como las que implican transacciones económicas.
Por este motivo, una buena práctica en el diseño de aplicaciones web suele ser la de deshabilitar el botón de envío después de la primera pulsación. El siguiente ejemplo muestra el código necesario:
<form id="formulario" action="#">
  ...
  <input type="button" value="Enviar" onclick="this.disabled=true; this.value=’Enviando...’; this.form.submit()" />
</form>
Cuando se pulsa sobre el botón de envío del formulario, se produce el evento onclick sobre el botón y por tanto, se ejecutan las instrucciones JavaScript contenidas en el atributo onclick:
  1. En primer lugar, se deshabilita el botón mediante la instrucción this.disabled = true;. Esta es la única instrucción necesaria si sólo se quiere deshabilitar un botón.
  2. A continuación, se cambia el mensaje que muestra el botón. Del original "Enviar" se pasa al más adecuado "Enviando..."
  3. Por último, se envía el formulario mediante la función submit() en la siguiente instrucción: this.form.submit()
El botón del ejemplo anterior está definido mediante un botón de tipo <input type="button" />, ya que el código JavaScript mostrado no funciona correctamente con un botón de tipo <input type="submit" />. Si se utiliza un botón de tipo submit, el botón se deshabilita antes de enviar el formulario y por tanto el formulario acaba sin enviarse.

7.2.4. Limitar el tamaño de caracteres de un textarea

La carencia más importante de los campos de formulario de tipo textarea es la imposibilidad de limitar el máximo número de caracteres que se pueden introducir, de forma similar al atributo maxlength de los cuadros de texto normales.
JavaScript permite añadir esta característica de forma muy sencilla. En primer lugar, hay que recordar que con algunos eventos (como onkeypress, onclick y onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false.
Evitar el comportamiento normal equivale a modificar completamente el comportamiento habitual del evento. Si por ejemplo se devuelve el valor false en el evento onkeypress, la tecla pulsada por el usuario no se tiene en cuenta. Si se devuelve false en el evento onclick de un elemento como un enlace, el navegador no carga la página indicada por el enlace.
Si un evento devuelve el valor true, su comportamiento es el habitual:
<textarea onkeypress="return true;"></textarea>
En el textarea del ejemplo anterior, el usuario puede escribir cualquier carácter, ya que el evento onkeypress devuelve true y por tanto, su comportamiento es el normal y la tecla pulsada se transforma en un carácter dentro del textarea.
Sin embargo, en el siguiente ejemplo:
<textarea onkeypress="return false;"></textarea>
Como el valor devuelto por el evento onkeypress es igual a false, el navegador no ejecuta el comportamiento por defecto del evento, es decir, la tecla presionada no se transforma en ningún carácter dentro del textarea. No importa las veces que se pulsen las teclas y no importa la tecla pulsada, ese textarea no permitirá escribir ningún carácter.
Aprovechando esta característica, es sencillo limitar el número de caracteres que se pueden escribir en un elemento de tipo textarea: se comprueba si se ha llegado al máximo número de caracteres permitido y en caso afirmativo se evita el comportamiento habitual del evento y por tanto, los caracteres adicionales no se añaden al textarea:
function limita(maximoCaracteres) {
  var elemento = document.getElementById("texto");
  if(elemento.value.length >= maximoCaracteres ) {
    return false;
  }
  else {
    return true;
  }
}
 
<textarea id="texto" onkeypress="return limita(100);"></textarea>
En el ejemplo anterior, con cada tecla pulsada se compara el número total de caracteres del textarea con el máximo número de caracteres permitido. Si el número de caracteres es igual o mayor que el límite, se devuelve el valor false y por tanto, se evita el comportamiento por defecto de onkeypress y la tecla no se añade.
Ejercicio 17
Mejorar el ejemplo anterior indicando en todo momento al usuario el número de caracteres que aún puede escribir. Además, se debe permitir pulsar las teclas Backspace, Supr. y las flechas horizontales cuando se haya llegado al máximo número de caracteres.
Ver solución

7.2.5. Restringir los caracteres permitidos en un cuadro de texto

En ocasiones, puede ser útil bloquear algunos caracteres determinados en un cuadro de texto. Si por ejemplo un cuadro de texto espera que se introduzca un número, puede ser interesante no permitir al usuario introducir ningún carácter que no sea numérico.
Igualmente, en algunos casos puede ser útil impedir que el usuario introduzca números en un cuadro de texto. Utilizando el evento onkeypress y unas cuantas sentencias JavaScript, el problema se resuelve fácilmente:
function permite(elEvento, permitidos) {
  // Variables que definen los caracteres permitidos
  var numeros = "0123456789";
  var caracteres = " abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
  var numeros_caracteres = numeros + caracteres;
  var teclas_especiales = [8, 37, 39, 46];
  // 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha
 
 
  // Seleccionar los caracteres a partir del parámetro de la función
  switch(permitidos) {
    case 'num':
      permitidos = numeros;
      break;
    case 'car':
      permitidos = caracteres;
      break;
    case 'num_car':
      permitidos = numeros_caracteres;
      break;
  }
 
  // Obtener la tecla pulsada 
  var evento = elEvento || window.event;
  var codigoCaracter = evento.charCode || evento.keyCode;
  var caracter = String.fromCharCode(codigoCaracter);
 
  // Comprobar si la tecla pulsada es alguna de las teclas especiales
  // (teclas de borrado y flechas horizontales)
  var tecla_especial = false;
  for(var i in teclas_especiales) {
    if(codigoCaracter == teclas_especiales[i]) {
      tecla_especial = true;
      break;
    }
  }
 
  // Comprobar si la tecla pulsada se encuentra en los caracteres permitidos
  // o si es una tecla especial
  return permitidos.indexOf(caracter) != -1 || tecla_especial;
}
 
// Sólo números
<input type="text" id="texto" onkeypress="return permite(event, 'num')" />
 
// Sólo letras
<input type="text" id="texto" onkeypress="return permite(event, 'car')" />
 
// Sólo letras o números
<input type="text" id="texto" onkeypress="return permite(event, 'num_car')" />
El funcionamiento del script anterior se basa en permitir o impedir el comportamiento habitual del evento onkeypress. Cuando se pulsa una tecla, se comprueba si el carácter de esa tecla se encuentra dentro de los caracteres permitidos para ese elemento <input>.
Si el carácter se encuentra dentro de los caracteres permitidos, se devuelve true y por tanto el comportamiento de onkeypress es el habitual y la tecla se escribe. Si el carácter no se encuentra dentro de los caracteres permitidos, se devuelve false y por tanto se impide el comportamiento normal de onkeypress y la tecla no llega a escribirse en el input.
Además, el script anterior siempre permite la pulsación de algunas teclas especiales. En concreto, las teclas BackSpace y Supr para borrar caracteres y las teclas Flecha Izquierda y Flecha Derecha para moverse en el cuadro de texto siempre se pueden pulsar independientemente del tipo de caracteres permitidos.