9. Formularios

El formulario sólo sirve para recopilar información del usuario, y esta información es procesada por un programa no documental; específicamente, los programas llamados CGI (Common Gateway Interface).

Estos programas realizan varias tareas, incluyendo:

· Comprobar y manipular datos.

· Almacenar datos en un archivo o base de datos.

· Reenviar los datos por correo electrónico.

· Leer los datos y devolver un resultado al usuario.

Los formularios, dentro de las presentaciones web, permiten al visitante solicitar información. Estos formularios tendrán un área de información que queremos obtener. Una vez que ingrese los valores en estos campos, toda esta información se enviará a una URL que será procesada o procesada a través de un script.

Hay varias maneras de crear estos programas, pero lo más común es usar un lenguaje de programación para crear un script en el servidor. Los idiomas más utilizados son: C, Perl, Java, ASP y especialmente PHP.

La tabla siguiente enumera las etiquetas más comunes que podemos utilizar al hacer un formulario.

<form>

Definición: puede introducir un formulario en un documento. La declaración de formularios es recibida por las etiquetas <form> ..... </ form>, que incluirán todas las variables de entrada. ¡Cuidado! Los campos de formulario de entrada deben aparecer en los márgenes de párrafo <p> ... </ p>, de lo contrario validar la validación del W3C. Apariencia: se requieren etiquetas iniciales y finales.

Atributos: %attrs, action, method, enctype, accept, accept-charset, name, target, onsubmit, onreset.

• action: indica la URI del programa que se ocupa del procesamiento de datos de formularios.

(Ejemplo: action=”registro/registrocliente.php”)

• method: indica el método utilizado para pasar los datos al programa (get | post).
• enctype: indica el tipo de contenido utilizado para enviar datos.

(method=”post”).

• accept: una lista de tipos de contenido aceptados por el servidor.

(Permite filtrar tipos de archivos inaceptables)).

• accept-charset: codificación de los caracteres utilizados para los datos.
• onsubmit: Ejerza una acción al enviar el formulario.
• onreset: funciona para una acción cuando se restablece el formulario

<form>

Es una etiqueta de bloque. En el interior, podemos incluir cualquier elemento que pueda existir en una página web (párrafos, imágenes, divs, listas, tablas, etc.), aparte de las etiquetas utilizadas para crear controles.

Las etiquetas para crear controles son: <input />, <button>, <select>, <optgroup>, <option>, <textarea>. Además, se pueden estructurar usando <fieldset> y <legend>. Por último, la etiqueta de control es facilitada por la etiqueta <label>.

Ejemplo:

Adibidea:

<input>

Definición: insertar un elemento definido a través del 'tipo' dentro del formulario. Apariencia: sin etiqueta de cierre (V)

Atributos: %attrs, type, name, value, size, maxlenght, checked, src, alt, disabled, readonly, usemap, ismap, tabindex, acceskey, onfocus, onblur, onselect, onchange, accept (align gaitzetsia).

- type: indica el control del formulario

(text | password | checkbox | radio | submit | reset | file| hidden | image | button).

<input type="text">

Ejemplo

<form action="kautotu.php">

<p>

<label>Nombre:</label>

<input type="text" name="nombre" /><br >

<label>Apellidos:</label>

<input type="text" name="apellidos" >

</p>

</form>

Ejemplo

<form>

<p>

<input type="radio" name="sexo" value="hombre" checked>hombre<br>

<input type="radio" name="sexo" value="mujer"> Mujer<br>

<input type="radio" name="sexo" value="otro"> Otro

</p>

</form>

<input type="checkbox" />

El campo se selecciona marcando una casilla con varias opciones.

value = "" se muestra entre comillas. Cuando recibimos correo electrónico, seleccionamos el valor que recibiremos en la variable que aparece en el atributo name si seleccionamos la casilla correspondiente. En nuestro caso el juego1 = sí

checked = "" si lo colocamos, el cuadro aparecerá marcado por defecto.

<p> Se ha establecido ... <br />

<input type = "checkbox" nombre = "juego1" id = "juego1" value = "si" checked />

<label for = "juego1"> Piratas del Caribe </label>

<input type = "checkbox" nombre = "juego2" id = "juego2" value = "yes" />

<label for = "juego2"> Harry Potter </label>

</p>

Ejemplo

