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 – 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>
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:
0 comments:
No insertes enlaces clicables, de lo contrario se eliminará el comentario. Si quieres ser advertido via email de los nuevos comentarios marca la casilla "Notificarme". Si te ayudé con la publicación o con las respuestas a los comentarios, compártelo en Facebook, Twitter, Tumblr, Google +, Pinterest o Instagram. Gracias.