¿Explicar los nuevos tipos de entrada de formulario en HTML5?

En este artículo, analizaremos la funcionalidad de los nuevos tipos de entrada de formulario proporcionados por HTML5. A veces, al completar el formulario de registro o cualquier formulario en línea, sería necesario seguir el formato adecuado para completar los datos particulares. Ahora es fácil usar el formulario web para completar los datos comunes como fecha, correo electrónico, URL, etc. Hay casi 13 nuevos tipos de entrada introducidos en el formulario HTML5. Veremos todos los tipos de entrada y los entenderemos uno por uno.

Atributos de tipo de entrada:

  1. color : este tipo de entrada permite al usuario seleccionar un color de un selector de color.
  2. fecha : este tipo de entrada permite al usuario seleccionar una fecha de un calendario desplegable.
  3. hora: este tipo de entrada permite al usuario ingresar una hora.
  4. fecha y hora: este tipo de entrada permite al usuario seleccionar la fecha y la hora junto con la zona horaria.
  5. datetime-local: este tipo de entrada permite al usuario seleccionar tanto la fecha como la hora locales.
  6. semana : este tipo de entrada permite al usuario seleccionar la semana y el año del calendario desplegable.
  7. email : este tipo de entrada permite al usuario introducir una dirección de correo electrónico.
  8. mes : este tipo de entrada permite al usuario seleccionar un mes y un año de un calendario desplegable.
  9. número: este tipo de entrada permite al usuario introducir un valor numérico.
  10. rango: este tipo de entrada permite al usuario ingresar un valor numérico dentro de un rango especificado .
  11. búsqueda: este tipo de entrada permite al usuario ingresar una string de búsqueda dentro del campo de entrada.
  12. tel: este tipo de entrada permite al usuario ingresar un número de teléfono.
  13. url: este tipo de entrada permite al usuario ingresar la URL.

Usaremos los atributos anteriores y entenderemos su uso a través del ejemplo.

Ejemplo 1: en este ejemplo, conocerá el tipo de entrada de color, fecha y hora .

Sintaxis de fecha:

 <input type="date">

Sintaxis de tiempo:

 <input type="time">

Sintaxis de colores:

 <input type="color">

Nota: la fecha y la hora no son compatibles con los navegadores Internet Explorer y Safari.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>Welcome To GeeksforGeeks</h1>
  
    <form>
        <label for="color">Select Color : </label>
        <input type="color" />
    </form>
    <br />
  
    <form>
        <label for="date">Select Date : </label>
        <input type="date" />
    </form>
    <br />
  
    <form>
        <label for="time">Select Time :</label>
        <input type="time" />
    </form>
</body>
  
</html>

Producción:

Ejemplo 2: en este ejemplo, conocerá el tipo de entrada de fecha y hora, fecha y hora local y semana .

Sintaxis de fecha y hora:

Sintaxis local de fecha y hora:

 <input type="datetime-local">

Sintaxis de la semana:

 <input type="week">

Nota: los navegadores Firefox, Safari e Internet Explorer no admiten datetime-local y week .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>Welcome To GeeksforGeeks</h1>
  
    <form>
        <label for="date">Enter Date-Time : </label>
        <input type="datetime" />
    </form>
    <br />
  
    <form>
        <label for="date">Select Date-Time Local : </label>
        <input type="datetime-local" />
    </form>
    <br />
  
    <form>
        <label for="time">Select Week : </label>
        <input type="week" />
    </form>
</body>
  
</html>

Producción:

Ejemplo 3: en este ejemplo, conocerá el tipo de entrada de correo electrónico, mes, número y rango .

Sintaxis de correo electrónico:

<input type="email">

Sintaxis del mes:

<input type="month">

Nota: los navegadores Firefox, Safari e Internet Explorer no admiten el  mes .

Sintaxis del número:

<input type="number">

Sintaxis de rango:

<input type="range">

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>Welcome To GeeksforGeeks</h1>
  
    <form>
        <label for="mail">Enter Email : </label>
        <input type="email" />
    </form>
    <br />
  
    <form>
        <label for="date">Select Month : </label>
        <input type="month" />
    </form>
    <br />
  
    <form>
        <label for="number">Select Number : </label>
        <input type="number" />
    </form>
    <br />
  
    <form>
        <label for="number">Select Number in Range : </label>
        <input type="range" min="1" max="10" step="1" />
    </form>
</body>
  
</html>

Producción:

Ejemplo 4: en este ejemplo, conocerá los tipos de entrada de búsqueda, teléfono y URL .

Sintaxis de búsqueda:

<input type="search">

Tel Sintaxis:

<input type="tel">

Nota:   actualmente tel no es compatible con ningún navegador.

Sintaxis de URL:

<input type="url">

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>Welcome To GeeksforGeeks</h1>
  
    <form>
        <label for="search">Enter Search string : </label>
        <input type="search" placeholder="search ..." />
    </form>
    <br />
  
    <form>
        <label for="number">Enter Telephone No. : </label>
        <input type="tel" placeholder="xxx-xxx-xxxx" />
    </form>
    <br />
  
    <form>
        <label for="url">Enter Url : </label>
        <input type="url" placeholder="https://www..." />
    </form>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *