Tipos de entrada HTML

❮ AnteriorSiguiente ❯

---

Este capítulo describe los diferentes tipos de entrada para el elemento <input>.

---

Texto del tipo de entrada

<input type = "text"> define un campo de entrada de texto de una línea :

Ejemplo

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba 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>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

Nombre de usuario:

Contraseña de usuario:

Los caracteres en un campo de contraseña están enmascarados (se muestran como asteriscos o círculos).

---

www.micompraventa.net

---

Tipo de entrada Enviar

<input type = "submit"> define un botón para enviar datos del formulario a un manejador de formularios .

El manejador de formularios suele ser una página de servidor con un script para procesar datos de entrada.

El controlador de formulario se especifica en el atributo de acción 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>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

Nombre de pila:

Apellido:

Si omite el atributo de valor del botón de envío, el botón recibirá un texto predeterminado:

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>

Pruebelo usted mismo »

---

Tipo de entrada Restablecer

<input type = "reset"> define un botón de reinicio que restablecerá todos los valores de formulario a sus valores predeterminados:

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">
  <input type="reset">
</form>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

Nombre de pila:

Apellido:

Si cambia los valores de entrada y luego hace clic en el botón "Restablecer", los datos del formulario se restablecerán a los valores predeterminados.

---

Input Type Radio

<input type = "radio"> define un botón de opción .

Los botones de opción permiten que un usuario seleccione SOLO UNO de entre 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>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

 Masculino
 Hembra
 Otro

---

Tipo de entrada casilla de verificación

<input type = "checkbox"> define una casilla de verificación .

Las casillas de verificación permiten a un usuario seleccionar 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>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

 Tengo una bicicleta 
 tengo un carro

---

Botón de tipo de entrada

<input type = "button"> define un botón :

Ejemplo

<input type="button" onclick="alert('Hello World!')"value="Click Me!">

Pruebelo usted mismo »

Tipos de entrada HTML5

HTML5 agregó varios tipos de entrada nuevos:

• color
• fecha
• datetime-local
• correo electrónico
• mes
• número
• distancia
• buscar
• tal
• hora
• url
• semana

Los nuevos tipos de entrada que no son compatibles con navegadores web anteriores se comportarán como <input type = "text">.

---

Tipo de entrada Color

El <input type = "color"> se usa para los campos de entrada que deberían contener un color.

Dependiendo del soporte del navegador, un Selector de color puede aparecer en el campo de entrada.

Ejemplo

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Pruebelo usted mismo »

---

Tipo de entrada Fecha

La <input type = "fecha"> se utiliza para campos de entrada que deben contener una fecha.

Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada.

Ejemplo

<form>
  Birthday:
  <input type="date" name="bday">
</form>

Pruebelo usted mismo »

También puede agregar restricciones a las fechas:

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>

Pruebelo usted mismo »

---

Tipo de entrada Fecha-hora-local

El <input type = "datetime-local"> especifica un campo de entrada de fecha y hora, sin zona horaria.

Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada.

Ejemplo

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Pruebelo usted mismo »

---

Tipo de entrada Correo electrónico

El <input type = "email"> se usa para campos de entrada que deberían contener una dirección de correo electrónico.

Según el soporte del navegador, la dirección de correo electrónico puede validarse automáticamente cuando se envía.

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.

Ejemplo

<form>
  E-mail:
  <input type="email" name="email">
</form>

Pruebelo usted mismo »

---

Tipo de entrada Mes

El <input type = "month"> permite al usuario seleccionar un mes y año.

Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada.

Ejemplo

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Pruebelo usted mismo »

---

Número de tipo de entrada

El <input type = "number"> define un campo de entrada numérico .

También puede establecer restricciones sobre qué números se aceptan.

El siguiente ejemplo muestra un campo de entrada numérico, donde puede ingresar un valor del 1 al 5:

Ejemplo

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Pruebelo usted mismo »

❮ AnteriorSiguiente ❯