Posted on by MariaJose

HTML5: 4 funciones que no conoces

HTML5

4 funciones útiles de HTML5 que probablemente no conozca.

Funciones HTML5 extremadamente útiles con ejemplos.

HTML5

Introducción

No puedo imaginar la Web sin HTML. Esta gran herramienta todavía es utilizada por millones de desarrolladores en todo el mundo. Es lo primero que debe aprender si quiere convertirse en desarrollador web. Sin embargo, todavía veo que algunas personas subestiman el poder del HTML. Eso se debe a que no conocen otras funciones que tiene esta herramienta.

En este artículo, exploraremos algunas características útiles de HTML5 que probablemente no conozca. Empecemos de inmediato.

 

1. Datalista

La etiqueta <datalist> es una de las características sorprendentes que se introdujeron en HTML. Esta etiqueta <datalist> especifica una lista de opciones predefinidas y permite al usuario agregar más. Proporciona la función de autocomplete que le permite obtener las opciones deseadas con una escritura anticipada.

Aquí está el ejemplo de código:

<body>
      <form action="" method="get">
        <label for="fruit">Choose your fruit :</label>
        <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
          <option value="Apple">
          <option value="Orange">
          <option value="Banana">
          <option value="Mango">
          <option value="Avacado">
        </datalist>
        <input type="submit">
      </form>
    </body>

También puede consultar este [Codepen] que dejo aquí.

 

2. La etiqueta de detalles

La etiqueta <details> proporciona detalles bajo demanda para el usuario. Por lo tanto, esta etiqueta se puede usar cuando desee mostrar una tabla de contenido que tenga información a pedido. De forma predeterminada, el widget está cerrado. Cuando está abierto, se expande y muestra el contenido que contiene.

La etiqueta <summary> se usa con <details> para especificar un encabezado visible para ella.

Aquí está el ejemplo de código:

<body>
      <details>
        <summary>Click to get the user details</summary>
        <table>
          <tr>
            <th>Name</th>
            <th>Date of birth</th>
            <th>Job</th>
          </tr>
          <tr>
            <td>John</td>
            <td>March 19</td>
            <td>Accountant</td>
          </tr>
        </table>
      </details>
    </body>

Eche un vistazo a este [Codepen].

 

3. La etiqueta de salida

La etiqueta <output> representa el resultado de un cálculo. Normalmente, este elemento define una región que se utilizará para mostrar la salida de texto de algún cálculo.

Aquí está el ejemplo de código:

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
   <input type="number" id="a" value="0">
          * <input type="number" id="b" value="0">
                = <output name="x" for="a b"></output>
</form>

Aquí está el ejemplo de [Codepen] si desea verlo.

 

4. Contenido editable

El contenteditable es un atributo HTML que le permite editar sus elementos HTML. Al establecer este atributo en verdadero, podrá editar el contenido de un elemento.

Eche un vistazo al siguiente código:

<div>
      <h1> Employees list </h1>
      <ul class="content-editable" contenteditable="true">
        <li> 1. Jhon </li>
        <li> 2. Mehdi </li>
        <li> 3. Brad </li>
      </ul>
 </div>

Y este es el [Codepen] que le corresponde.

 

Conclusión

Como puede ver, HTML es una gran herramienta para usar porque tiene muchas características útiles de las que podemos beneficiarnos como desarrolladores. No subestime el poder de HTML, ya que hay otras funciones más que puede ofrecer.

Gracias por leer este artículo, espero que te haya resultado útil.

Recent Post