Linea de Codigo

Antes de tener la especificación de HTML5 si queríamos realizar un autofoco a un campo, es decir, que al cargar una página el foco del cursor se pusiese en un campo de un formulario, teníamos que utilizar código Javascript.
Ahora, gracias a HTML5, podemos acometer esta labor de una forma sencilla.

Lo primero será definir el formulario. En nuestro caso tendrá dos simples campos de entrada de texto:

 
<form>
  <label for="nombre">¿Cómo te llamas?</label>
<input id="nombre" type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
<input id="edad" type="text" />
</form>
 

Si lo que queremos es que el autofoco se realice sobre el campo INPUT nombre, le añadiremos el atributo autofocus. Quedándonos el siguiente código:

 
<form>
  <label for="nombre">¿Cómo te llamas?</label>
<input id="nombre" autofoucs type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
<input id="edad" type="text" />
</form>
 

El atributo autofocus solo puede aplicarse sobre un único campo del formulario

Solo tenemos que tener cuidado de una cosa y es que la especificación HTML5 todavía no está terminada ni implementada en todos los navegadores web. Es por ello que puede ser que no funcione correctamente. Las versiones mínimas en las que funciona son Chrome 6, Firefox 4, Opera 11, Safari 5 e Internet Explorer 10. Quizás la versión del Internet Explorer sea la que más problemas pueda ocasionarte.

En este caso podemos recurrir a la implementación en Javascript. En este caso vamos a crear mediante Javascript un elemento INPUT ficiticio y vamos a comprobar si este tiene el atributo autofocus o no. En caso de que no lo tenga lanzaremos el código Javascript con el método .focus()

if(!("autofocus" in document.createElement("input")))
  document.getElementById("nombre").focus();

En este ejemplo vamos a combinar varias cosas que hemos aprendido sobre el HTML5. Por un lado el manejo de los sliders para poder establecer un rango de valores mediante una barra de desplazamiento. Por otro el manejo de un vídeo en HTML5. Además aprenderemos una cosa nueva, que será el controlar el volumen del vídeo con un slider.

Lo primero que haremos será poner en nuestra página los elementos HTML5 que necesitemos, ya que el código Javascript que incorporemos será siempre no intrusivo.

El vídeo, mediante el elemento VIDEO será el siguiente:

<video id="mivideo" controls>
  <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>

Y el slider será mediante un elemento input y su tipo "range"

<label for="volumen">Volumen: </label>
<input type="range" min="0" max="1" value="1" step="0.1" id="volumen">
<input type="checkbox" id="mute"><label for="mute">Mute</label>

Además hemos incorporado un checkbox para simular el mute. Es decir, para quitar el sonido al vídeo.

Lo primero, las referencias a los elementos:

var mute = document.getElementById("mute");
var barra = document.getElementById("volumen");

Sobre el tema de controlar el volumen del vídeo deberemos de saber que la propiedad que gestiona el volumen de un vídeo en HTML5 es .volume del elemento HTMLMediaElement. Y que los valores que puede tomar dicha propiedad van desde el 0.0 hasta el 1.0 con saltos de 0.1. Algo importante ya que como vemos son los valores que hemos dado a las propiedades min, max y step del slider.

Así la codificación ante un cambio del slider, es decir, ante que se produzca un evento change, será el asignar el valor del slider al volumen del vídeo.

barra.addEventListener("change",function(ev){
  var v = document.getElementById("mivideo");
  v.volume = ev.target.value;
  mute.checked=false;
},true);

Vemos en el código que el .value del slider se lo asignamos a la propiedad .volume del vídeo.

Utilizamos .addEventListener para adjuntar la gestión de un evento a un elemento en concreto.

Además hemos añadido el manejo del mute. es decir, si cambiamos el slider (movemos el volumen) se desactivará la casilla del mute.

Ahora vamos con el mute. Para esto gestionamos el evento change del checkbox. Cada vez que cambie el checkbox veremos que hacer. Pero antes de esto nos vamos a crear una variable que nos permite mantener la información del volumen. Esta nos servirá para que cuando desactivemos el mute, recuperemos la última posición del volumen. A esta variable la hemos llamado oldvolume.

var oldvolume = 1;

Inicializada a 1, al igual que sucede con el volumen.
Ahora solo tenemos que jugar con el valor del checkbox. Su atributo .checked nos indicará si este está activo o no.