<p> Las mejores películas: <br />

<input type = "radio" nombre = "película" id = "sw_hope" value = "esperanza" checked >

<label for = "sw_hope"> Nueva Esperanza </label>

<input type = "radio" name = "película" id = "sw_empire" value = "empire" >

<label for = "sw_empire"> El Imperio Contraataca </label>

<input type = "radio" nombre = "película" id = "sw_jedi" value = "jedi" >

<label for = "sw_jedi"> El Retorno del Jedi </label>

</p>

<input type="submit">

Ejemplo

<form action="accion.php">

<label>Nombre:</label><br >

<input type="text" name="nombre" value="Periko"><br >

<label>Apellidos:</label><br >

<input type="text" name="apellido" value="Solabarria"><br ><br >

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

</form>

- name: nombre de control. Derivado para enviar datos.

- size: Establece el ancho del control en píxeles o caracteres.

- maxlength: Establece el número máximo de caracteres para el control de tipo texto o contraseña.

- checked: casilla de verificación para checkbox o radiobutton.

- src: type = La "imagen" representa el URI del lugar donde está la imagen

- disabled: Este booleano desactiva el control y no puede acceder a los datos.

- readonly: Este booleano impide que los usuarios realicen cambios en el control.

- accept: MIME Lista válida, cargar archivos.

- value: · En los cuadros de texto, es el valor inicial que se muestra en el cuadro. · En los botones de radiobuttom y checkbox, el valor se envía al servidor. · Botón de acción (submit / reset), título del botón. Pero, ¿qué hacen los atributos id y name? id = "nombre" Identifica de forma única la variable del documento. No hay ningún otro identificador idéntico en todo el documento XHTML. Utilizaremos principalmente la etiqueta CSS3 y <tag>. name = "nombre" Damos un nombre a la variable para que podamos llegar al email: nombre = seremos el texto que escribimos en el área de texto. En cualquier caso, y para evitar problemas, siempre es mejor tener los mismos valores de nombre e id. Por ejemplo, si solicitamos un correo electrónico de URL:

<input type="text" name="url" id="url" size= "30" maxsize= "255" value = "http ://" />

title, <a> etiqueta funciona paracido

<input type = "password" name = "pass" id = "pass" />

type="password" El campo para ingresar es una contraseña. Mostrará asterisco en lugar de letras Los atributos de esto serán los mismos que el texto. Ten cuidado! No se ve cuando se accede a la contraseña, pero eso no significa que se enviará cifrado.

Cómo etiquetar los campos de entrada Podemos hacerlo así:

<p> Nombre :

<br />

<input type="text" name ="nombre" id ="nombre" size="50" />

</p>

Malentendido: Podemos tener problemas con los navegadores no gráficos.

<label>

Definición: se utiliza para dar un título a un control. Esta etiqueta conecta el texto con los nombres de campo. Tiene un atributo único, para lo cual debemos insertar el id del id.

Apariencia: se requieren etiquetas iniciales y finales.

Atributos: %attrs, for, acceskey, onfocus, onblur.

- for: Especifica el nombre de otro control; específicamente, el control como letrero. (Concuerda con el atributo de id de control asociado)

<p>

<label for="nombre" >Nombre: </label>

<br />

<input type="text" name="nombre" id="nombre" size="50" >

</p>

Ejemplo:

<body> <form action="gerente.html" enctype="multipart/form-data" method="post"> <p> <label for="usuario">USUARIO:</label> <input type="text" name="usuario" id="usuario" value="usuario" > <br > <label for="contr" >CONTRASEÑA:</label><input type="password" name="contr" id="contr" > <br > <label for="socio" >SOCIO:</label> <input type="checkbox" name="socio" id="socio" checked > <br > <label >SEXO:</label> <input type="radio" name="genero" value="m" ><strong>Masculino</strong> <input type="radio" name="genero" value="f"><strong>Femenino</strong><br > <label>AFICIONES:</label><br > <input type="radio" name="aventura" value="a" >Acción<br > <input type="radio" name="historioa" value="h" >Historia<br > <input type="radio" name="ficcion" value="fi" >Ficción<br > <label for="descuento">DESCUENTO:</label> <input name ="descuento" id="descuento" value="15%" size="5" readonly> <br > <label for="foto">FOTO:</label> <input type="file" id="foto" name="foto" accept="application/x-zip-compressed" > <br > <input type="hidden" name="data" value=""> <br> <input type="submit" value="enviar" > <input type="reset" value="reset" > <input type="button" value="salir" onclick="window.close();"> </p> </form> </body>

