Tipos de entrada
En este capítulo se describen los tipos de entrada de la <input> elemento.
Tipo de entrada: texto
<input type="text"> define un campo de entrada de una línea para la introducción de texto:
Ejemplo
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Nombre de pila:
Apellido:
Tipo de entrada: contraseña
<input type="password"> define un campo de contraseña:
Ejemplo
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Nombre de usuario:
Contraseña de usuario:
Los caracteres en un campo de contraseña se enmascaran (shown as asterisks or circles) .
Tipo de entrada: enviar
<input type="submit"> define un botón de presentación de forma de entrada a una forma-handler.
La forma-manejador es típicamente una página del servidor con una secuencia de comandos para el procesamiento de datos de entrada.
La forma-manejador se especifica en el atributo action del formulario:
Ejemplo
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Nombre de pila:
Apellido:
Si se omite el atributo value del botón de enviar, el botón obtendrá un texto por defecto:
Ejemplo
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> Inténtalo tú mismo " Tipo de entrada: radio
<input type="radio"> define un radio botón.
Radio botones permiten al usuario seleccionar sólo una de un número limitado de opciones:
Ejemplo
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Masculino
Hembra
Otro
Tipo de entrada: checkbox
<input type="checkbox"> define una checkbox .
Checkboxes permitir que un usuario seleccione cero o más opciones de un número limitado de opciones.
Ejemplo
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Tengo una bicicleta
tengo un carro
Tipo de entrada: button
<input type="button"> define un button :
Ejemplo
<input type="button" onclick="alert('Hello World!')" value="Click Me!"> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
HTML5 Input Tipos
HTML5 ha añadido varias nuevas input tipos:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input tipos, no son compatibles con navegadores Web, se comportarán como input texto tipo.
Input Tipo: number
La <input type="number"> se utiliza para campos de entrada que deben contener un valor numérico.
Se puede establecer restricciones en el número.
En función de soporte de los navegadores, las restricciones pueden aplicarse al campo de entrada.
Ejemplo
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> Inténtalo tú mismo " Input Restricciones
He aquí una lista de algunos común input restricciones (some are new in HTML5) :
| Atributo | Descripción |
|---|---|
| disabled | Especifica que un campo de entrada debe ser desactivada |
| max | Especifica el valor máximo para un campo de entrada |
| >maxlength | Especifica el número máximo de caracteres para un campo de entrada |
| min | Especifica el valor mínimo para un campo de entrada |
| pattern | Especifica una expresión regular para comprobar el valor de entrada contra |
| readonly | Especifica que un campo de entrada es de sólo lectura (cannot be changed) |
| required | Especifica que se requiere un campo de entrada (must be filled out) |
| size | Especifica la anchura (in characters) de un campo de entrada |
| step | Especifica los intervalos de números legales para un campo de entrada |
| value | Especifica el valor predeterminado para un campo de entrada |
Va a aprender más acerca input restricciones en el siguiente capítulo.
Ejemplo
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Inténtalo tú mismo " Input Tipo: date
La <input type="date"> se utiliza para campos de entrada que deben contener una fecha.
En función de soporte de los navegadores, un selector de fecha puede aparecer en el campo de entrada.
Se pueden añadir restricciones a la input :
Ejemplo
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> Inténtalo tú mismo " Input Tipo: Color
La <input type="color"> se utiliza para campos de entrada que deben contener un color.
En función de soporte de los navegadores, un selector de color puede aparecer en el campo de entrada.
Ejemplo
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Inténtalo tú mismo " Input Tipo: rango
La <input type="range"> se utiliza para campos de entrada que deben contener un valor dentro de un rango.
En función de soporte de los navegadores, el campo de entrada se puede mostrar como un control deslizante.
Se pueden utilizar los following atributos para especificar restricciones: mínimo, máximo, paso, valor.
Input Tipo: month
La <input type="month"> permite al usuario seleccionar un mes y el año.
En función de soporte de los navegadores, un selector de fecha puede aparecer en el campo de entrada.
Ejemplo
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Inténtalo tú mismo " Input Tipo: week
La <input type="week"> permite al usuario seleccionar una semana y el año.
En función de soporte de los navegadores, un selector de fecha puede aparecer en el campo de entrada.
Input Tipo: time
La <input type="time"> permite al usuario seleccionar un tiempo (no time zone) .
En función de soporte de los navegadores, un selector de hora puede aparecer en el campo de entrada.
Input Tipo: datetime
La <input type="datetime"> permite al usuario seleccionar una fecha y hora (with time zone) .
Ejemplo
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Inténtalo tú mismo "  | El tipo de entrada de fecha y hora se retira del estándar HTML. Utilice datetime-local. |
|---|
Tipo de entrada: fecha y hora local
La <input type="datetime-local"> permite al usuario seleccionar una fecha y hora (no time zone) .
En función de soporte de los navegadores, un selector de fecha puede aparecer en el campo de entrada.
Ejemplo
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Inténtalo tú mismo " Tipo de entrada: correo electrónico
La <input type="email"> se utiliza para campos de entrada que deben contener una dirección de correo electrónico.
En función de soporte del navegador, la dirección de correo electrónico se puede validar de forma automática cuando se presente.
Algunos teléfonos inteligentes reconocen el tipo de correo electrónico, y agrega ".com" al teclado para que coincida con la entrada de correo electrónico.
Tipo de entrada: buscar
La <input type="search"> se utiliza para campos de búsqueda (a search field behaves like a regular text field) .
Ejemplo
<form>
Search Google:
<input type="search" name="googlesearch">
</form> Inténtalo tú mismo " Tipo de entrada: tel
La <input type="tel"> se utiliza para campos de entrada que deben contener un número de teléfono.
El tipo de teléfono es compatible actualmente sólo en Safari 8.
Tipo de entrada: url
La <input type="url"> se utiliza para campos de entrada que deben contener una dirección URL.
En función de soporte de los navegadores, el campo URL se puede validar de forma automática cuando se presente.
Algunos teléfonos inteligentes reconocen el tipo de URL, y añade ".com" al teclado para que coincida con la entrada URL.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »