Samuel Mesa Amariles 10-04 

  PLANEACIÓN Y CONSULTA FORMULARIOS HTML P2

 

 1.PLANEACIÓN DE SEGUNDO PERIODO

2

 2.EL DESPLIEGUE

 

¿Qué es un formulario html y para qué sirve?

 Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento.

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta Enviar los datos de un formulario más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).

Controles de texto

La etiqueta HTML <input> puede tomar varios valores diferentes en su atributo type para permitir al usuario introducir información de texto, además de otra etiqueta denominada <textarea> para cantidades de texto más grandes como varios párrafos.

Según nuestras necesidades, tendremos varias opciones:

Texto alfanumérico corto 

En primer lugar, si lo que queremos es guardar información de texto libremente, la opción más habitual es optar por utilizar el campo de entrada de datos <input type="text">. Este atributo es el que se utiliza en las etiquetas <input> por defecto si no indicamos ningún atributo type. Es un campo de texto ideal para fragmentos cortos de información: nombres, apellidos, direcciones físicas, etc...

En resumen, pequeños fragmentos de texto menores a un par de palabras.

Textos cortos específicos 

Por otro lado, en HTML se añaden nuevos tipos para etiquetas <input> como search, tel, url o email. Aunque la idea es la misma que un campo de texto y en principio no notaremos ningún cambio, estos campos específicos tienen como objetivo hacer más sencillo el proceso de introducción de datos por parte del usuario.

Si utilizamos tel en vez de text, al hacer clic en el campo del formulario desde un smartphone/tablet, se nos desplegará el teclado numérico en lugar del teclado habitual, lo que nos facilitará en gran medida escribir el dispositivo móvil, ya que la intención es utilizar sólo caracteres para números. Lo mismo ocurre con los campos de tipo email o url, ya que nos mostrará un teclado con botones especiales con @, .com u otros atajos rápidos

Campos para contraseñas 

La etiqueta <input> tiene el valor password en su atributo type para crear campos de texto orientados a almacenar información sensible como podrían ser contraseñas, claves o pins numéricos. Esto no lo convertiría en un campo más seguro técnicamente, sino que simplemente muestra puntos o asteriscos en lugar del texto visualmente, protegiéndolo visualmente de ojos ajenos.

Campos extensos de texto 

Por último, si queremos indicar un campo para escribir textos más extensos, lo más apropiado es utilizar la etiqueta <textarea>, que tiene también algunos atributos adicionales

Esta etiqueta nos permite añadir gran cantidad de texto, ya que las etiquetas <input type="text"> sólo nos permiten escribir una línea de texto y es muy incómodo si nuestra intención es escribir grandes cantidades de texto. Sus atributos cols y rows nos permiten aumentar el tamaño de ancho y alto, así como indicar si queremos que se modifique la apariencia visual del párrafo al enviar al formulario con el atributo wrap.

Comprobación de ortografía 

En todos estos campos, tanto etiquetas <input> como <textarea>, podemos utilizar un atributo denominado spellcheck mediante el cuál indicamos al navegador si debe revisar la ortografía del texto escrito en dicho elemento (en el cuál aparece una línea roja inferior cuando la palabra no se encuentra en el diccionario).

Campos de texto en una sola línea

El campo Línea simple de texto es un cuadro de texto sencillo que es muy útil para recopilar respuestas de una sola palabra y frases cortas.

Campos de texto multilínea

En este caso en lugar de usar <input..... usarmos la palabra mágica <textarea... que significa area de texto. Las características que le podemos indicar a un area de texto son, el nombre del objeto con name; la anchura del area donde el usuario puede escribir,con cols; la altura de ese area con rows y la palabra mágica wrap que veremos más adelante.

Un ejemplo de area de texto de varias líneas sería este código Html:

<textarea rows="10" cols="20" wrap="soft">Texto que aparece ya escrito de antemano</textarea>

Controles de Opción

Cuando quieras mostrar al visitante una lista de valores de entre los que tiene que elegir uno solo, tienes que usar botones de opción. Dentro del código Html que define este botón de opción tendrás que indicar cada uno de esos valores, claro.

Es importante que recuerdes que con este tipo de formulario el visitante SOLO puede escoger uno de los valores, es decir, es imposible activar dos o más valores. Si lo que quieres es dar la opción de que el visitante pueda seleccionar más de una de las opciones, tendrás que buscar otro modo, que explicaremos más adelante.

Veamos el código de un botón de opción de ejemplo para verlo más claro:

<INPUT type="radio" name="mibotondeopcion" checked value="1">Estudiante<br />
<INPUT type="radio" name="mibotondeopcion" value="2">Astronauta<br />
<INPUT type="radio" name="mibotondeopcion" value="3">Médico<br />
<INPUT type="radio" name="mibotondeopcion" value="4">Webmaster<br>

casilla de verificación

Una casilla de verificación es un pequeño cuadrado asociado a una opción que puede ser marcado o desmarcado por el usuario.