El valor de control de tipo de texto predeterminado es "usuario". Los controles de contraseñas colocan símbolos en lugar de los caracteres que el usuario ingresa, ocultándolos. La casilla de verificación o la casilla de verificación controlan sólo la marca del atributo marcado. Sin embargo, el usuario puede desmarcarlo. Los botones de radio de primera clase tienen el mismo nombre (nombre = "género"); Así que son exclusivos entre sí, y el usuario puede marcar uno de ellos. El segundo tipo de botones de botones de radio tienen nombres diferentes; de modo que se pueden seleccionar más de uno al mismo tiempo. El check tiene un atributo readonly; Como resultado, el usuario no puede cambiar su valor. El control de archivo controla un botón para realizar una búsqueda en el disco del archivo que se enviará al formulario. El atributo Enctype debe estar definido. El control oculto no se ve en el formulario; por lo que el usuario no lo percibe. El propósito de este control es enviar al servidor algunos datos que son inutilizables para el cliente. Por ejemplo, cuando enviamos el formulario anterior, podemos enviar la fecha y la hora junto con el resto de la información, sin ver expresamente al usuario. Para obtener la fecha y hora del sistema, debe crear un script para el idioma del cliente (por ejemplo, Javascript) y cambiar el atributo de valor de control oculto. Por otro lado, el control está oculto del usuario, pero esto no significa que se envíe de forma segura. Si no usamos un protocolo seguro (como HTTPS), todos los datos se enviarán sin cifrado. El control Submit envía los datos del formulario al URI especificado en el atributo action. El control Reset recupera los valores predeterminados para todos los controles. El control Button define un botón genérico para vincular una acción específica a través de un script de subproceso; Por ejemplo, cierre la ventana de formulario.

<button type="submit">

<img src="fotos/bidali.jpg">

</img></button>

Ejemplo 2

<button type="button" onclick="alert('Hola Mundo!')">Haz click encima mío!</button>

<select>

Definición: Inserta un menú de formulario con varias opciones.

Apariencia: se requieren etiquetas iniciales y finales.

Atributos: %attrs, name, size, multiple, disabled, tabindex, onfocus, onblur, onchange

- size: Especifica el número de listas que se visualizan al mismo tiempo en el menú.

- multiple:Este booleano le permite seleccionar varias opciones.

<option>

Definición: expresa cada opción en un menú de formulario Apariencia: la etiqueta final es opcional. Atributos: %attrs, selected, disabled, label, value.

- selected: Este booleano indica que la opción está preseleccionada.

- label: Especifica un título para la opción del menú.

<optgroup>

Definición: Definir grupos de opciones. Apariencia: se requieren etiquetas iniciales y finales. Atributos: %attrs, disabled, label.

<select>.....</select> Las etiquetas reciben los valores que podemos seleccionar de una lista. Estos son los atributos con la etiqueta de apertura:

<p>

<label for = "film" > Pelicula: </label>

<br >

<select name = "film" id="film" >

<option value = "hope" >A New Hope </option>

<option value = "empire" > The Empire Strikes Back </option>

<option value = "jedi" selected> The Return of the Jedi </option>

</select >

</p>

<textarea>

Definición: integra un cuadro para insertar varias líneas de texto.

Apariencia: se requieren etiquetas iniciales y finales.

Atributos: %attrs, name, rows, cols, disabled, readonly, tabindex, acceskey, onfocus, onblur, onselect, onchange.

- rows: indica el número de líneas vistas en el texto.

- cols: Indica el ancho de la caja en caracteres.

• name="" Nombre del campo
• id="" Identificador de campo
• cols="" El número de columnas del texto visible
• rows="" Número de filas de texto visible

<p>

<label for="titulo">Comentarios?</label>

<br />

<textarea name = "comentario" id="comentario" cols ="35" rows="10" >

Escribe aqui tu comentario

</textarea>

</p>

<fieldset>

Definición: los controles y sus títulos pueden agruparse por temas.

Apariencia: se requieren etiquetas iniciales y finales.

Atributos: %attrs.