mute.addEventListener("change",function(ev){
	var v = document.getElementById("mivideo");
	if (ev.target.checked) {
		oldvolume = v.volume;
		v.volume = 0;
		barra.value = 0;
	} else {
		v.volume = oldvolume;
		barra.value = oldvolume;
	}
},true);

La lógica, la siguiente. Si está activado hay que apagar el volumen (atributo volume a 0 y el slider con un valor de 0), pero guardándonos la posición actual del volumen en la variable oldvolume.

Que el checkbox está desactivado, pues reponemos el valor de la variable oldvolume tanto al slider, como al atributo .volume del vídeo.

Con todo esto ya podemos controlar el volumen de vídeo HTML5 con un Slider.

Un DataList en HTML5 es una lista de opciones predefinidas que le podemos pasar al elemento INPUT le podemos aplicar un DataList en HTML5. Pues podemos aplicarlo al tipo text o aun tipo URL o al tipo range. Es decir, de HTML5. Es decir, el agente de usuario o navegador propocionará esa lista como posibles opciones.

Pero, a qué tipos del elemento INPUT le podemos aplicar un DataList en HTML5. Pues podemos aplicarlo al tipo text o aun tipo URL o al tipo range. Es decir, sobre una caja de text o sobre un slider. En el primer caso el DataList serán las opciones propuestas y predefinidas que se le darán al usuario y en el caso del slider serán diferentes puntos dentro del slider.

Pero lo primero será definir la lista de opciones del DataList. El elemento es datalist.

<datalist id="lista">
<option value="0">
<option value="2">
<option value="4">
<option value="6">
<option value="8">
<option value="10">
</datalist>

Como vemos, la lista tiene un identificador denotado por el atributo id y una lista de opciones. Cada una de las opciones de la lista la definimos mediante un elemento option.

Si queremos podemos dar a los valores de la lista un texto alternativo. Para ello utilizaremos el atributo label.

<datalist id="listaurls">
<option value="http://www.ayudaenlaweb.com" label="Ayuda en la Web">
<option value="http://lineadecodigo.com" label="Línea de Código">
<option value="http://www.dudasprogramacion.com" label="Dudas de Programación">
</datalist>

Como podemos comprobar la estructura de la lista es realmente sencilla. El siguiente paso será el asociar la lista al elemento INPUT. Para ello utilizamos el atributo list del INPUT, el cual deberá de hacer referencia al id de la lista.

Así si creamos un input que haga referencia a la primera lista sería:

 
<input type="range" min="0" max="10" value="3" step="1" id="mislider" list="lista">

y si creamos una referencia desde un tipo URL a la segunda lista sería:

 
<input type="url" id="misurl" list="listaurls" size="100">

Ya solo nos queda ver el efecto que produce el elemento DataList y su comportamiento de opciones por defecto en nuestro navegador. Eso sí, de momento solo el navegador web Opera da soporte a los DataList de HTML5.

Una de las novedades que tenemos dentro de los formularios HTML5 son los elementos input de tipo rango. Estos elementos son unos sliders que nos permiten seleccionar un valor desplazando un puntero sobre el slider.

Para crear un elemento de tipo rango en formularios HTML5 tenemos que crear un elemento input de tipo range de la siguiente forma:

 
<input type="range"/>

Sobre este elemento podemos definir varios valores. En primer lugar el valor máximo y mínimo del rango. Esto lo haremos mediante los atributos min y max.

 
<input type="range" min="0" max="10"/>

De igual manera podemos definir los valores del incremento, es decir, cada vez que desplazamos el puntero en cuanto se incrementará o decrementará el valor del elemento. Este atributo es step. Así si queremos que se incremente de uno en uno definiremos el elemento rango de la siguiente forma:

 
<input type="range" min="0" max="10" value="3" step="1" id="mislider">

Los elementos de tipo rango están disponibles vía Javascript. Es decir, podemos acceder a su modelo DOM y consultar el valor que tiene el rango en cualquier momento. Bastará solo con consultar el valor del atributo value.

Por ejemplo, si queremos calcular el valor que tiene el rango cada vez que se modifique podemos crear un listener sobre el evento onchange de dicho rango con el método addEventListener.

var barra = document.getElementById("mislider");
barra.addEventListener("change",function(ev){
  var resultado = document.getElementById("valor");
  resultado.innerHTML = ev.currentTarget.value;
},true);

