Grado 11º - Periodo 4

Lunes, octubre 25 de 2021

CLASE 5

FORMULARIOS EN HTML

ETIQUETA <input>

Probar los siguientes tipos de input, reconociendo su función. Utiliza la uproco.

number
range
password
email
reset
date
time

ACTIVIDAD DE CLASE:

Crear un archivo HTML donde uses todas las instrucciones vistas hoy. Enviarlo al correo elprofecarlosrestrepo@hotmail.com

Plazo: Final de la clase

_____________________________________

Contenido Oculto

_____________________________________

Lunes, octubre 4 de 2021

CLASE 4

Realizar la actividad de la clase anterior.

_____________________________________

Lunes, septiembre 27 de 2021

CLASE 3

Otra forma de hacer listas

<p>Elegir el estrato socioeconómico:
       <select name="listaestrato">
           <option value=0>Elija una opción</option>
           <option value=1>1</option>
           <option selected value=2>2</option>
           <option value=3>3</option>
           <option value=4>4</option>
           <option value=5>5</option>
           <option value=6>6</option>
           <option value=7>7</option>
       </select>

TIPO CHECKBOX

checkbox. Define una casilla de verificación que puede tomar dos valores: marcada o desmarcada. Por esto se utiliza para datos que pueden tomar dos valores, si/no, de acuerdo/en desacuerdo, activado/desactivado. Por ejemplo, se puede utilizar en estos casos: Nacionalidad española, Aceptar condiciones, Pantalla completa, etc. Si añadimos el atributo checked la casilla aparecerá marcada inicialmente.

Acepto condiciones</p>

TIPO RADIO

Radio. Con este tipo de entrada se define una opción a elegir. Normalmente se presentan varias opciones sobre una cuestión para que el usuario elija sólo una de ellas. Por Ejemplo, sexo: hombre o mujer; tipo domicilio: calle, plaza, avenida; Transporte: avión, tren, autobús. Se deben escribir tantas etiquetas input como opciones necesitemos, y todas deben tener el mismo valor en el atributo name, de esta forma se sabe que están relacionadas y que sólo se puede elegir una. Además el atributo value debe tener valores distintos para que el programa que recibe los datos sepa cuál de las opciones ha sido elegida.

<p>Sexo: Hombre<input type="radio" name="sexo" value="h"> Mujer<input
type="radio" name="sexo" value="m"></p>

ACTIVIDAD PARA LA CASA:

Con lo visto en las clases anteriores y lo visto en el día de hoy, debes crear un documento HTML llamado practica1.html donde aparezca el siguiente formulario:

______________________________________

Lunes, septiembre 20 de 2021

CLASE 2

ETIQUETA <INPUT> DE UN FORMULARIO

La etiqueta input es la encargada de crear los campos de entrada del formulario. Existen bastantes tipos de datos para el elemento input, por ejemplo, texto, casilla de verificación, área de texto, fecha, etc., para cada uno de ellos el navegador web crea un campo con el formato adecuado de forma automática. El atributo type define el tipo del elemento input.

Los atributos más communes son name, value, required, placeholder, size, maxlength, minlength, autofocus, disabled, src y alt.

TIPO TEXT

Define un campo de texto, es el atributo más usado y se usa para introducir una línea de texto.

ATRIBUTOS

name: es el nombre del control o componente del formulario.
size: Tamaño del cuadro de texto.
maxlength: Máxima cantidad de caracteres.
minlength: Mínima cantidad de caracteres.
Value: permite definir un valor por defecto para los cuadros de texto.

EJERCICIO:

Crear el siguiente formulario:

Debe cumplir las siguientes características

Nombre con tamaño 20, máximo de caracteres 15 y mínimo 3.
Apellido con tamaño 10, máximo de caracteres 8 y mínimo 3.
Localización tamaño 30, máximo de caracteres 35 y mínimo 10
Ponerle fondo de color
En la pestaña debe salir FORMULARIO 2

TIPO TEXT (Lista)

También podemos limitar los valores permitidos mediante una lista desplegable, para ello debemos utilizar el atributo list con un nombre de lista, luego debemos crear la lista con la etiqueta datalist, y crear los valores de la lista con la etiqueta option, tal y como muestra el siguiente código:

<p>Elegir memoria USB:<input list="listaUsb"></p>

<datalist id="listaUsb" >

<option value="8" >

<option value="16" >

<option value="32" >

<option value="64" >

</datalist>

Se ve así:

Este atributo list se puede utilizar en otros muchos campos como text, date,..

ACTIVIDAD:

Al finalizar la clase, enviar el documento HTML que trabajamos el día de hoy.

_________________________________

Lunes, septiembre 13 de 2021

CLASE 1

LA ETIQUETA <FORM>

Se usa para declarar o abrir un formulario.

Un formulario está formado por varios elementos.

Todos los elementos del formulario están dentro de las etiquetas <form> y </form>.

Ejemplo: Dentro de <BODY>...</BODY>

<form action="#" method="post" >

<p>Escribe aquí tu petición <input type="text" name="mensaje"></p>

</form>

ACTIVIDAD DE CLASE:

La estructura HTML que vimos anteriormente, debes darle un color al fondo, poner un titulo encima del formulario que diga "FORMULARIO DE PETICIÓN" y lograr que en el titulo de la pestaña aparezca "FORMULARIO 1".

Enviar al correo elprofecarlosrestrepo@hotmail.com finalizando la clase.

__________________________________________