<legend>

Definición: asignar un campo a un conjunto de campos.

<form id="form2" method="post" action=""> <label for="se">Software seleccionado</label> <br/>

<select id="se" name="se">

<optgroup label="Sistema operativo">

<option value="GNU-Linux" selected>GNU-Linux</option>

<option value="Windows" >Windows</option> <option value="MacOS">MacOS</option>

<option value="BSD">BSD</option>

</optgroup>

<optgroup label="Navegadores">

<option value="Firefox" selected>Firefox</option>

<option value="Safari">Safari</option>

<option value="Opera">Opera</option>

<option value="Chromium">Chromium</option>

<option value="Internet Explorer" >Internet Explorer</option>

</optgroup>

</select>

</form>

<body>

<h1>STARFUERTE INDUSTRIAS</h1>

<table width="1000">

<tr>

<td>

<form action="gerente.html" method="post">

<fieldset>

<legend>FORMULARIO DE PETICIÓN</legend>

<table width="700" cellpadding="5">

<tr>

<td>

<strong> Paso 1. Identificación </strong>

</td>

<td>

<fieldset>

<legend>Datos del cliente</legend><br>

<label for="email">Dirección de correo</label>

<input type="text" id="email" size="20" maxlength="40">

<br><label for="pass">Contraseña</label>

<input type="password" id="pass" size="10" maxlength="30">

<br>(Minimo 6 carácteres)

</fieldset>

</td>

<td>

<fieldset>

<legend>Tipo de cliente</legend><br>

<input type="radio" id="particular" name="tipo" checked>

<label for ="particular">Particular</label><br>

<input type="radio" id="asociacion" name="tipo">

<label for ="asociacion">Asociación</label><br>

<input type="radio" id="empresa" name="tipo">

<label for ="empresa">Empresa</label>

</fieldset>

</td>

</tr>

</table>

<table width="980" cellpadding="5">

<tr>

<td>

<strong> Paso 2. Petición <br> </strong>

</td>

</tr>

<tr>

<td>

<fieldset>

<legend>Datos de producto</legend>

Productos<br>

<select id="producto" name="producto" multiple size="8">

<optgroup label="Armadura">

<option value="AR001" selected="selected">

AR001 Oro brillante

</option>

<option value="AR002">

AR002 Plata elaborada

</option>

<option value="AR003">

AR003 Bronce reforzado

</option>

</optgroup>

<optgroup label="Extras">

<option value="EX001" selected>

EX001 Oculto

</option>

<option value="EX002">

EX002 Invisibilidad

</option>

</optgroup>

</select>

</fieldset>

</td>

<td>

<fieldset>

<legend>Información interesante</legend>

Comentarios<br>

<textarea rows="6" cols="60">Escriba sus comentarios aquí

</textarea>

<br><input type="checkbox" id="publi" value="si" checked>

<label for="publi">Acepto recibir información de publicidad

</label>

</fieldset>

</td>

</tr>

</table>

<table width="980" cellpadding="5">

<tr>

<td>

<fieldset>

<legend>Datos</legend><br>

<label for="dire">Direccion</label>

<input type="text" id="dire" size="40">

<br><label for="localidad">Localidad</label>

<input type="text" id="localidad" size="20">

<label for="cp">Codigo postal</label>

<input type="text" id="cp" size="5">

</fieldset>

</td>

<td>

<fieldset>

<legend>Datos bancarias</legend><br>

<label for="entidad">Nombre del banco</label>

<input type="text" id="entidad" size="20"><br>

<label for="ncuenta">Numero de cuenta</label>

<input type="text" id="ncuenta" size="20">

</fieldset>

</td>

</tr>

<tr>

<td>

<button type="submit">ENVIAR<br>PETICIÓN</button>

</td>

<td>

<button type="reset">RESET</button>

</td>

</tr>

</table>

</fieldset>

</form>

</td>

</tr>

</table>

</body>

Galeria de formularios(Wufu): http://www.wufoo.com.mx/gallery/

http://www.phpform.org/

Para hacer formularios automaticos:

http://www.phpform.org/

http://wufoo.com/

http://www.flovv.com/

http://www.formassembly.com/index.php

http://www.jotform.com/

http://questionform.com/

http://www.formsite.com/

http://www.softonic.com/s/generador-formularios-web