El Mundo de Ubuntu

En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

Formulario - controles con valores iniciales.
Un control puede aparecer cargado con un valor por defecto. Veamos como inicializar con valores por defecto para cada uno de los controles que hemos visto.

Para inicializar un control de tipo text debemos dar un valor a la propiedad value:

<input type="text" value="aqui su nombre" name="nombre" 
size="20">

El control aparece cargado con la cadena "aqui su nombre".

Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y el fin de la marca:

<textarea rows="10" cols="40" name="curriculum">Ingrese 
aqui su curriculum</textarea>

El control textarea se inicializa con la cadena "Ingrese aqui su curriculum"

Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin asignar valor:

<input type="checkbox" name="java" checked>Opcion 1<br>

Con esto logramos que el checkbox aparezca tildado apenas aparece el formulario.

Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor, igual que un checkbox, con la salvedad que solo un un control de tipo radio puede tener definida esta propiedad:

<input type="radio" name="estudios" value="1" 
checked>Opción 1<br>

Para inicializar un control de tipo select con selección individual debemos definir la propiedad selected de los elementos option:

<select name="pais">
<option value="1">Argentina</option>
<option value="2" selected>España</option>
<option value="3">México</option>
<option value="4">Guatemala</option>
<option value="5">Honduras</option>
<option value="7">El Salvador</option>
<option value="8">Venezuela</option>
<option value="9">Colombia</option>
<option value="10">Cuba</option>
<option value="11">Bolivia</option>
<option value="13">Perú</option>
<option value="14">Ecuador</option>
<option value="15">Paraguay</option>
<option value="16">Uruguay</option>
<option value="17">Chile</option>
</select>

En este caso aparece seleccionado España, más alla que sea el segundo option en la lista.

Para inicializar un control de tipo select con selección múltiple debemos definir la propiedad selected de varios elementos option:

<select name="colores[]" size="4" multiple="multiple">
<option value="1" selected>Rojo</option>
<option value="2">Verde</option>
<option value="3" selected>Azul</option>
<option value="4">Amarillo</option>
<option value="5" selected>Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>

En este ejemplo los items Rojo,Azul y Blanco aparecen seleccionados desde un comienzo.

Confeccionaremos como ejemplo un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si),seguidamente el teléfono (cargar por defecto 453-) y por último en un textarea solicitar que ingrese comentarios.

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Es mayor de edad?:<br>
<input type="radio" name="radio1" checked 
value="si">Si<br>
<input type="radio" name="radio1" value="no">No<br>
Telefono:
<input type="text" value="453-" name="telefono" 
size="15"><br>
<textarea name="comentarios" rows="5" cols="40">Ingrese 
aqui sus comentarios</textarea><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Formulario - orden de foco de controles.

Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un valor entero entre 0 y 32767. Este número indica el orden en que los controles toman foco. Cuando se presiona la tecla tab el navegador pasa el foco al siguiente control.

Para probar el funcionamiento implementaremos un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Haremos que el foco sea por columna, es decir primero tomará foco el text de la primer fila y primer columna, luego del text de la segunda fila y primer columna etc (si no definimos la propiedad tabindex la carga de datos se efectua por fila):

<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7">
<br>
<input type="text" name="text4" size="5" tabindex="2">
<input type="text" name="text5" size="5" tabindex="5">
<input type="text" name="text6" size="5" tabindex="8">
<br>
<input type="text" name="text7" size="5" tabindex="3">
<input type="text" name="text8" size="5" tabindex="6">
<input type="text" name="text9" size="5" tabindex="9">
<br>
<input type="submit" value="enviar" tabindex="10">
</form>
</body>
</html>

Como podemos observar los valores definidos para la propiedad tabindex para la primer fila de controles text es:

<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7">

Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero si vemos los text por columna podremos observar que si van en forma secuencial.

Todos los controles de formularios pueden definir la propiedad tabindex para indicar el orden de activación o foco del control.

Formulario - Inhabilitar controles.

Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados.

Supongamos que disponemos 3 controles de tipo radio para indicar que sección del sitio deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una no está disponible. Esto lo resolvemos deshabilitando un radio:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione la sección donde desea ingresar:
<br>
<input type="radio" name="seccion" value="1" 
disabled>Niños<br>
<input type="radio" name="seccion" value="2">Adolescentes<br>
<input type="radio" name="seccion" value="3">Mayores<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Para deshabilitar el primer radio añadimos la propiedad disabled sin asignarle valor:

