Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 191

Visitas el mes pasado: 220

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Formularios (V)

7.5 Otros campos

html

En este apartado veremos una serie de campos que pueden añadirse al formulario, tales como el botón de envio, el botón de borrado, botón para añadir archivos, etc.


Botón de envio

Es el único que es obligatorio, ya que todo formulario debe ser enviado a algun correo o página de procesamiento. su código HTML es el siguiente:

<input type="submit" value="texto">

la etiqueta y atributo input type="submit" es la que indica que éste es el botón de envio. El atributo value indica cual es el texto que incluiremos dentro del botón (normalmente "enviar", "pulsa para enviar" o algo parecido).

su aspecto es el siguiente:

En concreto este botón tiene el siguiente código:

<input type="submit" value="Enviar el formulario">


botón de borrado

Este botón sirve para borrar todos los campos del formulario y dejarlos en sus valores predeterminados. Caso de haberse equivocado, o querer cambiar algunos datos una vez relleno, el usuario puede pulsar este botón y volver a empezar a rellenarlo.

El código HTML de este botón es parecido al del anterior, lo único que cambia es el valor del atributo type el cual es reset. por tanto su código HTML será el siguiente:

<input type="reset" value="texto">

por tanto el texto que incluiremos en el valor del atributo value sera algo parecido a "Borrar" o "Borrar todo" ...

Su aspecto será el siguiente:

En concreto este botón tiene el siguiente código:

<input type="reset" value="borrar todo">


Envío de archivos adjuntos

Podemos pedir al usuario que nos envíe junto con el formulario un archivo adjunto, para ello usaremos el código input type="file" el atributo name también es imprescindible para poder recibir correctamente los datos: el código HTML de este tipo de campo será el siguiente:

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

y su aspecto será el siguiente:

Al pulsar sobre el botón "examinar" (o seleccionar en algunos navegadores) se abrirá el cuadro de Windows para buscar archivos, buscaremos y elegiremos el archivo, y al hacer clic en "abrir" tendremos el archivo seleccionado para mandarlo. En algunos navegadores aparece un cuadro de texto a la dereccha del botón en el que podemos escribir directamente la ruta del archivo.

al incluir un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la etiqueta <form> del formulario. El valor del atributo enctype en este caso debe ser multipart/form-data; por tanto la etiqueta form para poder adjuntar un archivo debe tener el siguiente aspecto:

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


campos ocultos

En algunos casos, aparte de los datos enviados por el usuario, puede resultar útil enviar datos definidos por nosotros mismos que ayuden al programa a procesar el formulario. Este tipo de datos, que no se muestran en la página pero son detectados en el código fuente, no suelen utilizarse en páginas construidas en HTML, son usados por páginas que emplean otro tipo de programas para procesar los datos. Aquí sólo queremos que se sepa que existen. He aquí un ejemplo de su código:

<input type=hidden name="sitio" value="http://aprende-web.net/">

El usuario ignora que existe este tipo de campo, ya que no se ve en pantalla. su código HTML lleva siempre el atributo type=hidden, que es el que indica que éste es un campo oculto. Por lo demás no suelen utilizarse si sólo se emplea el código HTML, ya que suelen enlazar con otro tipo de programas para procesar y guardar los datos de forma automatizada.


Botones normales

Dentro de un formulario podemos poner un botón que por sí solo no tiene mucha utilidad mediante el código input type="button". Sin embargo este botón puede servirnos si usamos el código de javascript. Su aspecto es similar al de los botones de envio y borrado. Como en éstos, el atributo value indica el texto que introducimos en el botón:

El código de el botón anterior es el siguiente:

<input type="button" value="botón normal" name="boton1">

El atributo value indica el texto que veremos en el botón. Por otra parte debemos insertar el atributo name para enlazar con el código javascript u otro tipo de programas que den utilidad a este botón.


Botones de imagen

Podemos personalizar el aspecto de un botón utilizando una imagen. El código es el siguiente:

<input type="image" name="boton2" src="ruta_de_la_imagen">

Al igual que en los botones normales, estos botones no tienen utilidad si no es enlazandolos con otro tipo de código como javascript u otros lenguajes de programación.

El atributo src indica la ruta a seguir hasta la carpeta y archivo donde está la imagen, se utiliza de la misma manera que en las imágenes normales. Al igual que en éstas, podemos incluir un atributo alt con un texto alternativo en caso de que no se vea la imagen.

Un ejemplo sería el siguiente:

cuyo código HTML será el siguiente:

<input type="image" name="boton2" src="objetos/internet2.jpg" alt="Pulsa aquí"/>


Ejemplo de formulario completo:

A continuación daremos un ejemplo de formulario en el que se incluirán la mayoría de los campos vistos en esta lección. Es simplemente eso, un ejemplo,

Ver ejemplo de formulario completo:

ejemplo de formulario





Con lo visto hasta ahora se pueden crear muchos tipos de formularios. No obstante podemos mejorar el aspecto del formulario mediante otra serie de etiquetas: esto lo veremos en la siguiente página:

Formularios avanzados



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com