Vemos que cuando utilizamos el método addEventListener el objeto evento que se le pasa a la función lleva la referencia al elemento que generó el evento en el campo currentTarget.

Solo hay que tener en cuenta una cosa al utilizar el elemento range en formularios HTML5 y esto es el soporte de los navegadores, ya que todavía todos no lo dan.

Unos cuantos han sido los artículos que le hemos dedicado a la selección de texto con jQuery: Seleccionar el texto de un campo, Seleccionar el texto al posicionarse en un campo y Detectar el texto seleccionado con jQuery. Pero no quería dejar de escribir uno que nos va a dar un buen efecto visual y este consiste en seleccionar un texto solo si este no ha cambiado con jQuery.

Es decir, seleccionaremos el texto del campo si sigue siendo el mismo que al cargar la página. Si el usuario ha cambiado el contenido, ya no lo seleccionaremos.

Manos a la obra... Lo primero el formulario al uso (casi que ya lo imaginas).

 
<form id="miform">
  <label for="texto">Inserta texto:</label>
<input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
  <label for="areatexto">Cada vez que pinches en el &aacute;rea de texto se selecionará. Esto sucederá mientras no cambies el contenido original del mismo.</label><br/>
  <textarea id="areatexto" cols="25" rows="8">Texto por defecto</textarea><br/>
</form>
 

Hay que fijarse bien que hemos puesto los campos input y textarea con textos por defecto.

Será cuándo el usuario acceda al campo cuando comprobaremos si ha cambiado el texto. Para ello utilizamos el método .focus() de jQuery. En este caso vamos a ver cómo sería para el textarea.

$(document).ready(function(){
	$("textarea").focus(function(){...});
});

Ahora tenemos que diferenciar como conseguir el texto que tiene actualmente y el texto que estaba por defecto. El texto actual lo conseguiremos con .value y el texto por defecto con .defaultValue.

Así que seleccionaremos el texto, es decir, lamaremos al método .select() si son iguales.

$(document).ready(function(){
  $("textarea").focus(function(){
    if(this.value == this.defaultValue){
      this.select();
    }
  });
});

Así ya hemos seleccionado el texto solo si este no ha cambiado.

Si el otro día vimos como seleccionar el texto de un campo (por defecto o mediante un click del usuario), hoy vamos a ver como seleccionar texto al posicionarse en un campo con jQuery. Es decir, al ir moviéndonos por los campos y llegar al determinado campo seleccionaremos el texto.

Controlar el posicionarse en un campo lo podremos hacer mediante el método .focus() de jQuery. Pero lo primero, el formulario. Como siempre, algo simple:

 
<form id="miform">
	<label for="texto">Inserta texto:</label>
<input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
	<label for="texto2">Inserta texto:</label>
<input id="texto2" type="text" value="Texto por defecto 2" size="100"/><br/>
</form>
 

Como la selección del texto al posicionarse en un campo lo vamos a aplicar a todos los campos input (de tipo text) vamos a utilizar un selector.

input[type=text]

Así que el método .focus() se quedará de la siguiente forma:

$("input[type=text]").focus(function(){ ... });

Ya solo nos quedará realizar la selección del campo de texto mediante el método .select() de jQuery.

$("input[type=text]").focus(function(){
  this.select();
});

Si hemos presentado un formulario a nuestros usuarios es probable que queramos validar la información que hayan insertado antes de enviarlo. En esta situación, si encontramos algo que no nos cuadre deberemos poder bloquear el envío del formulario.

Ahora vamos a ver cómo podemos bloquear el envío de un formulario con jQuery. Pero lo primero será poner nuestro formulario HTML. Para ello utilizamos la etiqueta FORM:

 
<form id="formulario" action="post.php">
  <label for="valor">Inserta un valor: </label>
<input id="valor" type="text" size="10">
<input type="submit" value="Enviar"/>
</form>
 

En este caso el envío del formulario se ejecuta al pulsar sobre el elemento INPUT de tipo submit.

Lo que nosotros vamos a hacer es interceptar con jQuery el evento .submit() del formulario. Para ello nos posicionamos en el formulario y capturamos dicho evento:

$("#formulario").submit(function() {...});

Ahora ya tenemos el control del envío del formulario. La idea es asignar una función que atienda a este evento .submit(). Si queremos bloquear el envío del formulario la función deberá devolver false. Si queremos que se envíe el formulario deberemos de devolver true.