Una casilla puede encontrarse en dos situaciones: "marcada" ó "no marcada" ("checked" ó "unchecked"). Las casillas de verificación pueden ser agrupadas visualmente formando listas de opciones, pero cada una de ellas es tratada individualmente.

Este control es insertado mediante la etiqueta HTML input con el valor "checkbox" en su atributo "type". Inicialmente, la casilla aparece sin marcar a menos que se especifique lo contrario usando el atributo booleano (verdadero o false) "checked". Para hacer que una casilla aparezca inicialmente como casilla marcada escribiremos como atributo de la etiqueta input: checked="checked". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

Listas

Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número.

Los tipos de listas en HTML son los siguientes:

• Listas ordenadas

Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.

En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.

• Listas desordenadas

Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.

Si no le indicamos nada a la etiqueta <li> HTML, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.

Así podemos hacer que la lista esté definida por puntos negros (li type=”disc”), por puntos con el fondo blanco (li type=”circle”) o por cuadrados (li type=”square”). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.

• Listas de definiciones

Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:

La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición.

La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición.

Botones

button = botón.

Es el elemento crea botones marcadores.

La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando CSS.

Envío

Una vez que ya hemos construido nuestro formulario solo nos quedará una cosa, esta será enviar el formulario.

Para enviar el formulario deberemos de controlar dos cosas. Por un lado a dónde lo vamos a enviar, es decir, cual es la URL del programa destino (o página destino) que va a procesar los datos del formulario y que nos va a dar una respuesta. Por otro lado está el tipo de envío de los parámetros. En el caso del tipo de envío tenemos la posibilidad de hacerlo mediante un formato GET (con los datos visibles) o POST (con los datos no visibles).

Ambos elementos los configuraremos dentro del elemento form.

Para establecer el destino del formulario tenemos el atributo action. El atributo action tiene la URL de destino del formulario. La estructura del atributo action es:

<form action="url-destino"> … </form>

Las URL de destino suelen ser programas o código de servidor, ya sea Java, PHP, Node, ASP,… Los cuales recuperan la información del formulario, la manipulan y nos devuelven una nueva página HTML.

 Reinicio

El método HTMLFormElement.reset() restaura los elementos de un formulario a sus valores por defecto. Este método hace lo mismo que haciendo clic en el botón de restauración.

Si un control del formulario (como el botón de restaurar) tiene el nombre o un id de reset enmascarará el método de restauración del formulario. No restaura otros atributos del campo, como el de disabled.

document.getElementById('myform').reset();

Etiquetado de controles

 <label> representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label. Tal control es llamado "el control etiquetado" del elemento label.

• Categorias Contenido de flujo, contenido de fraseo, contenido interactivo, elemento de formulario asociado, contenido palpable.
• Contenido permitido Contenido de fraseo, pero no otros componentes label ni otros elementos etiquetables a parte del de control ya etiquetado.
• Omision del Tag None, both the starting and ending tag are mandatory.
• Elementos padre permitidos Cualquier elemento que acepte el contenido de fraseo.
• DOM interface HTMLLabelElement

Agrupación de controles

A veces, cuando un formulario es grande, la segmenctación podría jugar un rol en el mejoramiento de la organización y la facilidad de uso. Este es el motivo por el que HTML provee el elemento fieldset, el cual actúa como un contenedor de controles. Con este elemento, los autores pueden hacer divisiones al formulario y organizar los controles temáticamente.

Un grupo fieldset puede además tener un título para identificar la composición o el propósito del conjunto de controles que contiene. Este título puede ser provisto por el elemento legend, el cual debe ser declarado como primer hijo del grupo (fieldset). El siguiente ejemplo muestra un formulario pequeño dividido en dos grupos temáticos.

  

webgrafía 

https://lenguajehtml.com/html/formularios/controles-campos-de-texto/

https://www.mclibre.org/consultar/htmlcss/html/html-formularios.html

https://developer.mozilla.org/es/docs/Learn/Forms/Your_first_form 

https://help.wufoo.com/articles/es/kb/Single-Line-Text

https://comocreartuweb.com/curso-php-y-msql/que-es-un-formulario/campos-de-datos/campo-multilinea.html

https://comocreartuweb.com/curso-php-y-msql/que-es-un-formulario/campos-de-datos/botones-de-opcion.html

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=534:checkbox-y-radio-en-form-html-select-option-y-optgroup-multiple-listas-desplegables-opciones-cu00723b&catid=69&Itemid=192#:~:text=Casillas%20de%20verificaci%C3%B3n,-Una%20casilla%20de&text=Este%20control%20es%20insertado%20mediante,o%20false)%20%22checked%22.

http://www.manualweb.net/html/estructura-envio-formularios-html/

https://developer.mozilla.org/es/docs/Web/HTML/Element/label

https://developer.mozilla.org/es/docs/Web/API/HTMLFormElement/reset

https://www.htmlquick.com/es/tutorials/forms/3.html#:~:text=Agrupaci%C3%B3n%20de%20controles,-A%20veces%2C%20cuando&text=Un%20grupo%20fieldset%20puede%20adem%C3%A1s,hijo%20del%20grupo%20(%20fieldset%20).