<input type="radio" name="seccion" value="1" disabled>Niños

Los siguientes elementos pueden inhabilitarse:

button, input, optgroup, option, select y textarea.

Esta propiedad tiene mucha aplicación si se aplica javascript en la página. Mediante javascript podemos luego de haber sido cargado el documento modificar el estado de los controles, habilitando y deshabilitando de acuerdo a los datos que carga el visitante al sitio.

Búsqueda personalizada

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales

<input type="submit" value="Enviar">
<input type="reset" value="Borrar">

Entre otras las ventanjas de este elemento es que podemos agregar imágenes dentro del botón.

La sintaxis de este elemento es la siguiente:

<button type="submit">
Texto a mostrar dentro del botón.
</button>

Todo lo que está contenido entre las marcas de comienzo y fin del elemento button aparece dentro del botón, como por ejemplo una imagen, un párrafo, enfatizado de una palabra etc.

La propiedad type se puede inicializar con alguno de estos tres valores: "submit", "reset" y "button". Los dos primeros cumplen las funciones que ya conocemos es decir envío de los datos al servidor y borrado del contenido de los controles. En cuanto al tercer valor posible de la propiedad type significará que deberemos codificar una función en javascript para procesar el evento.

Para ver el funcionamiento confeccionaremos un formulario que solicite el ingreso del nombre de una persona y dos elementos button para subir el dato al servidor o borrar el dato cargado:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/htmlya/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<button type="submit">Enviar<img src="/imagenes/enviar.gif" 
alt="envio"></button>
<button type="reset">Borrar<img src="/imagenes/borrar.gif" 
alt="borrado"></button>
</form>
</body>
</html>

Perfectamente podemos definir un texto y cargar una imagen dentro del botón:

<button type="submit">Enviar<img src="/imagenes/enviar.gif" 
alt="envio"></button>

Formulario - input type="file".

El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta del servidor.

Veamos la sintaxis para disponer un control de tipo file:

<input type="file" name="archi">

Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la propiedad type inicializamos con el valor file. Inicializar la propiedad name también es importante ya que mediante este nombre se lo recupera en el servidor.

Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form:

<form method="post" action="/registrardatos.php" enctype="multipart/form-data">

Con esto indicamos al navegador que el formulario almacena uno o más archivos que deben ser enviados al servidor.

Confeccionemos una página que solicite el ingreso de un nombre y la foto de la persona:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post" enctype="multipart/form-data">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione la foto:
<input type="file" name="foto">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Recordemos siempre inicializar la propiedad enctype del elemento form:

<form action="/registrardatos.php" method="post" enctype="multipart/form-data">

Tenga en cuenta que si no se hace nigún programa en el servidor el archivo no se almacena.
-->

Formulario - input type="hidden.

Un campo hidden se lo denomina campo oculto. Este tipo de control no visualiza nada dentro del formulario.

Su utilidad se presenta cuando desde el servidor se genera una página dinámica por ejemplo mediante PHP y se almacena en un campo oculto un valor que se rescatará al subir el formulario al servidor.

Su utilidad real solo podrá ser comprendida cuando estudie un lenguaje de servidor, pero veamos y conozcamos su sintaxis con un ejemplo.

Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto almacene una hora cualquiera:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<input type="hidden" value="10:20" name="hora">
Ingrese su nombre:
<input type="text" name="nombre" size="30">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Como vemos la sintaxis para definir un campo oculto es:

<input type="hidden" value="10:20" name="hora">

En el atributo value almacenamos el valor (este valor no se puede modificar desde el formulario)

Podemos imaginar una utilidad, supongamos que queremos que un visitante reenvíe un formulario cargado con todos los datos en un tiempo limitado, podríamos almacenar en el campo oculto la primera vez que solicita la página que contiene el formulario donde se resgistrará dicha hora. Luego al subir el formulario ya cargado al servidor controlaremos mediante un lenguaje de servidor si la hora actual y la hora de pedido del formulario no hacen invalidar los datos.

Formulario - agrupamiento de controles.

El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario.

Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y </fieldset>. Además para agregar un título a este recuadro debemos agregar otro elemento HTML llamado legend.

