Actividad 2.0

Campos de entrada <Input> 

Los campos de entrada, o "inputs", son elementos HTML fundamentales que permiten a los usuarios interactuar con las páginas web. Sirven para ingresar datos, como texto, números, fechas, archivos y más. Estos datos se pueden enviar al servidor para su procesamiento o utilizarse en scripts del lado del cliente.

Tipos de campos de entrada:

HTML5 ofrece una variedad de tipos de campos de entrada para diferentes tipos de datos:

1. text: Para ingresar texto libre.

2. number: Para ingresar números enteros o decimales.

3. range: Para seleccionar un valor dentro de un rango definido.

4. date: Para seleccionar una fecha.

5. color: Para seleccionar un color.

6. time: Para seleccionar una hora.

7. password: Para ingresar una contraseña (se oculta el texto durante la escritura).

8. file: Para seleccionar archivos para cargar en el servidor.

9. email: Para ingresar una dirección de correo electrónico.

10. url: Para ingresar una dirección URL.

11. checkbox: Para seleccionar una o más opciones de una lista.

12. radio: Para seleccionar una única opción de un grupo.

Estructura básica:

<input type="Tipo" >

<input style="Estilo" >

<input type="Tipo" [otros parametros]>

Ejemplos:

<input type="text" >

<input type="number" >

<input type="range" >

<input type="date" >

<input type="color" >

<input type="time" >

<input type="password" >

<input type="file" >

Actividad 2.0B

Crear 3 campo de entrada de texto:

1. El 1er campo de texto que tenga fondo amarillo y de letra roja.

2. El 2do campo de texto que tenga de tamaño 10, fondo azul y letra blanca.

3. EL 3er campo de texto que tenga de tamaño 15, fondo rojo, letra blanca y de valor "Galan".

Campos de contenido numérico

Permite al usuario introducir números, lo podemos hacer de dos formas, utilizando la etiqueta <input> con diferentes valores en el atributo type. Son las dos siguientes "number " y "range" 

<input type="number">

<input type="number" value="valor">

<input type="number" value="valor" step="incremento" >

<input type="number" value="valor" step="incremento"  min="minimo" max="maximo">

<input  type="number" value="valor" step="incremento"  min="minimo" max="maximo" style="estilo" >

<input  type="number" value="valor" step="incremento"  min="minimo" max="maximo" style="estilo" [otros atributos]>

Actividad 2.0C

Crear 4 campo de contenido numérico:

1. El 1er campo numérico que tenga fondo amarillo.

2. El 2do campo numérico que inicie con el valor 10 e incrementos de 5 en 5.

3. EL 3er campo numérico que inicie con el valor 2,  incrementos de 2 en 2, mínimo 0 y máximo 16.

4. EL 4to campo numérico que inicie con el valor -2,  incrementos de 4 en 4, mínimo -10, máximo 10 y fondo rosado.