Introducción a Formularios con

HTML

<DIV> … </DIV>

Se trata de un contenedor que incluye texto, imágenes, tablas, etc. Lo que se encuentre entre las etiquetas <DIV> y </DIV> se considera una capa que puede colocarse en cualquier parte de un documento HTML.

<div align=”center” >Esto es una contenedor<br /><img src=”logo.png” /></div

<FORM> </FORM>

● Indica al navegador que empieza un formulario.

● Especifica valores del formulario (nombre, método de envío get o post y acción)

<form method="post" action="mailto:webmaster@ignside.net">........................................................ </form>

<INPUT>

● Permite al usuario introducir datos.

● Podemos especificar el tipo de entrada, nombre, valores, tamaño...

● Hay diferentes valores para type

<input type="text" name="remitente" value="alberto" size="35" maxlength="10" >

type = “text”● Especifica una caja

de texto.● Password es otro

valor de type, en la que no se ve lo que se escribe.

<input type="text" name="remitente" value=“escribe aquí" size="35" maxlength="10" >

type = “hidden”

● Campo invisible para el usuario, pero con información útil para el programador.

<input type=“hidden" name="remitente" value=“alberto" >

type = “checkbox”

● Las casillas de verificación envian su valor solo si son seleccionadas

● Son casillas de selección múltiple.

<input type=“checkbox" name="moto" value="Si"> Moto

<input type=“checkbox" name="coche" value="Si"> coche

type = “radio”

● Elegirá una única opción entre varias.

● El valor de name de los distintos radio de la misma familia será el mismo.

<input type=“radio" name="tipoSexo" value="H">Hombre

<input type=“radio" name="tipoSexo" value=“M">Mujer

type = “submit”

● Genera un botón que al ser pulsado ejecutará la acción indicada en <form>.

● El texto que aparece en el botón es el especificado en value.

<input type="submit" value="Enviar consulta">

type = “reset”

● Al ser pulsado reinicializa el contenido del formulario

● El texto que aparece en el botón es el especificado en value.

<input type=“reset" value=“Borrar">

NO BORRA

<select> ..... </select>

● Ofrecerá una lista con los valores que puede elegir el usuario.

● Como atributos tenemos name, size o multiple.

<SELECT NAME="Colores" MULTIPLE>

..................</SELECT>

<option>● Con esta etiqueta

definimos las distintas opciones elegibles por el usuario.

<option value="r"> Rojo </option> <option value="v" selected> Verde </option>

<Textarea>.... </Textarea>

● Definimos un espacio con múltiples líneas donde el usuario podrá añadir un comentario.

● podemos darle un nombre y definir su tamaño con cols y rows.

<textarea cols=20 rows=10 name=“texto” > </textarea>

EJEMPLO 1

EJERCICIO PARA ENTREGARFormulario de Contacto

Crear un formulario en HTML que corresponda a un formulario deContacto de una pagina web.

Debe incluir: Nombre, email, teléfono, sección de interés de la Pagina web y comentario.

Debe agregarle 2 campos mas con información que Ud considereNecesaria, utilizando los demás elementos de formularios.

Al pulsar el botón “Enviar”, mostrar una pagina con un mensaje deConfirmación de envío del mensaje.

Puede incluir todos los elementos que desee incorporar (imágenes, links, etc).