Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Formulario 2

    Cargado por

    Nayiber Cifuentes
    7 vistas7 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    7 vistas7 páginas

    Formulario 2

    Cargado por

    Nayiber Cifuentes

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 7

    CÓDIGO: IPA-FO09

    Guía No. 03 Programación WEB VERSIÓN: 01


    PAGINA: 1 DE 7

    Creación de Formularios

    Para crear formularios se hace uso de la etiqueta <form>, dentro de ella van
    todos los campos <input> con su respectivo atributo type para establecer
    mediante un valor el tipo de información que debe colocar en dicho campo.

    Además de los elementos <input> también se conocen otros elementos


    como: <textarea>, <option>, <select>. Los valores para el atributo type tales
    como: text, password, checkbox, radio, submit. El uso del atributo name para
    que los campos de los formularios recopilen y envíen la información
    correctamente.

    Nuevos valores para atributo type

     color.- crea un campo con selector de color, de acuerdo al sistema operativo,


    aparece una paleta para escoger un color.
     date.- se creará un campo de fecha, en ella se pueden colocar el día, mes y
    año.
     datetime.- permite ingresa información de hora, minuto y segundo.
     datetime-local.- genera un campo para fecha y hora, se puede colocar en ella
    el día, mes, año y hora.
     email.- para información de correo electrónico.
     month.- genera un campo para ingresar un mes del año.
     number.- para recopilar datos numéricos.
    CÓDIGO: IPA-FO09

    Guía No. 03 Programación WEB VERSIÓN: 01


    PAGINA: 2 DE 7

     range.- crea una barra con un botón desplazable para elegir un rango, por
    defecto el rango es de 0 a 100.
     search.- para generar una caja de búsqueda.
     tel.- para recopilar información de número telefónico.
     time.- crea un campo para ingresar hora y minuto.
     url.- para información de dirección URL.
     week.- crea un campo para elegir la semana del año.

    Ejemplos de formularios HTML5


    CÓDIGO: IPA-FO09

    Guía No. 03 Programación WEB VERSIÓN: 01


    PAGINA: 3 DE 7

    Atributos html5 para formularios

    Así como se tienen nuevos tipos de campo, también se han agregado otros
    atributos para controlar el resultado final de los formularios.

     autocomplete.- cuando se establece autocomplete activado, el navegador


    trata de autocompletar los campos que el usuario está completando,
    basándose en su actividad en el navegador.
     required.- para campos requeridos, sirve para establecer de que el campo
    debe ser completado obligatoriamente, en caso contrario no será posible
    enviar la información del formulario.
     placeholder.- generalmente se usa para colocar en su valor un breve texto
    que indique al usuario el tipo de información que debe coloca en el campo.
    Se suele usar en elementos <input> y <textarea>
     autofocus.- sirve para enfocar automáticamente el campo deseado cuando
    el formulario se carga.
     size.- para establecer el tamaño de los campos, un número de caracteres
    para campos de texto.
    CÓDIGO: IPA-FO09

    Guía No. 03 Programación WEB VERSIÓN: 01


    PAGINA: 4 DE 7

     readonly.- sirve para que la información de un campo no pueda ser


    modificada, solo de lectura.
     disabled.- este atributo hace que un campo o control quede deshabilitado,
    de tal manera que no se puede hacer nada con ella.
    CÓDIGO: IPA-FO09

    Guía No. 03 Programación WEB VERSIÓN: 01


    PAGINA: 5 DE 7

    Ejemplo registro de datos

    <!DOCTYPE html>
    <html>
    <head>
    <title>Formulario de registro - Mi web</title>
    </head>
    <body>

    <h1>Formulario de registro</h1>

    <form action="" method="get">


    <p>
    Nombre: <input type="text" name="nombre" maxlength="50" />

    </p>

    <p>

    Apellidos: <input type="text" name="apellidos" maxlength="50" />

    </p>

    <p>

    Sexo: <input type="radio" name="sexo" value="h" /> hombre <input type="radio" name="sexo"
    value="m" /> mujer

    </p>

    <p>

    Correo: <input type="text" name="correo" maxlength="100" />


    CÓDIGO: IPA-FO09

    Guía No. 03 Programación WEB VERSIÓN: 01


    PAGINA: 6 DE 7

    </p>

    <p>

    <input type="checkbox" name="info" checked="checked" /> Deseo recibir información sobre


    novedades y ofertas

    </p>

    <p>

    <input type="checkbox" name="condiciones" /> Declaro haber leido y aceptar las condiciones
    generales del programa y la normativa sobre protección de datos

    </p>

    <p>

    <input type="submit" value="Enviar" />

    </p>

    </form>

    </body>

    </html>

    EJERCICIO DEL PROYECTO DE AULA

    La empresa XYZ, es una empresa de distribución de productos tecnológicos, tiene su domicilio en


    la ciudad de Bogotá y su oficina principal en la calle 172 con 7º en la oficina 301. La empresa y
    cuenta con una planta de personal que pertenece a diferentes áreas, como: recursos humanos,
    ventas, contabilidad y área de tecnología. La empresa fue constituida como una sociedad anónima
    desde el año 2020. Los productos que distribuye la empresa son computadores de mesa, portátiles,
    Tablet, móviles y accesorios. La empresa tiene sedes en Medellín, Cali, Pereira, Cúcuta y Neiva. La
    empresa tiene un logo que es con el que hace la publicidad de sus productos. Los productos se
    adquieren a proveedores que tienen la siguiente información: identificación, nombres y apellidos,
    dirección, celular, correo electrónico. La misma información tendrían para los clientes, para los
    CÓDIGO: IPA-FO09

    Guía No. 03 Programación WEB VERSIÓN: 01


    PAGINA: 7 DE 7

    productos la información sería: referencia del producto, nombre del producto, tipo, color, marca,
    valor unitario.

    ACTIVIDAD PROYECTO DE AULA.

    De acuerdo al ejercicio planteado para el proyecto de aula hacer la siguiente actividad:

    1.- Hacer el diseño del sitio, tenga en cuenta la información general de acuerdo al ejercicio
    planteado.

    2.- Hacer los formularios para proveedores, clientes y productos

    3.- El sitio debe tener un menú que enlace los formularios con la página principal

    También podría gustarte