Ny Form Elements i HTML5

September 21  by Eliza

HTML5 introduserer en rekke nye skjemaelementer med nye muligheter. Et bemerkelsesverdig delsett av disse formelementer er utformet for å la et program endre en del av siden dynamisk.

Her er de nye skjemaelementer og hva du kan gjøre med dem:

  • Datalist kan du feste en liste med forslag til en skriving element. Så snart brukeren begynner å skrive i tekstfeltet, vises en liste over forslag og brukeren kan velge fra forslagene med musen. Eksempelkode for et navnefeltet:

    <Label for = "txtList"> Ditt navn
    <Input type = "text"
    liste = "navn"
    id = "txtList" />
    <Datalist id = "navn">
    <Option value = "Andy">
    <Option value = "Andrew">
    <Option value = "Androcles">
    </ Datalist>
    </ Label>

    Opera er i dag den eneste nettleseren som støtter dette elementet, selv om du kan bruke <select> element inne i Datalist objektet for å få ikke-støttende nettlesere for å vise koden din.

  • Måleren viser en numerisk verdi som faller innenfor et område. Brikken støtter en rekke attributter:

    • verdi: Hvis du ikke angir en verdi, blir den første numerisk verdi inne i <meter> </ meter> par verdien.
    • max: Den maksimale mulige verdien av varen.
    • min: Den minste mulige verdien av elementet.
    • høy: Hvis verdien kan defineres som et område, er dette den høye enden av skalaen.
    • lav: Hvis verdien kan defineres som et område, er dette den lave enden av dette området.
    • optimal: Den optimale verdi av elementet.

    Verdien, høye, lave, og optimale verdier bør alle være mellom min og maks.

    Legg merke til at apparatet elementet blir brukt til å sende ut en numerisk element. Bruk <input type = "range"> for numerisk innspill innenfor et område.

    Her er koden for en enkel meter rekkevidde:

    <P>
    A
    <Måleren min = "0"
    max = "10"
    value = "7"> </ meter>
    </ P>

  • utgang er ment å vise tekst utgang. Det indikerer en del av siden som kan endres av et script (vanligvis Javascript). I denne koden fragment:

    <Utgang id = "myOutput">
    Dette er den opprinnelige verdien
    </ Output>
    <-knappen Onclick = "changeOutput ()">
    endre utgå
    </ Knapp>

    Når du trykker på knappen, vil det ringe changeOutput () Javascript-funksjon, som kan se slik ut:

    fungere changeOutput () {
    Var myOutput = document.getElementById ("myOutput");
    myOutput.value = "Verdien er endret";
    } // End changeOutput

    Når denne funksjonen kjører, endrer det innholdet av myOutput.

    Transmisjonselementet støttes bare av Opera. Inntil bruk av dette elementet blir mer utbredt, kan du bruke innerhtml attributt på en side element for å endre innholdet dynamisk gjennom koden.

  • <Fremgang> indikerer hvor mye av en oppgave er fullført (ofte merket som en prosentandel). Det er forventet å bli modifisert gjennom Javascript-kode. HTML5-kode kan se slik ut:

    <P> Nå ødelegge verden. <br />
    <P>
    fremgang:
    <Fremgang value = "25"
    max = "100"> </ fremgang>
    </ P>

    De fleste nettlesere viser fremdriften som ren tekst, men det er rimelig å anta en slags visuell måler kan bli tilgjengelige.

Den nåværende HTML5 omfatter også en keygen element som genererer en krypteringsnøkkel for å føre krypterte data til en server. Den har en disse parametrene:

  • keytype: Angir typen kryptering. (RSA er standard.)
  • utfordring: En streng som føres sammen med den offentlige nøkkel. (Dette er vanligvis spesifisert av tjeneren).

Men noen sikkerhetseksperter vurdere krypteringsmekanisme allerede foreldet, og bruk av verktøyet krever kunnskap om kryptering som et relativt lite antall webutviklere besitter. Dette elementet er ikke støttes i alle nettlesere, og det kan ikke bli en del av standarden.