Inicio
Software
Programación
HTML Programación - PHP (ini) Programación - PHP POO Programación - PHP / HTML SQL Java
Hardware
Desarrollos
Quién soy Mapa del sitio

HTML - 11va Entrega formularios web

Imprimir
Categoría: HTML
Escrito por Ch4rl1X Visitas: 1738

Les traigo con esta 11va entrega los formularios webs parte fundamental de nuestro sitio web. Básicamente sirven para enviar datos hacia algún lugar para que se procese. Nos vamos a centrar en su composición y en como mostrar los datos.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Formularios</title>
<meta name="description" content="Como formularios.">
<meta name="keywords" content="Formularo, form, fieldset, legend">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<form action="procesar.php" method="post" enctype="text/plain">
<fieldset>
<legend>Formularios webs</legend>
      <fieldset>
	            <legend>Opciones especiales</legend>
                <!--Nombre-->
                <label for="nombre">Nombre:</label>
                <input name="nombre" id="nombre" type="text" size="10" maxlength="10">
                <!--Apellido-->
                <label for="apellido">Apellido:</label>
                <input name="apellido" id="apellido" type="text" size="20">
                <!--Contraseña-->
                <label for="contra">Contrase&ntilde;a:</label>
                <input name="contra" id="contra" type="password">
                
	  </fieldset>
	  <fieldset>
	            <legend>Datos personales</legend>
                <input type="checkbox" id="musica" name="musica"><label for="musica">M&uacute;sica</label>
                <input type="checkbox" id="deportes" name="deportes"><label for="deportes">Deportes</label>
                <input type="checkbox" id="pintura" name="pintura"><label for="pintura">Pintura</label>
                <hr>
                <input type="radio" id="opcion1" name="opciones" value="TV"><label for="opcion1">Prefiero ver <abbr title="Televisión">TV</abbr></label>
                <input type="radio" id="opcion2" name="opciones" value="libro"><label for="opcion2">Prefiero leer un libro.</label>
                <input type="radio" id="opcion3" name="opciones" value="consola"><label for="opcion3">Prefiero una consola de Video Juegos.</label>
                <!--Campo oculto-->
                <input type="hidden" id="pagina1" name="pagina1" value="Este formulario ha sido enviado desde la página 1">
	  </fieldset>
	  <fieldset>
	            <legend>Gustos personles</legend>
                <label for="dormir">Normalmente duermes por d&iacute;a:</label>
      <select name="dormir" id="dormir">
                <option value="Menos de 6 horas">Menos de 6 horas</option>
	            <option value="Entre 6 y 8 horas">Entre 6 y 8 horas</option>
	            <option value="Mas de 8 horas" selected="selected">Mas de 8 horas</option>
      </select>
      <hr>
      <select name="Razas de Animales" id="Razas">
               <optgroup label="Perros">
               <option value="Cockers">Cockers</option>
               <option value="Salchicha">Salchichas</option>
               <option value="Pastor Aleman">Pastor Aleman</option>
               </optgroup>
               <optgroup label="Gatos">
               <option value="Gato Monteus">Gato Montés</option>
               <option value="Gato Salchicha>">Gato Salchicha</option>
               </optgroup>
      </select>
	  <!-- textarea -->
	  <label for="comentarios">Observaciones</label>
	  <textarea name="comentarios" id="comentarios" rows="4" cols="10">Comentarios</textarea>
      </fieldset>
<input type="submit" value="Enviar">
<input type="reset" value="Restaurar">
</fieldset>
</form>

</body>
</html>

Para ser didácticos vamos a comentar todo el desarrollo del código anterior. Lo primero que hacemos para crear un formulario es empezar por la etiqueta <form> a la que le vamos a indicar que tiene que hacer el dicho, en el ejemplo todo el formulario va a parar a un procesador PHP que se llama procesar.php y envía los datos a través de POST y es todo con eso, lógicamente si nos desplazamos hasta el final del mismo vamos a encontrar la finalización </form> como ya bien debemos saber a estas alturas. Se continúa con la etiqueta <fieldset> que no tiene mucha importancia permite encapsular todo el contenido del formulario es el recuadrito que se muestra; si vemos el ejemplo el fieldset generalmente va acompañado de la etiqueta <legend> que en el recuadro permite establecer a modo de título lo que pongamos en ella. La etiqueta <label> hace que nos aparezca el nombre al costadito del cuadro de ingreso de texto. Para el caso las 2 etiquetas <input> "nombre" y "apellido" casi que son los mismos atributos... si prestan atención el formulario no tiene mucha lógica mostrándolo así... el ejemplo es simplemente para que abarquemos la mayor cantidad de aspectos. Se continúa con una etiqueta <input> con el atributo type="password" que es que nos permite visualizar la contraseña con puntitos cada vez que la ponemos, cerramos <fieldset> y parte del formulario hasta ahí. Abrimos nuevamente <fielset> para continuar con <input> pero aquí también tenemos otro atributo que es checkbox y radio (checkbox: el tilde de marca de opciones radio: te deja seleccionar una sola opción), si nos vamos al final de ésa sección vemos que hay un <input> también con el atributo type="hidden" que hago uso de esta opción que nos permite tener una etiqueta oculta en nuestro código, lo cual como muestra el value sirve para identificar que el formulario se envío desde allí, cerramos <fieldset>. Luego vemos el mismo esquema para abrir las etiquetas y creamos la etiqueta <option> que es lo que dice te permite seleccionar desplegando un cuadro de texto con las diferentes opciones que se le configuren si se fijan al final en la que dice "Más de 8 horas" tiene el atributo selected. A continuación se utiliza la misma etiqueta option, pero esta vez anidada lo que sería útil dependiendo del tipo de formulario que hagamos. Para finalizar creamos el famoso <textarea> y los botones con los atributos submit y reset fundamentales para el envío. Hasta aquí con eso, como se puede apreciar sólo es cuestión de práctica y no hace falta saberse de memoria todo el código sino tener un buen machete de donde sacar las etiquetas y saber como funcionan mecánicamente.

Resultado -> Click Aquí.

Espero que sirva, saludos, Ch4rl1X!