Inicio:

07:45 a.m.
 Este robot es capaz de cocinar pizzas en menos de 5 minutos
y es una idea de antiguos trabajadores de SpaceX

Un grupo de antiguos empleados de SpaceX han creado la

empresa Stellar Pizza, que ofrecerá pizzas perfectamente
cocinadas en tan solo cinco minutos, pero creadas por robots.

Estas pizzas son accesibles para todo el mundo y costarán

entre 7 y 12 $, y los clientes podrán elegir hasta 10
ingredientes diferentes.

La máquina es tan avanzada que es capaz de convertir una

bola de masa en un pastel de pizza y repartir una cantidad
muy uniforme de salsa y todo tipo de ingredientes, todo
controlado por software personalizado y alojándose dentro de
un camión para que sea un restaurante móvil.
DESARROLLO DE APLICACIONES WEB I
INST. RICHARD SALAS HIDALGO
www.senati.edu.pe
www.senati.edu.pe
OBJETIVO:

Con la información
proporcionada y la
orientación del facilitador, el
participante será capaz de
insertar formularios en sitio
web con precisión y sin error.

6
www.senati.edu.pe
 Contenido:

• Introducción a creación de formularios con HTML5

Placeholder, Autofocus, Autocomplete, Required, Data
y List, Clases “Input”, Sliders, Spinners, calendarios.

7
www.senati.edu.pe
VIDEO:

8
www.senati.edu.pe
 PADLET

• https://padlet.com/rmsalash20/Bookmarks

9
www.senati.edu.pe
 DataList

• La <datalist> etiqueta especifica una lista de opciones predefinidas para un elemento

<input>.

• La <datalist>etiqueta se utiliza para proporcionar una función de "autocompletar" para los

elementos <input>. Los usuarios verán una lista desplegable de opciones predefinidas a
medida que ingresan datos.

• El <datalist>atributo id del elemento debe ser igual al atributo list del elemento <input>
(esto los une).

10
www.senati.edu.pe
Ejemplo de Datalist

11
www.senati.edu.pe
 Input

• La <input>etiqueta especifica un campo de entrada donde el usuario puede ingresar

datos.

• El <input>elemento es el elemento de forma más importante.

• El <input>elemento se puede mostrar de varias formas, según el atributo de tipo.

12
www.senati.edu.pe
• Los diferentes tipos de entrada son los
siguientes:
• <input type="number">
• <input type="password">
• <input type="button">
• <input type="radio">
• <input type="checkbox">
• <input type="range">
• <input type="color">
• <input type="reset">
• <input type="date">
• <input type="search">
• <input type="datetime-local">
• <input type="submit">
• <input type="email">
• <input type="tel">
• <input type="file">
• <input type="text">(valor por defecto)
• <input type="hidden">
• <input type="time">
• <input type="image">
• <input type="url">
• <input type="month">
• <input type="week">

13
www.senati.edu.pe
 Calendarios

• Define <input type="datetime-local">un selector de fecha.

• El valor resultante incluye el año, el mes, el día y la hora.

14
www.senati.edu.pe
 date

• Define <input type="date">un selector de fecha.

• El valor resultante incluye el año, el mes y el día.

15
www.senati.edu.pe
 File

• Define un campo de selección de archivos <input type="file">y un botón "Examinar" para

cargar archivos.

• Para definir un campo de selección de archivos que permita seleccionar varios archivos,
agregue el multiple atributo.

16
www.senati.edu.pe
 Radio

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

• Los botones de radio normalmente se presentan en grupos de radio (una colección de

botones de radio que describen un conjunto de opciones relacionadas). Solo se puede
seleccionar un botón de radio en un grupo al mismo tiempo.

• Nota: El grupo de radio debe compartir el mismo nombre (el valor del name atributo) para ser
tratado como un grupo. Una vez que se crea el grupo de radio, al seleccionar cualquier botón
de radio en ese grupo automáticamente se deselecciona cualquier otro botón de radio
seleccionado en el mismo grupo. Puede tener tantos grupos de radio en una página como
desee, siempre que cada grupo tenga su propio nombre.

• Nota: El value atributo define el valor único asociado con cada botón de radio. El valor no se
muestra al usuario, pero es el valor que se envía al servidor en "enviar" para identificar qué
botón de opción se seleccionó.
17
www.senati.edu.pe
 Checkbox

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

• La casilla de verificación se muestra como una casilla cuadrada que está marcada
(marcada) cuando está activada.

• Las casillas de verificación se utilizan para permitir que un usuario seleccione una o más
opciones de un número limitado de opciones.

18
www.senati.edu.pe
Diseñando un formulario de registro de usuarios

19
www.senati.edu.pe
Desarrollo del formulario:

20
www.senati.edu.pe
 21
www.senati.edu.pe
 22
www.senati.edu.pe
 23
www.senati.edu.pe
Agregando los estilos.css

24
www.senati.edu.pe
Desarrollando el TEST

https://forms.gle/sEYcTbiH7Vbr3EKg7

25
www.senati.edu.pe
Conclusiones:

26
www.senati.edu.pe
www.senati.edu.pe