Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Expo Web

    Hochgeladen von

    Noy León
    15 Ansichten12 Seiten
    web

    Originaltitel

    EXPO WEB

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    web

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    15 Ansichten12 Seiten

    Expo Web

    Hochgeladen von

    Noy León
    web

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 12

    COMO HACER

    FORMULARIOS EN
    HTML5
    LINA MARA HERNDEZ VARGAS
    CODIGO: 2121453

    PORQU HTML5?
    Las cosas han cambiado un poco desde la llegada del nuevo
    Html5. Hasta entonces normalmente se recurra a scripts para
    validacin de datos de formularios, que permitan definir cules
    eran los datos imprescindibles, de qu tipo era cada uno de ellos,
    etc, etc.
    El Html5 nos permite ahora, sin necesidad de recurrir a esos
    cdigos Javascript, realizar todas esas tareas, evitando de ese
    modo que esas funciones de validacin dejaran de funcionar si el
    visitante tena el Javascript desactivado en su navegador.
    Obtendremos de este modo un cdigo mucho ms limpio y claro.

    UN EJEMPLO ES:
    En Html5 a las etiquetas que no tienen etiqueta de cierre
    correspondiente no es necesario aadirle la barrita de cierre al final del
    contenido de la etiqueta. Antes, con el Html4 o Xhtml se aada una
    barrita, pero ya no es necesario. La etiqueta input es un ejemplo. Antes
    se escriba con una barrita al final, como en este ejemplo de abajo:
    <input type="text" name="name" />
    pero ya no es necesario en Html5, quedando de este otro modo:
    <input type="text" name="name">

    REQUIRED
    La versin Html5 ha aadido este nuevo atributo, required que nos permite comprobar
    que el campo ha sido rellenado antes incluso de pulsar ese botn de envo, sin
    necesidad de ms complicaciones o cdigo extra.
    Si el usuario deja este campo en blanco, algunos navegadores arrojarn un mensaje
    de error, o simplemente colocarn el cursor de escritura al primer campo vacio.
    Este atributo se coloca dentro de la etiqueta del input de este modo:
    <input type="text" id="nombre-de-usuario" name="usuario" required>

    PLACEHOLDER
    Otra
    til
    propiedad
    que
    podemos
    colocar
    dentro
    del
    cdigo
    de
    la
    etiqueta input es placeholder="bla bla bla". Mediante esta propiedad del Html5 podemos definir
    el texto que queremos que aparezca dentro del campo del formulario a modo de ayuda para
    las visitas. Por ejemplo, se suele colocar un texto explicativo acerca de la informacin que se
    debe rellenar en ese campo.
    El texto definido dentro de la propiedad placeholder aparecer dentro del campo
    correspondiente con un tono gris clarito, indicando que no es realmente el texto que se va a
    enviar, sino lo comentado, una ayuda para informar de lo que debe contener ese campo.
    <form>
    <input type="text" id="ejemplo" name="ejemplo" placeholder="bla bla bla">
    <input type="submit">
    </form>

    PATTERN
    En lugar de simplemente definir campos de entrada de texto, los desarrolladores
    pueden crear de forma explcita campos de entrada para cosas como nmeros,
    direcciones de correo electrnico y URLs. Como parte de su validacin en el lado
    cliente, los navegadores pueden ahora comprobar que los datos introducidos por el
    usuario en estos campos ms especficos coinciden con la estructura prevista. En
    esencia, los navegadores evalan los valores de la entrada en base a un patrn
    integrado que define como deben ser las entradas vlidas en esos tipos de entrada
    y le advertir al usuario cuando su entrada no coincida con los criterios.
    <input type="text" name="name" pattern="\S{5,10}">

    ATRIBUTOS PARA INPUT


    <Input type = "email" />
    <Input type = "url" />
    <Input type = "fecha" />
    <Input type = "tiempo" />
    <Input type = "datetime" />
    <Input type = "mes" />
    <Input type = "semanas" />
    <Input type = "nmero" />
    <Input type = "rango" />
    <Input type = "tel" />
    <Input type = "buscar" />
    <Input type = "color" />
    <datalist id="dias">

    <! DOCTYPE html>


    <Html>
    <Head>
    <Charset meta = "UTF-8" />
    <Title> Example Nuevos Controles </ title>
    </ Head>
    <Body>
    <Form action = "." oninput = "range_control_value.value = range_control.valueAsNumber">
    <P>
    Nombre: <input type = required "text" name = autofocus "name_control" /> <br />
    Correo Electrnico: <input type = "email" name = "email_control" requerido /> <br />
    URL: <input type = "url" name = "url_control" marcador de posicin = "Escripe la URL de
    tu Pgina web ersonal" /> <br />
    Fecha: <input type = "fecha" name = "date_control" /> <br />
    Tiempo: <input type = "tiempo" name = "time_control" /> <br />
    Fecha y hora de nacimiento: <input type = "datetime" name = "datetime_control" /> <br />
    Mes: <input type = "mes" name = "month_control" /> <br />
    SEMANA: <input type = "semanas" name = "week_control" /> <br />
    Nmero (min -10, mximo 10): <input type = "nmero" name = "number_control" min = "- 10"
    max = valor "10" = "0" /> <br />
    Intervalo (min 0, mx 10): <input type = "rango" name = "range_control" min = "0" max =
    valor "10" = "0" />
    <salida para = "range_control" name = "range_control_value" > 0 </ salida> <br />
    Telfono: <input type = "tel" name = "tel_control" /> <br />
    Trmino de bsqueda: <input type = "buscar" name = "search_control" /> <br />
    Color Favorito: <input type = "color" name = "color_control" /> <br />
    <Input type = "submit" value = "Enviar" />
    </ P>
    </ Form>
    </ Body>
    </ Html>

    BIBLIOGRAFIA:
    http://desarrolloweb.dlsi.ua.es/cursos/2012/nuevos-estandares-desarrollo-sitios-web
    /html5-formularios
    http://www.comocreartuweb.com/curso-de-html/formularios-con-html5/resumiendo-c
    odigo.html
    https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_HTML5
    http://www.genbetadev.com/desarrollo-web/introduccion-a-los-formularios-de-html5-i
    i

    GRACIAS POR SU
    ATENCIN!!

    Das könnte Ihnen auch gefallen