Para demostrar el funcionamiento vamos a comprobar que el texto introducido coincide con una palabra. Si no coincide bloqueamos el envío del formulario (con el false) y si coincide, enviamos el formulario (con el true).

$(document).ready(function(){
  $("#formulario").submit(function() {
    var x = $("#valor").val();
      if (x!="enviar") {
        alert("Valor introducido no válido");
        return false;
      } else
          return true;
    });
});

Ya tenemos el código de cómo bloquear el envío de un formulario con jQuery.

Cuando creamos un formulario podemos asignarle valores por defecto a sus campos. Pero si no queremos que estos valores estén asociados directamente a nuestra estructura de la página, podemos utilizar jQuery para modificar los valores por defecto de un formulario y asociar los que nos interesen.

Lo primero el formulario:

 
<form id="myform">
  <label for="nombre">Nombre: </label>
<input id="nombre" type="text" size="20"/><br/>
  <label for="apellidos">Apellidos: </label>
<input id="apellidos" type="text" size="20"/><br/>
  <label for="ciudad">Ciudad: </label>
<input id="ciudad" type="text" size="20"/><br/>
  <label for="email">Email: </label>
<input id="email" type="text" size="20"/>
</form>
 

Vemos que no hay valores por defecto, para tener una estructura limpia.

El código jQuery irá a buscar los elementos input, que tengan un atributo type con valor "text".

De esta forma el selector a utilizar es el siguiente:

$("input[type='text']")

Ahora solo nos queda modificar el valor de estos campos, insertando el texto que más nos guste. Para ello utilizaremos el método .val():

$("input[type='text']")
  .val('Inserta un valor');

Una de las cosas nuevas que nos trae HTML5 es la capacidad de crear marcadores de posición o más conocidos dentro de la especificación HTML5 como placeholder.

Pero, ¿qué es un placeholder o marcador de posición? Para resumirlo podemos decir que es el texto que aparece dentro de un campo de texto antes de que se inserte un contenido. De esta manera podemos indicar al usuario qué queremos que inserte en ese campo. Es algo parecido a los labels, pero dentro de propio recuadro de texto.

La utilización de placeholder no exime el uso de labels. La W3C recomienda siempre el uso de un label junto con los inputs. Aunque estemos utilizando un placeholder.

Pero vamos a ponernos manos a la obra. Lo primero será crear un input de tipo text.

 
<form id="formualario">
<label for="texto">Nombre: </label>
<input type="text" />
</form>
 

Para crear el placeholder simplemente tenemos que utilizar el atributo placeholder del elemento input. El valor que asignemos al atributo será el que aparezca en el marcado de posición.

Veamos como sería el código:

 
<form id="formualario">
<label for="texto">Nombre: </label>
<input type="text" placeholder="Inserte su nombre" size="80" />
</form>
 

Y cual sería el resultado...

Aunque lo mejor es que cargues tu mismo la página web.

Hay que tener en cuenta una cosa, y es que el placeholder es un atributo de HTML5 y que solo está soportado por los últimos navegadores web. Así que no podremos tomarlo como algo obligatorio, si no opcional al usuario que entre con un navegador de última generación.

Cuando estamos diseñando una aplicación de ventanas mediante Swing con Java, uno de los componentes que seguro que nos aparece es el JTextField. Y es que el componente JTextField nos sirve para crear un input de datos en Java.

Lo primero que tenemos que hacer es crear un JFrame, el cual va a contener nuestro JTextField.

public class CrearJTextField extends JFrame {...}

Será en el constructor de la clase Java, en dónde definamos y añadamos al formulario nuestro componente JTextField.

El componente JTextField tiene un constructor que puede recibir dos parámetros. Por un lado el texto por defecto, por otro el número de caracteres que queremos que tenga dicho campo de entrada.

JTextField input = new JTextField("texto por defecto",20);

Ya solo nos quedará añadir el componente al contenedor para que se vea en el formulario. Tarea que llevaremos acabo mediante el método .add().

Veamos como quedaría el código Java del constructor:

CrearJTextField(){
  super("Crear un JTextField");
  JTextField input = new JTextField("texto por defecto",20);
  add(input);
}

En siguientes ejemplos de Java veremos como interactuar con este componente JTextField.