1. Introducción a
Formularios con
HTML

2. <DIV> … </DIV>
Se trata de un
contenedor que incluye
texto, imágenes, tablas, <div align=”center” >
etc. Lo que se encuentre Esto es una contenedor
entre las etiquetas <br />
<DIV> y </DIV> se <img src=”logo.png” />
considera una capa que </div
puede colocarse en
cualquier parte de un
documento HTML.

3. <FORM> </FORM>
● Indica al navegador <form method="post"
que empieza un action="mailto:webmaster@i
formulario. gnside.net">
............................
● Especifica valores del ............................
formulario (nombre, </form>
método de envío get
o post y acción)

4. <INPUT>
● Permite al usuario
introducir datos. <input type="text"
name="remitente"
● Podemos especificar value="alberto"
el tipo de entrada, size="35"
maxlength="10" >
nombre, valores,
tamaño...
● Hay diferentes
valores para type

5. type = “text”
● Especifica una caja
de texto. <input type="text"
● Password es otro name="remitente"
value=“escribe aquí"
valor de type, en la size="35"
que no se ve lo que maxlength="10" >
se escribe.

6. type = “hidden”
● Campo invisible para
el usuario, pero con <input type=“hidden"
name="remitente"
información útil para value=“alberto" >
el programador.

7. type = “checkbox”
● Las casillas de
verificación envian <input type=“checkbox"
name="moto" value="Si">
su valor solo si son Moto
seleccionadas <input type=“checkbox"
● Son casillas de name="coche" value="Si">
coche
selección múltiple.

8. type = “radio”
● Elegirá una única
<input type=“radio"
opción entre varias. name="tipoSexo"
● El valor de name de value="H">Hombre
los distintos radio de <input type=“radio"
name="tipoSexo"
la misma familia será value=“M">Mujer
el mismo.

9. type = “submit”
● Genera un botón que
al ser pulsado <input type="submit"
ejecutará la acción value="Enviar
consulta">
indicada en <form>.
● El texto que aparece
en el botón es el
especificado en value.

10. NO BORRA
type = “reset”
● Al ser pulsado <input type=“reset"
reinicializa el value=“Borrar">
contenido del
formulario
● El texto que aparece
en el botón es el
especificado en value.

11. <select> ..... </select>
● Ofrecerá una lista con <SELECT NAME="Colores"
MULTIPLE>
los valores que puede
..................
elegir el usuario.
</SELECT>
● Como atributos
tenemos name, size o
multiple.

12. <option>
● Con esta etiqueta <option value="r"> Rojo
definimos las </option> <option
value="v" selected>
distintas opciones Verde </option>
elegibles por el
usuario.

13. <Textarea>.... </Textarea>
● Definimos un espacio con
múltiples líneas donde el <textarea cols=20 rows=10
usuario podrá añadir un name=“texto” >
comentario. </textarea>
● podemos darle un nombre y
definir su tamaño con cols y
rows.

14. EJEMPLO 1

15. EJERCICIO PARA ENTREGAR
Formulario de Contacto
Crear un formulario en HTML que corresponda a un formulario de
Contacto 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 considere
Necesaria, utilizando los demás elementos de formularios.
Al pulsar el botón “Enviar”, mostrar una pagina con un mensaje de
Confirmación de envío del mensaje.
Puede incluir todos los elementos que desee incorporar (imágenes, links,
etc).