Confeccionemos un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos los dispondremos en un fieldset:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Documento de identidad:
<input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
Dirección:
<input type="text" name="direccionpersona" size="30"><br>
</fieldset>
<fieldset>
<legend>Datos Laborales</legend>
Nombre de la empresa:
<input type="text" name="nombreempresa" size="30"><br>
Actividad:
<input type="text" name="actividad" size="50"><br>
Dirección:
<input type="text" name="direccionempresa" size="30"><br>
</fieldset>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Podemos ver que cada grupo de controles está encerrado con el elemento fieldset:

<fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Documento de identidad:
<input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
Dirección:
<input type="text" name="direccionpersona" size="30"><br>
</fieldset>

Luego el título de cada fieldset lo disponemos con:

<legend>Datos personales</legend>

Búsqueda personalizada

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales

En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

Formulario - select (cuadro de selección múltiple).

Una variante del cuadro de selección que vimos en el concepto anterior es permitir que el visitante del sitio pueda seleccionar varias opciones.

Supongamos que tenemos un cuadro de selección con una lista de colores y queremos que el visitante pueda elegir varios y no uno solo.

La página que resuelve este problema es:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br>
<select name="colores[]" size="4" multiple>
<option value="1">Rojo</option>
<option value="2">Verde</option>
<option value="3">Azul</option>
<option value="4">Amarillo</option>
<option value="5">Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Podemos observar la sintaxis para la definición de un cuadro de selección múltiple:

<select name="colores[]" size="4" multiple>

Definimos una propiedad llamada multiple y no le asignamos valor, por otro lado al nombre definido en la propiedad name le agregamos al final los caracteres [] para que desde el servidor podamos identificar que el control retorna posiblemente muchos valores.

Es también común inicializar la propiedad size con un valor mayor a 1 para que sea más fácil la selección.

La mayoría de los navegadores permiten seleccionar opciones que no se encuentran juntas mediante el mouse y presionando simultáneamente la tecla Ctrl.

Formulario - select (agrupamiento de opciones).

Hemos visto que podemos crear cuadros de selección individual o de selección múltiple. Ahora veamos que podemos agrupar las opciones que tiene el cuadro de selección, esto tiene sentido si el cuadro de selección tiene muchos items.

Se cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de elementos option.

Veamos un ejemplo de agrupar una serie de opciones, agruparemos una serie de frutas y verduras:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione una fruta o verdura:
<select name="articulo">
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3>Sandia</option>
<option value="4">Frutilla</option>
<option value="5">Durazno</option>
<option value="6">Ciruela</option>
</optgroup>
<optgroup label="Verduras">
<option value="7">Lechuga</option>
<option value="8">Acelga</option>
<option value="9">Zapallo</option>
<option value="10">Papas</option>
<option value="11">Batatas</option>
<option value="13">Zanahorias</option>
<option value="14">Rabanitos</option>
<option value="15">Calabaza</option>
</optgroup>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Como podemos observar para agrupar una serie de opciones dentro de un select debemos encerrarlas con el elemento optgroup:

<optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup>

La propiedad label del elemento optgroup aparece dentro del control select pero no se puede seleccionar, es un título.

La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del select.

Se puede hacer agrupamiento de opciones y permitir selecciones múltiples.

Formulario – button.

El elemento button es un control visual que se puede utilizar para sustituir los controles:

<input type="submit" value="Enviar">
<input type="reset" value="Borrar">

Entre otras las ventanjas de este elemento es que podemos agregar imágenes dentro del botón.

La sintaxis de este elemento es la siguiente:

<button type="submit">
Texto a mostrar dentro del botón.
</button>

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/htmlya/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<button type="submit">Enviar<img src="/imagenes/enviar.gif" 
alt="envio"></button>
<button type="reset">Borrar<img src="/imagenes/borrar.gif" 
alt="borrado"></button>
</form>
</body>
</html>

Perfectamente podemos definir un texto y cargar una imagen dentro del botón:

<button type="submit">Enviar<img src="/imagenes/enviar.gif" 
alt="envio"></button>

Búsqueda personalizada

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales

En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

Formulario - input type="checkbox"
El elemento checkbox es otro control que se puede insertar en un formulario. Un checkbox es una casilla de selección que puede tomar dos valores (seleccionado/no seleccionado)

