Formularios. La mayoría de los elementos de entrada son visuales y pueden interactuar con el usuario.

Transcripción

1 Formularios Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles....controles... Elementos de entrada (input) La mayoría de los elementos de entrada son visuales y pueden interactuar con el usuario. Entrada de texto Entrada de texto de línea <form method="post" action= mail.php"> <p>ingresa texto: <input name="textoentrada" type="text" /> Entrada de texto contraseña (password) <form method="post" action="manejador.php"> <p>ingresa contraseña: <input name="contrasena" type="password" /> Entrada de texto de múltiples líneas <p>ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...tus comentarios aquí...</textarea> Opciones Casillas de verificación <p>selecciona tus intereses:<br /> <input name="cbipeliculas" type="checkbox" />Películas<br /> <input name="cbilibros" type="checkbox" />Libros<br /> <input name="cbiinternet" type="checkbox" />Internet

2 Selectores de radio <form method="post" action="mailphp"> <p>selecciona tus intereses:<br /> <input name="intereses" type="radio" value="rbipeliculas" />Películas<br /> <input name="intereses" type="radio" value="rbilibros" />Libros<br /> <input name="intereses" type="radio" value="rbiinternet" />Internet Listas <p>selecciona una sola opción, como en los botones radio:<br /> <select name="entradaselect"> <optgroup label="entradas de texto"> <option>de una sola línea</option> <option>contraseña</option> <option>multilínea</option> </optgroup> <optgroup label="opciones"> <option>casillas de verificación</option> <option>botones radio</option> <option>listas select</option> </optgroup> </select> Botones Botones de envío Este tipo de botones envía automáticamente el formulario al ser presionados. Son insertados usando el tag HTML input con el valor "submit" para el atributo "type". Botones de reestablecimiento Este tipo de botones reestablecen los controles de un formulario a sus valores iniciales al ser presionados. Son insertados usando el tag HTML input con el valor "reset" para el atributo "type". Botones de imagen Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia de que lo los botones de imagen son mostrados visualmente con la imagen apuntada en el atributo "src". Son insertados usando el tag HTML input con el valor "image" para el atributo "type". Botones con contenido La entrada de archivos puede ser utilizada para subir archivos al servidor.

3 <form method="post" action="mail.php" enctype="multipart/form-data"> <p><input name="imagen" type="file" /> Etiquetas Etiquetando controles Las etiquetas pueden ser insertadas usando el tag HTML label y son asociadas al control mediante el atributo "for". Para lograr esto, el valor del atributo "for" del tag HTML label debe coincidir con el valor del atributo "id" del control. <label for="idnombre">nombre:</label> <input type="text" id="idnombre" name="nombre" /> Agrupando elementos El título para cada grupo de elementos puede establecerse con el tag HTML legend que debe ser definido justo a continuación del tag de apertura del fieldset, y proveer un título descriptivo para el grupo de controles. <fieldset> <legend>información laboral</legend> Dirección: <input type="text" name="ldireccion" /><br /> Teléfono: <input type="text" name="ltelefono" /> </fieldset> Tipos de contenido de formularios El atributo enctype del elemento FORM especifica el tipo de contenido usado para codificar el conjunto de datos del formulario para su envío al servidor. Los agentes de usuario deben soportar los tipos de contenido enumerados más adelante. El comportamiento para otros tipos de contenido queda sin especificar. Consulte también la sección sobre transformación del signo & en secuencias de escape para valores de atributos URI. application/x-www-form-urlencoded Este es el tipo de contenido por defecto. Los formularios enviados con este tipo de contenido deben codificarse como sigue: 1. Los nombres de control y los valores se transforman en secuencias de escape. Los caracteres de espacio se sustituyen por '+', y los caracteres reservados se transforman en secuencias de escape según se describe en [RFC1738], sección 2.2: Los caracteres no alfanuméricos se reemplazan por '%HH', un signo de porcentaje y dos dígitos hexadecimales que representan el código ASCII del carácter. Los saltos de línea se representan como parejas "CR LF" (es decir, '%0D%0A'). 2. Las parejas nombre de control/valor se enumeran según el orden en que aparecen en el documento. El nombre se separa del valor con un signo '=' y las parejas nombre/valor se separan entre sí con un signo '&'.

4 multipart/form-data El tipo de contenido "application/x-www-form-urlencoded" no es eficiente para enviar grandes cantidades de datos binarios o textos que contenga caracteres no ASCII. Para enviar formularios que contengan ficheros, datos no ASCII, y datos binarios debería utilizarse el tipo de contenido "multipart/form-data". El contenido "multipart/form-data" sigue las reglas de todos los flujos de datos MIME multiparte, como se esboza en [RFC2045]. La definición de "multipart/formdata" puede encontrarse en el registro [IANA]. Un mensaje "multipart/form-data" contiene una serie de partes, cada una de las cuales representa un control con éxito. Las partes se envían al agente procesador en el mismo orden en que aparecen los controles correspondientes en el flujo del documento. No deberían aparecer límites entre partes en ninguno de los datos; el modo en que se consigue esto queda fuera del alcance de esta especificación. Como con todos los tipos MIME multiparte, cada parte tiene un encabezado opcional "Content-Type" cuyo valor por defecto es "text/plain". Los agentes de usuario deberían proveer el encabezado "Content-Type", acompañado por un parámetro "charset". Se espera que cada parte contenga: 1. un encabezado "Content-Disposition" cuyo valor es "form-data". 2. un nombre de atributo que especifique el nombre de control del control correspondiente. Los nombres de control codificados originalmente con conjuntos de caracteres no ASCII pueden codificarse usando el método explicado en [RFC2045]. Así, por ejemplo, para un control llamado "micontrol", la parte correspondiente se especificaría así: Content-Disposition: form-data; name="micontrol" Como con todas las transmisiones MIME, se utiliza "CR LF" (es decir, '%0D%0A') para separar líneas de datos. Se puede codificar cada parte, pudiéndose proporcionar el encabezado "Content- Transfer-Encoding" si el valor de esa parte no es conforme con la codificación por defecto (7BIT) (ver [RFC2045], sección 6) Si se envían los contenidos de un fichero con un formulario, el fichero introducido debería identificarse con el tipo de contenido apropiado (p.ej., "application/octetstream"). Si deben enviarse varios ficheros como resultado de la entrada de un solo formulario, deberían ser enviados como "multipart/mixed" incluidos dentro del "multipart/form-data". El agente de usuario debería intentar proporcionar un nombre de fichero para cada fichero enviado. El nombre del fichero puede especificarse con el parámetro "filename" del encabezado 'Content-Disposition: form-data', o, en el caso de múltiples ficheros, en un encabezado 'Content-Disposition: attachment' de la subparte. Si el nombre del fichero del sistema operativo del cliente no está en US- ASCII, el nombre del fichero podría aproximarse o codificarse usando el método de [RFC2045]. Esto es conveniente, por ejemplo, en aquellos casos en que los ficheros subidos pudieran contener referencias cruzadas (p.ej., un fichero TeX y su descripción de estilo auxiliar ".sty").

5 El siguiente ejemplo ilustra la codificación "multipart/form-data". Supongamos que tenemos el siguiente formulario: <FORM action=" enctype="multipart/form-data" method="post"> <P> Cómo se llama? <INPUT type="text" name="nombre-envio"><br> Qué ficheros va a enviar? <INPUT type="file" name="ficheros"><br> <INPUT type="submit" value="enviar"> <INPUT type="reset"> </FORM> Si el usuario introduce "Saprissa" en la entrada de texto, y selecciona el fichero de texto "fichero1.txt", el agente de usuario podría enviar los datos siguientes: Content-Type: multipart/form-data; boundary=aab03x Content-Disposition: form-data; name="nombre-envio" Alfredo Content-Disposition: form-data; name="ficheros"; filename="fichero1.txt" Content-Type: text/plain... contenidos de fichero1.txt Si el usuario eligió un segundo fichero (una imagen) "fichero2.gif", el agente de usuario podría construir las partes de este modo: Content-Type: multipart/form-data; boundary=aab03x Content-Disposition: form-data; name="nombre-envio" Saprissa Content-Disposition: form-data; name="ficheros" Content-Type: multipart/mixed; boundary=bbc04y --BbC04y Content-Disposition: attachment; filename="fichero1.txt" Content-Type: text/plain... contenidos de fichero1.txt... --BbC04y Content-Disposition: attachment; filename="fichero2.gif" Content-Type: image/gif Content-Transfer-Encoding: binary...contenidos de fichero2.gif... --BbC04y-- --