Está en la página 1de 3

Guas HTML

2012

GUIA 5. Formularios parte 1


Doctype
Hasta ahora no hemos hablado de un concepto de vital importancia que es la utilizacin de
elementos HTML estndares.
La organizacin que define los estndares para la web es W3C.
Utilizar en lo posible las directivas de este comit de estndares nos traer como ventaja que
nuestras pginas en un futuro sigan vindose correctamente en las nuevas versiones de
navegadores.
Antes de la etiqueta HTML se declara
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Meta
El HTML permite a los autores especificar metadatos (Informacin sobre un documento ms
que contenido del propio documento).
Por ejemplo, la siguiente declaracin establece un valor para la propiedad Author:
<META name="Author" content="Dave Raggett">
La codificacin UTF-8 corresponde a un juego de caracteres universales, contiene signos de la
mayora de los lenguajes del mundo. Meta indispensable para solucionar problemas con
caracteres ilegibles en la paginas web.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Formulario - <form>
Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor.
Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar productos,
sacar turnos etc.
De todos modos veremos que el lenguaje HTML solo tiene el objetivo de crear el formulario.
El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta acti vidad est
delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.)
Confeccionaremos un formulario para el ingreso de nuestro nombre y un botn para el envo
del dato ingresado al servidor: <form></form>
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post"> //especifica pagina que procesa info.
Ingrese su nombre:
<input type="text" name="nombre" size="20">
// Crea una caja de texto
<br>

Gua 1 HTML. Elaborada por: Daniel Mora

Guas HTML

2012
<input type="submit" value="enviar">
</form>
</body>
</html>

// Crea botn de envi de info.

La propiedad action se inicializa con el nombre de la pgina que procesar los datos en el
servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacen en la raz de
este sitio una pgina codificada en PHP que recibe los datos del formulario y los imprime en
una nueva pgina
Para inicializar un elemento con un valor, especificar la propiedad value=?
Mas elementos de formulario:
<input type="password" name="clave" size="12">
password
<input type="reset" value="borrar">

//caja de texto con caracteres de

// Crea boton para limpiar form, va al fina l

<textarea name="comentarios" rows="5" cols="60"></textarea> // amplia para


comentarios
El elemento checkbox es otro control que se puede insertar en un formulario. Un
checkbox es una casilla de seleccin que puede tomar dos valores (seleccionado/no
seleccionado). Se pueden seleccionar varios.
<input
<input
<input
<input

type="checkbox"
type="checkbox"
type="checkbox"
type="checkbox"

name="java">Java<br>
name="cmasmas">C++<br> //Crea cuadro checkbox
name="c">C<br>
name="csharp">C#<br>

Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada
debemos emplear controles visuales de tipo radio. Todos tienen el mismo name.
<input type="radio"
estudios<br>
<input type="radio"
<input type="radio"
<input type="radio"

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

El elemento select es un cuadro de seleccin.


Este elemento HTML nos permite seleccionar una opcin entre un conjunto. Veremos
en el concepto prximo que segn como la configuramos podemos seleccionar varias
opciones.
<select name="pais">
<option value="1">Argentina</option>
<option value="2">Espaa</option>
<option value="3">Mxico</option>
</select>
Select (agrupamiento de opciones)
<select name="articulo">
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3>Sandia</option>

Gua 1 HTML. Elaborada por: Daniel Mora

Guas HTML

2012
<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>

Ejercicios
1. Confeccionar un formulario que solicite el ingreso del nombre de una persona y su
edad. Luego llamar a la pgina "/registrardatos.html" para que imprima en pantalla
los valores ingresados. Disponer un botn de tipo submit para el envo de los datos.
(La pagina registrardatos.html no procesa informacin, solo es informativa)
2. Confeccionar un formulario que solicite el ingreso de mail de una persona y luego
pida el ingreso de su clave dos veces (recordar inicializar la propiedad name del
elemento input con distintos nombres para cada control)
3. Confeccionar un formulario que permita ingresar el nombre de una persona, su mail,
su cc y finalmente su curriculum (este ltimo dato hacerlo utilizando un textarea).
4. Confeccione un formulario que solicite el ingreso de un mail, una clave y luego
muestre una serie de ttulos de pelculas con su respectivo checkbox. Disponer
tambin del botn de tipo submit para el envo de datos al servidor.
5. Confeccionar un formulario que solicite cual sistema operativo utiliza ms (linux o
window).
6. Confeccionar un formulario que solicite el ingreso del nombre de una persona y
permita votar el sitio. Mediante un cuadro de seleccin el visitante puede elegir entre
las siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.
7. Confeccione un control de tipo select con los nombres de pases de Amrica y Europa.
Agrupe los pases por continente.
8. Crear una pagina donde aplique todos los controles vistos. Ejemplo(Registro, reservas,
compras etc)

Gua 1 HTML. Elaborada por: Daniel Mora