Para ver su funcionamiento implementaremos un formulario que solicite el ingreso del nombre de una persona y 4 elementos de tipo checkbox para que seleccione los lenguajes de programación que conoce:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione los lenguajes que conoce:
<br>
<input type="checkbox" name="java">Java<br>
<input type="checkbox" name="cmasmas">C++<br>
<input type="checkbox" name="c">C<br>
<input type="checkbox" name="csharp">C#<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Veamos la sintaxis para definir controles de formulario de tipo checkbox:

<input type="checkbox" name="java">Java<br>

Como vemos también utilizamos el elemento HTML input, donde inicializamos la propiedad type con el valor checkbox.

Un control checkbox no muestra texto, solo una casilla que el operador puede tildar o destildar.

Si queremos que aparezca un mensaje junto al checkbox solo lo agregamos seguido al elemento input.

Es importante hacer notar que los caracteres permitidos de la propiedad name son los caracteres alfabéticos y los números siempre y cuando no sea el primero.

Formulario - input type="radio"

Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada debemos emplear controles visuales de tipo radio.

Para definir controles de tipo radio también utilizamos el elemento input inicializando la propiedad type con el valor "radio"

Veamos un ejemplo del empleo de este control gráfico, supongamos que necesitamos indicar el tipo de estudios que tenemos utilizando controles de tipo radio:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione el máximo nivel de estudios que tiene:
<br>
<input type="radio" name="estudios" value="1">Sin 
estudios<br>
<input type="radio" name="estudios" value="2">Primario<br>
<input type="radio" name="estudios" value="3">Secundario<br>
<input type="radio" name="estudios" value="4">Universitario<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Veamos como se definen los controles de tipo radio:

<input type="radio" name="estudios" value="1">Sin 
estudios<br>
<input type="radio" name="estudios" value="2">Primario<br>
<input type="radio" name="estudios" value="3">Secundario<br>
<input type="radio" name="estudios" value="4">Universitario<br>

Como podemos observar todos tienen el mismo valor en la propiedad name, con esto se logra que cuando seleccionamos uno se deseleccione el actual.

El valor que se rescata en el servidor es el dato almacenado en la propiedad value.

Si queremos disponer varios grupos de controles de tipo radio debemos definirles a cada grupo la propiedad name nombres distintos.

Formulario - select (cuadro de selección individual).

El elemento select es un cuadro de selección.

Este elemento HTML nos permite seleccionar una opción entre un conjunto. Veremos en el concepto próximo que según como la configuramos podemos seleccionar varias opciones.

Veamos con un ejemplo como crear un control de tipo select. Confeccionemos un formulario que solicite cargar el nombre de una persona y el pais donde vive, este último elemento mediante un control de tipo select permitir seleccionar el pais.

El archivo pagina1.html es:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione su pais:
<select name="pais">
<option value="1">Argentina</option>
<option value="2">España</option>
<option value="3">México</option>
<option value="4">Guatemala</option>
<option value="5">Honduras</option>
<option value="7">El Salvador</option>
<option value="8">Venezuela</option>
<option value="9">Colombia</option>
<option value="10">Cuba</option>
<option value="11">Bolivia</option>
<option value="13">Perú</option>
<option value="14">Ecuador</option>
<option value="15">Paraguay</option>
<option value="16">Uruguay</option>
<option value="17">Chile</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Veamos la sintaxis para crear un cuadro de selección, primero abrimos la marca select la cual tiene definido la propiedad name:

<select name="pais">

Luego sin cerrar el select definimos tantos elementos de tipo option como opciones tendrá el cuadro de selección:

<option value="1">Argentina</option>
<option value="2">España</option>
<option value="3">México</option>

El elemento option define el texto a mostrar y en la propiedad value indica el valor a enviar al servidor en caso de estar seleccionada dicha opción.

Luego de definir todas las opciones de nuestro cuadro de selección cerramos la marca select:

</select>

Una variante gráfica de este control es inicializar la propiedad size del elemento select con un valor distinto a uno, con esto creamos un cuadro de selección que muestra simultáneamente varios elementos (de todos modos solo uno se puede elegir)

Es decir que con la propiedad size solo logramos un cambio estético del control.

Búsqueda personalizada

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales