Listas y tipos de listas HTML

Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
HTML pone a disposición distintos tipos de listas. A continuación, analizaremos cada uno de ellos.

Listas ordenadas

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:

<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>


En el ejemplo notamos cómo es posible omitir la marca <BR> para el salto de línea, dado que está automáticamente incluido en <LI>. Si no se establece diversamente (como veremos a continuación), el tipo de lista ordenada que el navegador visualiza está numerada (es decir, la lista consta de una serie de números que parte del 1 y va aumentando progresivamente). Las últimas versiones de HTML prevén la posibilidad de listas ordenadas que contengan un sistema de ordenación diverso del numérico antes citado:

Ordenación con letras mayúsculas:

<OL TYPE=A>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con letras minúsculas:

<OL TYPE=a>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con números romanos en mayúscula:

<OL TYPE=I>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con números romanos en minúscula (romanitos):

<OL TYPE=i>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Listas desordenadas

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.

Las listas desordenadas constan de una sola marca de apertura y cierre<UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es:

<UL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

Si no se especifica diversamente, cada voz del elenco va precedida de un símbolo geométrico.
Al igual que para las listas ordenadas, también en este caso podemos indicar diversos tipos de símbolos:

Los círculos sólidos de la lista anterior se obtienen con disc:

<UL TYPE=disc>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

El atributo circle imposta circunferencias:

<UL TYPE=circle>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

El atributo square imposta listas definidas por cuadrados sólidos:

<UL TYPE=square>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

Etiqueta input type HTML 5

Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input.

Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos que, sin dudas, nos van a hacer la vida más fácil a los desarrolladores de sitios web.

Así como actualmente tenemos el conocido password que oculta la contraseña con asteriscos o círculos (dependiendo del navegador); ahora contamos con el nuevo searchque presenta una pequeña cruz para poder borrar su contenido; o también el nuevo campo numérico number que muestra dos flechas (hacia arriba y hacia abajo) para aumentar o disminuir el valor del número.

Ejemplo.

<input type=“search” name=“busqueda”>

<input type=“tel” name=“telefono”>

<input type=“url” name=“url”>

<input type=“email” name=“correo”>

<input type=“datetime” name=“fechahora”>

Etiqueta input type

Etiqueta input type HTML 4

La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contener el formulario.

Sus atributos y valores son:

TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuación:

Text que sirve para introducir una caja de texto simple, y admite los parámetros:

name=" nombre", que asigna de forma unívoca un nombre identificador a la variable que se introduzca en la caja de texto.

maxlenght=" n ", que fija el número máximo de caracteres que se pueden introducir en la caja de texto.

size=" n ", que establece el tamaño de la caja de texto en pantalla.

value=" texto ", que establece el valor por defecto del texto que aparecerá en inicialmente en la caja de texto.

disabled, que desactiva la caja de texto, por lo que el usuario no podra escribir nada en ella.

accept = " lista de content-type", Indica el tipo de contenido que aceptara el servidor.

Ejemplo.

<form action="corpan@miservidor.com" method="post" enctype="text/plain" name="miform">
  marca tu equipo favorito:
  <input type="Radio" name="equipo" value= "madrid"checked>Real Madrid
  <input type="Radio" name= "equipo"value="atletico">Atlético de Madrid
  <input type="Radio" name= "equipo"value="barcelona">Barcelona
</form>

Formulacion Html 5

Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.

Ejemplo:

<div id="contact-form">  

   <h1>¡Contáctate con nosotros!</h1>

   <h2>Usa el formulario para acercarnos tu mensaje.</h2>  

   <p id="failure">Oops... Algo anduvo mal.</p>  

   <p id="success">Gracias, tu mensaje ha sido enviado correctamente.</p>  

   <form method="post" action="emailForm.php">  

      <label for="name">Name: <span class="required">*</span></label> 

      <input type="text" id="name" name="name" value=""placeholder="Your name" required="required" autofocus="autofocus" />  

         

      <label for="email">Email Address: <span class="required">*</span></label>  

      <input type="email" id="email" name="email" value=""placeholder="your@email.com" required="required" />  

         

      <label for="website">Website: </label>  

      <input type="web" id="webstie" name="website" value="" />  

         

      <label for="subject">Subject: </label>  

      <select id="subject" name="subject">  

         <option value="hello">I just want to say hello =]</option>

         <option value="quote">I'd like a quote</option>  

         <option value="general">General</option>  

      </select>  

         

      <label for="message">Message: <span class="required">*</span></label>  

      <textarea id="message" name="message" placeholder="Write your message here, please." required="required"></textarea>  

           

      <input type="submit" value="Send away!" id="submit" />

   </form>  

</div>

Formulacion Html 4

Un formulario HTML 4 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ús, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.)


Aquí se muestra un ejemplo de un formulario simple que incluye rótulos, radiobotones y botones para reinicializar el formulario o para enviarlo

<FORM action="http://algunsitio.com/prog/usuarionuevo" method="post">

    <P>

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

              <INPUT type="text" id="nombre"><BR>

    <LABEL for="apellido">Apellido: </LABEL>

              <INPUT type="text" id="apellido"><BR>

    <LABEL for="email">email: </LABEL>

              <INPUT type="text" id="email"><BR>

    <INPUT type="radio" name="sexo" value="Varón"> Varón<BR>

    <INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>

    <INPUT type="submit" value="Enviar"> <INPUT type="reset">

    </P>

 </FORM>



Dirigido a Antonio Calincha