La etiqueta <input> representa un campo de datos que normalmente se asocia con un control que permite a los usuarios editar su valor. Puede proveer diferentes tipos de campos como texto, contraseñas, fechas, números, entre otros. El tipo de campo se especifica a través del atributo "type" y cada tipo permite funcionalidades específicas para la entrada de datos por parte de los usuarios.

1. ETIQUETAS
<INPUT>
Alumna Maria Guadalupe Cortes Perez
Grupo 404

2. Representa un campo de datos tipado que
Representa un campo de datos tipado que
Representa un campo de datos tipado que
normalmente se asocia con un control que
normalmente se asocia con un control que
normalmente se asocia con un control que
permite a los usuarios editar su valor.
permite a los usuarios editar su valor.
permite a los usuarios editar su valor.
Este elemento es capaz de proveer muchos tipos
Este elemento es capaz de proveer muchos tipos
Este elemento es capaz de proveer muchos tipos
diferetes de campos, de acuerdo al valor que
diferetes de campos, de acuerdo al valor que
diferetes de campos, de acuerdo al valor que
presente en el atributo type .
presente en el atributo type .
presente en el atributo type .
¿Que son las etiquetas <input>?

3. TEXTO
maria guadalupe cortes perez
Para crear un campo de entrada
de texto simple, se utiliza el
tipo “text”. Los usuarios
pueden ingresar cualquier
cadena de texto en este campo.
<input type="text" name="nombre"
placeholder="Ingrese su nombre">

4. <form> <input type="radio" name="gender"
value="male" checked> Hombre<br> <input
type="radio" name="gender"
value="female"> Mujer<br> <input
type="radio" name="gender" value="other">
Otro</form>
maria guadalupe cortes perez
Define un radio button, que te permite
seleccionar UNA opción entre varias.
RADIO

5. El tipo “date” crea un campo de
entrada para seleccionar fechas
utilizando un selector de fecha nativo
del navegador.
DATE
<input type="date"
name="fecha_nacimiento">

6. CONTRASEÑA
§El tipo “password” crea un
campo de entrada donde los
caracteres ingresados se ocultan,
lo que es útil para ingresar
contraseñas de manera segura.
<INPUT TYPE="PASSWORD"
NAME="CONTRASENA"
PLACEHOLDER="INGRESE SU
CONTRASEÑA">

7. Checkbox
§Las casillas de verificación permiten a los
usuarios seleccionar múltiples opciones de
una lista. Para crear una casilla de
verificación, utiliza el tipo “checkbox”.
<input type="checkbox"
name="intereses"
value="deporte">
Deporte <input
type="checkbox"
name="intereses"
value="arte"> Arte

8. Radio
<inputtype="radio"name="genero
"value="masculino"> Masculino
<inputtype="radio"name="genero
"value="femenino"> Femenino
§Los botones de opción permiten
seleccionar una única opción de
un conjunto. Para crear botones
de opción, usa el tipo “radio”.

9. Number
§El tipo “number” crea un campo
de entrada para ingresar valores
numéricos. Puedes especificar el
rango de números permitidos
utilizando los atributos min y max.
<input type="number"
name="edad" min="1"
max="120"
placeholder="Ingrese su
edad">

10. EMAIL
§<inputtype="email"name="
correo"placeholder="Ingres
e su correo electrónico">
§Para crear un campo de
entrada específico para
direcciones de correo
electrónico, utiliza el tipo
“email”. Este tipo de campo
proporciona una validación
básica de correo electrónico de
forma automática.

11. File
<inputtype="file"name
="archivo_adjunto">
Para permitir a los usuarios
cargar archivos, utiliza el tipo
“file”. Los usuarios pueden
seleccionar un archivo de su
dispositivo utilizando el cuadro
de diálogo de carga de archivos.

12. Tel
<inputtype="tel"name="telefono"pl
aceholder="Ingrese su número de
teléfono">
§Para crear un campo de entrada
específico para números de
teléfono, utiliza el tipo “tel”.
Aunque este tipo de campo no
proporciona una validación
automática, ofrece una mejor
experiencia de usuario en
dispositivos móviles al mostrar
el teclado numérico adecuado.

13. Range
<input type="range"
name="volumen" min="0"
max="100" step="1">
§El tipo “range” crea un control
deslizante que permite a los usuarios
seleccionar un valor dentro de un
rango específico. Puedes establecer el
rango utilizando los atributos min,
max y step.

14. Button
§<inputtype="button"value="H
aga clic aquí"
onclick="miFuncion()">
*§El tipo “button” crea un botón
genérico que puede usarse para
diversas acciones en la página, como
abrir una ventana emergente, enviar
datos mediante JavaScript, etc.
*Puedes agregar funcionalidad
adicional utilizando JavaScript y
escuchando el evento click en el
botón.

15. Submit
<inputtype="submit"
value="Enviar">
§El tipo submit crea un botón
que, al hacer clic, envía el
formulario y sus datos al
servidor. Generalmente, se
especifica un atributo action en
la etiqueta <form>para indicar
el destino del envío del
formulario.

16. Datetime-local
<form> ¿Cuando te
registraste? (fecha y
hora): <input
type="datetime-local"
name="daytime">
</form>
Se usa para una fecha y hora sin
tener en cuenta la zona horaria.

17. Month
*<form>
*Mes y año:
* <input
type="month"
name="monthYea
r"></form>
Permite seleccionar
mes y año.