English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML5 Tipo de entrada

En HTML5en, se han agregado varios nuevos tipos de entrada de formulario, y mediante el uso de estos nuevos elementos, se puede lograr un mejor control de entrada y validación.

HTML5 Nuevo tipo de entrada

HTML5 Posee varios nuevos tipos de entrada de formulario. Estas nuevas características proporcionan un mejor control de entrada y validación.

Este capítulo introduce estos nuevos tipos de entrada de manera exhaustiva:

  • color

  • fecha

  • datetime

  • datetime-local

  • correo electrónico

  • mes

  • número

  • rango

  • búsqueda

  • tel

  • tiempo

  • url

  • semana

Atención:No todos los navegadores populares admiten los nuevos tipos de entrada, pero ya puedes usarlos en todos los navegadores populares. Incluso si no se admiten, aún se pueden mostrar como campos de texto normales.

Tipo de entrada: color

El tipo color se utiliza en los campos de entrada de input principalmente para seleccionar colores, como se muestra a continuación:

Ejemplo en línea

Elija un color desde el selector de color:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Elija el color que le guste: <input type="color" name="favcolor"><br>
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: date

El tipo date permite seleccionar una fecha desde un selector de fecha.

Ejemplo en línea

Defina un controlador de tiempo:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Cumpleaños: <input type="date" name="bday">
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: datetime

El tipo datetime permite seleccionar una fecha (tiempo UTC).

Ejemplo en línea

Defina un controlador de fecha y hora (tiempo local):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Cumpleaños (fecha y hora): <input type="datetime" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: datetime-local

datetime-El tipo local permite seleccionar una fecha y hora (sin zona horaria).

Ejemplo en línea

Defina una fecha y hora (sin zona horaria):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Cumpleaños (fecha y hora): <input type="datetime" name="bdaytime">-local" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: email

El tipo email se utiliza para los campos de entrada que deben contener e-Campo de entrada de dirección de correo electrónico.

Ejemplo en línea

Al enviar el formulario, se verificará automáticamente si el valor del campo de entrada email es válido y válido:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　E-mail: <input type="email" name="usremail">
　　<input type="submit">
</form>
<p><b>Nota:/b> Internet Explorer　9　　Y versiones anteriores de IE no admiten type="email" <./p>
</body>
</html>
Prueba aquí ‹/›

Aviso: El navegador Safari en iPhone admite el tipo de entrada email y se coordina con él cambiando el teclado táctil (agregando opciones @ y .com).

Tipo de entrada: month

El tipo month le permite seleccionar un mes.

Ejemplo en línea

Defina mes y año (sin zona horaria):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Cumpleaños (mes y año): <input type="month" name="bdaymonth">
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: number

El tipo number se utiliza para los campos de entrada que deben contener valores numéricos.

También puede definir los límites para los números aceptados:

Ejemplo en línea

Defina un campo de entrada numérica (límite):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Cantidad (　1　hasta　5　Entre): <input type="number" name="quantity" min="1" max="5">
　　<input type="submit">
</form>
<p><b>Nota:/b>Internet Explorer　9　Y versiones anteriores de IE no admiten type="number" <./p>
</body>
</html>
Prueba aquí ‹/›

Utilice las siguientes propiedades para especificar los límites para el tipo de número:

AtributoDescripción
deshabilitadoEl campo de entrada especificado está deshabilitado
maxEstablecer el valor máximo permitido
maxlengthEstablecer la longitud máxima de caracteres del campo de entrada
minEstablecer el valor mínimo permitido
patternEstablecer el patrón para la validación del campo de entrada
readonlyEstablecer si el valor del campo de entrada no se puede modificar
requiredEstablecer si el valor del campo de entrada es obligatorio
sizeEstablecer el número de caracteres visibles en el campo de entrada
stepEstablecer el intervalo numérico válido del campo de entrada
valueEstablecer el valor predeterminado del campo de entrada

Tipo de entrada: range

El tipo de rango se utiliza para los campos de entrada que deben contener valores numéricos en un rango.

El tipo de rango se muestra como una barra de deslizamiento.

Ejemplo en línea

Definir un valor numérico no muy preciso (similar al control deslizante):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php" method="get">
Puntos: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>Nota:/b> Internet Explorer　9　Las versiones anteriores de IE no admiten type="range" <./p>
</body>
</html>
Prueba aquí ‹/›

Utilice las siguientes propiedades para establecer los límites para el tipo numérico:

  • max - Establecer el valor máximo permitido

  • min - Establecer el valor mínimo permitido

  • step - Establecer el intervalo numérico válido

  • value - Establecer valor predeterminado

Tipo de entrada: search

El tipo de búsqueda se utiliza para los campos de búsqueda, como la búsqueda de sitio o Google.

Ejemplo en línea

Definir un campo de búsqueda (similar a la búsqueda de sitio o Google):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Buscar Google: <input type="search" name="googlesearch"><br>
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: tel

Ejemplo en línea

Definir el campo de entrada de número de teléfono:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Número de teléfono: <input type="tel" name="usrtel"><br>
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: time

El tipo de tiempo permite seleccionar una hora.

Ejemplo en línea

Definir el controlador de tiempo قابل para introducir (sin zona horaria):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Elija la hora: <input type="time" name="usr_time">
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

Tipo de entrada: url

El tipo de entrada url se utiliza para los campos de entrada que deben contener direcciones URL.

Al enviar el formulario, se verificará automáticamente el valor del dominio url.

Ejemplo en línea

Definir el campo de entrada de URL:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Agregue su página de inicio: <input type="url" name="homepage"><br>
　　<input type="submit">
</form>
<p><b>Nota:/b> Internet Explorer　9Las versiones anteriores de IE no admiten type="url" <./p>
</body>
</html>
Prueba aquí ‹/›

Aviso: El navegador Safari en iPhone admite el tipo de entrada url y se acompaña con el cambio del teclado táctil para cooperar con él (agregar opción .com).

Tipos de entrada: week

El tipo week permite seleccionar semana y año.

Ejemplo en línea

Definir semana y año (sin zona horaria):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Elegir semana: <input type="week" name="year_week">
　　<input type="submit">
</form>
</body>
</html>
Prueba aquí ‹/›

HTML5 Etiqueta <input>

EtiquetaDescripción
<input>Descripción del input
HTML5 Elementos de formularioHTML5 Audio(音频)