Novaj tekstecaj input-tipoj

email

retposxta adreso

url

url-o, t.e. TTT-a adreso

tel

telefonnumero

search

sercxesprimo

input-elemento kun unu el tiuj tipoj baze aspektu kaj funkciu same kiel input-elemento kun la tipo text, sed la TTT-legilo povas aldoni auxtomatan kontroladon, ke la enskribajxo efektive estas tia, kia gxi devas esti, aux diversajn helpajxojn tauxgajn por la celita enhavo. Unu ekzemplo, kiu jam estas reala, estas la konduto de iuj TTT-legiloj en posxtelefonoj, kie la surekrana klavaro sxangxigxas, kiam oni eniras en input-kampon de la tipo email aux url: interalie aperas aparte facile atingebla klavo por la signo “@” (cxe email) aux “/” (cxe url).

Por la enhavo de email-kampoj kaj url-kampoj ekzistas formale difinitaj reguloj, kiujn la TTT-legiloj povas auxtomate apliki, eble atentigante la uzanton, se la tajpita enhavo nekongruas kun tiuj reguloj, aux eble ecx rekte malebligante enskribadon de nekongrua teksto. Por la tipoj tel kaj search tiaj formalaj reguloj ne ekzistas (telefonnumeroj povas esti tre diversaj en malsamaj landoj). Sed la pagxokreanto povas mem aldoni tiajn regulojn pere de la atributo pattern. Vidu pli pri tio cxi-poste en la parto pri kontrolado de formularoj.

Laux noto en la HTML5-normo input-oj kun la tipo search povas aspekti iom alie ol la ceteraj tekstecaj input-tipoj, se en la koncerna platformo (komputilspeco, operacisistemo k.s.) sercxo-kampoj aspektas alie ol ordinaraj kampoj por entajpado de teksto.

input-oj kun la tipo email povas havi la bulean atributon multiple. Se gxi cxeestas, la kampo akceptas liston de retposxtaj adresoj (kun komoj - kaj libervolas spacetoj - inter la adresoj). Alie la kampo akceptas nur unu solan retposxtan adreson. (La aliaj tekstecaj kampoj ne povas havi la atributon multiple.)

Jen ekzemplo kun cxiuj novaj tekstecaj input-tipoj:

<form>
  <div>
    <label>Retposxto: <input type="email" name="retposhto" size="30"/></label>
  </div>

  <div>
    <label>TTT-pagxo: <input type="url" name="urlo" size="30"/></label>
  </div>

  <div>
    <label>Telefonnumero: <input type="tel" name="telnumero" size="30"/></label>
  </div>

  <div>
    <label>Sercxi: <input type="search" name="sercho" size="30"/></label>
  </div>
</form>

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo kun tekstecaj input-kampoj.

Novaj nombrecaj input-tipoj

number

decimala nombro

range

nepreciza decimala nombro inter minumumo kaj maksimumo

Nombrecaj input-elementoj povas havi la jenajn specialajn atributojn:

min

la minimuma valoro, decimala nombro

max

la maksimuma valoro, decimala nombro

step

la permesataj pasxoj inter la minimumo kaj la maksimumo, decimala nombro

number-kampo povas havi minimumon kaj maksimumon indikitajn per min kaj max, kaj ankaux pasxovaloron indikitan per step. Se ne aperas valoro por pasxo en step-atributo, la defauxlta pasxovaloro estas 1. La pasxovaloro de number-kampo gravas (kredeble) nur se la kampo havas ian rimedon por altigi aux malaltigi la valoron lauxpasxe, ekzemple sagobutonojn.

range-kampo devas havi minimumon kaj maksimumon. Se la minimumon ne indikas min-atributo, gxi estas 0. Se la maksimumon ne indikas max-atributo, gxi estas 100. Se ne aperas valoro por pasxo en step-atributo, la defauxlta pasxovaloro estas 1. La pasxovaloro cxiam gravas cxe range-kampoj.

input-elemento kun la tipo number aux range povas aspekti tute same kiel ordinara teksto-kampo, sed eblas ankaux aliaj aspektoj. number-kampo povas ekzemple havi aldonajn sagobutonojn, per kiuj oni povas altigi kaj malaltigi la nombron lauxpasxe (tiel estas jam en la TTT-legilo Opera). range-kampo povas aperi kiel sxovregilo (kies indikilon oni sxovas inter la minimumo kaj la maksimumo).

Oni aparte rimarku, ke range-kampoj estu uzataj nur kiam la preciza valoro ne estas tre grava. Pro tio la TTT-legiloj povas uzi pli simplan formon por tia input-elemento, ekzemple sxovregilon.

range-kampoj havas defauxltan valoron, validan dekomence, se la kampo ne havas valoron en sia value-atributo. La defauxlto estas la minimumo plus la duono de la diferenco inter la minimumo kaj la maksimumo, krom se la maksimumo estas malpli granda ol la minimumo. En la lasta nekutima okazo la defauxlto estas egala al la minimumo.

Jen ekzemplo kun ambaux novaj nombrecaj input-tipoj:

<form>

  <div>
    <label>Kiomo (tipo = <code>number</code>):
    <input type="number" name="nombro1"/></label>
  </div>

  <div>
    <label>Kiomo (tipo = <code>range</code> 0,00 - 100,00):
    <input type="range" name="nombro2"
       min="0.00" max="100.00" step="0.01"
       value="10.00"/></label>
  </div>

</form>

Jen ligilo al pagxo kun la cxi-antauxaj ekzemploj de number-kampo kaj range-kampo, kaj kun Javaskripta kodo, kiu aldonas montradon de la aktuala valoro de la range-kampo. En multaj nunaj (Junio 2011) TTT-legiloj tiu ekzemplopagxo ne prezentigxas tre bone. Oni povas per uzo de diversaj Javaskriptaj bibliotekoj jam nun krei tute bonajn range-kampojn por praktike cxiuj TTT-legiloj, sed tiun aliron mi ne elektis cxi tie.

Novaj dataj-tempaj input-tipoj

date

dato, t.e. jaro, monato kaj tago (sen horzono)

month

monato, t.e. jaro kaj monato (sen horzono)

week

semajno, t.e. jaro kaj semajno (sen horzono)

time

horo, t.e. horo, minuto kaj sekundo (sen horzono)

datetime

(tuttera) dato kaj horo (kun horzono)

datetime-local

loka dato kaj horo (sen horzono)

La formo uzata por indiki tiujn diversajn datumojn estas detale montrataj en la klarigoj pri la elemento time. Sed aldonigxas, ke semajnonumero estu indikata per la majuskla litero W kaj du ciferoj, ekzemple 2012-W03 = la tria semajno de la jaro 2012.

TTT-legilo, kiu regas tiujn novajn tipojn, montru al la uzanto specialajn elektilojn por la celita datumtipo. La datumformo uzata en tiu interagado kun la uzanto estas sendependa de la formo, en kiu la legilo forsendas la datumojn, kiam la formularo estas preta. La HTML5-normo diras, ke la TTT-legiloj prefere montru datojn, horojn k.t.p. laux la agordoj de la uzanto, t.e. laux la lokajxaro de la uzanto. Tio signifas ekzemple, ke por la tipo date TTT-legiloj povas montri kalendarosimilan elektilon, per kiu la uzanto povas elekti jaron, monaton kaj tagon.

Dataj-tempaj input-elementoj povas aldone havi la atributojn min (minimumo), max (maksimumo) kaj step (pasxo) klarigitaj cxi-antauxe cxe la nombrecaj input-tipoj. (La indikoj pri min kaj max sekvu esence la samajn regulojn, kiuj validas por la atributo datetime de la time-elemento, kaj la cxi-antauxan regulon por semajnonumeroj.) La indikoj en step estu nombro. Tiu nombro esprimas cxe la tipo date tagojn, cxe la tipo month monatojn, cxe la tipo week semajnojn, cxe la tipoj time, datetime kaj datetime-local sekundojn. La defauxlto estas 1 tago/monato/semajno aux 60 sekundoj.

Jen ekzemplo kun cxiuj novaj dataj-tempaj input-tipoj:

<form>
  <div>
    <label>Dato: 
    <input type="date" value="2012-02-28" name="dato"/></label>
  </div>

  <div>
    <label>Monato:
    <input type="month" value="2012-02" name="monato"/></label>
  </div>

  <div>
    <label>Semajno:
    <input type="week" value="2012-W06" name="semajno"/></label>
  </div>

  <div>
    <label>Horo:
    <input type="time" value="12:30:20" name="horo"
      min="10:00" max="18:00" step="10"/></label>
  </div>

  <div>
    <label>Dato kaj horo:
    <input type="datetime" value="2012-02-28T12:30:00Z" name="datohoro"/></label>
  </div>

  <div>
    <label>Loka dato kaj horo:
    <input type="datetime-local"
      value="2012-02-28T12:30:00" name="lokadatohoro"
      min="2012-02-10T12:00:00"
      max="2012-02-28T12:00:00"
      step="30"/></label>
  </div>
</form>

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de la dataj-tempaj input-tipoj. En multaj nunaj (Junio 2011) TTT-legiloj tiu ekzemplopagxo ne prezentigxas tre bone, sed almenaux la legilo Opera jam havas tre bonan subtenon de tiaj kampoj. Oni povas per uzo de diversaj Javaskriptaj bibliotekoj jam nun krei tute bonajn elektilojn de datoj kaj horoj por praktike cxiuj TTT-legiloj, sed tiun aliron mi ne elektis cxi tie.

Nova kolora input-tipo

Per input-elemento kun la tipo color oni povas elekti koloron (koditan kiel #-signo plus ses deksesumaj ciferoj, ekzemple #000000 = nigro aux #FFFFFF = blanko, kaj sekve uzeblan ekzemple en stilfolia indikado de koloro).

Jen ekzemplo de color-kampo:

<form>
  <div>
    <label>Bv. elekti koloron:
    <input type="color" value="#ff0000"/></label>
  </div>
</form>

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de la kolora input-tipo. En multaj nunaj (Junio 2011) TTT-legiloj tiu ekzemplopagxo ne prezentigxas tre bone, sed almenaux la legilo Opera jam havas tre bonan subtenon de kolor-kampoj. Oni povas per uzo de diversaj Javaskriptaj bibliotekoj jam nun krei tute bonajn kolorelektilojn por praktike cxiuj TTT-legiloj, sed tiun aliron mi ne elektis cxi tie.

Kontrolado laux tipo

La tipo de input-elemento, indikita de gxia type-atributo, povas limigi, kiaj datumoj estas akcepteblaj:

• la valoro de input-kampo de la tipo email devas esti retposxta adreso (aux pluraj retposxtajn retposxtaj adresoj).
• la valoro de input-kampo de la tipo url devas esti url-o (TTT-adreso).
• la valoro de input-kampo de la tipo number aux range devas esti decimala nombro.
• la valoro de input-kampo data aux tempa (tipoj: date, month, week, time, datetime aux datetime-local) devas esti dato aux tempo laux la reguloj por la koncerna tipo.

Noto: La HTML5-normo difinas formalajn regulojn por la formo de retposxtaj adresoj. Tiu difino estas intence kaj konscie alia ol la reguloj difinitaj en la dokumento RFC 5322, kiu principe estas norma pri tiaj adresoj. La kialo estas, ke tiu normo estas suficxe nerealisma. Gxi enhavas multajn eblojn, kiuj praktike neniam ajn estas uzataj, kaj kiuj tre surprizus ordinarajn uzantojn. La reguloj de HTML5 estas multe pli utilaj por kontrolado de realaj retposxtaj adresoj.

Jen ekzemploj de formularo kun kampoj, kiuj postulas certajn specojn de datumoj:

<form>
  <div>
    <label>Dato: 
    <input type="date" name="dato"/></label>
  </div>

  <div>
    <label>Horo:
    <input type="time" name="horo"
      min="10:00" max="18:00" step="10"/></label>
  </div>

  <div>
    <label>TTT-pagxo:
      <input type="url" name="urlo" size="30"/></label>
  </div>

  <div>
    <label>Nombro:
    <input type="number" name="nombro"/></label>
  </div>
  
  <div>
    <label>Koloro:
    <input type="color" name="koloro"/></label>
  </div>
  
  <div>
    <input type="submit" value="Sendi"/>
  </div>
</form>

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de kontrolado laux tipo. Se via TTT-legilo regas tian kontroladon, gxi postulos, ke cxiuj kampoj estu gxuste plenigitaj (aux estu malplenaj). Alie gxi ne permesos al vi sendi la formularon. Tute povas esti, ke via TTT-legilo regas tian kontroladon nur por unu aux kelkaj el la kampoj, sed ne por cxiuj.

La atributo required

Se formulara kampo havas la bulean atributon required, tiam tiu kampo devas enhavi ian valoron. La atributon required povas havi la elementoj input (krom se la tipo estas hidden, range aux color), select kaj textarea.

Jen ekzemploj de la atributo required:

<form>
  <div>
    <label>Retposxto:
      <input type="email" name="retposhto" size="30"
        required="required"/></label>
  </div>

  <div>
    <label>Nomo:
      <input type="text" name="nomo" size="30"
        required="required"/></label>
  </div>

  <div>
    <label>Sxatokupo:
      <select name="shatokupo" required="required">
        <option></option>
        <option value="1">posxtmarkokolektado</option>
        <option value="2">monerokolektado</option>
        <option value="3">fotado</option>
        <option value="4">sxakludado</option>
        <option value="5">muziko</option>
      </select>
    </label>
  </div>

  <div>
    <label>Teksto:<br/>
      <textarea cols="60" rows="4" name="teksto"
        required="required"></textarea></label>
  </div>

  <div>
    <input type="submit" value="Sendi"/>
  </div>
</form>

Jen ligilo al pagxo kun la cxi-antauxaj ekzemploj de la required-atributo. Se via TTT-legilo regas tiun novan atributon, gxi postulos, ke vi iel plenigu cxiujn kampojn. Alie gxi ne permesos al vi sendi la formularon. Povas esti, ke gxi ankaux postulos, ke la retposxta kampo enhavu eblan retposxtan adreson.

La atributo pattern

La atributo pattern, kiu indikas modelon, povas esti uzata cxe cxiuj tekstecaj input-tipoj: text, email, url, tel kaj search, kaj ankaux cxe input-elementoj kun la tipo password.

Tia modelo uzigxu cxe kontrolado de la valoro de la kampo. La modelo havu la formon de regulesprima sxablono. Se pattern estas indikita por email-kampo aux url-kampo, la modelo de tiu pattern estu uzata anstataux eventualaj defauxltaj tipo-reguloj por tiaj kampoj.

Noto: Regulesprimoj estas speco de tre flekseblaj jxokeraj esprimoj, per kiuj oni povas difini modelojn de tekstocxenoj. Por pattern-atributoj oni devas uzi regulesprimojn laux la reguloj de ECMAScript, t.e. de Javaskripto. Tio estas iom komplika temo, kiun mi provizore ne klarigas cxi tie.

Se oni aldonas al input-elemento kun pattern-atributo ankaux title-atributon, tiam la teksto de la title-atributo devas klarigi (en maniero komprenebla por ordinaraj uzantoj) la modelon de la pattern-atributo. Kiam TTT-legilo konstatas, ke enskribita valoro ne kongruas kun tiu modelo, gxi povas uzi la tekston de la title-atributo kiel parton de la eraromesagxo. Oni tamen memoru, ke la title-atributo montrigxas ankaux kiam oni musumas sur la input-elemento. Gxi do havu la formon de klarigo, ne la formon de eraromesagxo.

Jen ekzemploj de la pattern-atributo:

<form>
  <div>
    <label>Retposxta adreso:
      <input type="email" name="retposhto" size="30"
        pattern="[^ @]+@[^ @]+\.(com|net)$"
        title="Nur retposxtaj adresoj en la retregionoj '.com' kaj '.net' estas akceptataj"/></label>
  </div>

  <div>
    <label>UEA-kodo:
      <input type="text" name="ueakodo" size="30"
        pattern="^[a-z]{4}-[a-z]$"
        title="UEA-kodo havas la formon 'xxxx-x', kie 'x' povas esti iu ajn minuskla Askia litero"/></label>
  </div>

  <div>
    <input type="submit" value="Sendi"/>
  </div>
</form>

Jen ligilo al pagxo kun la cxi-antauxaj ekzemploj de la pattern-atributo. Se via TTT-legilo regas tiun novan atributon, gxi postulos, ke vi plenigu la kampojn laux la indikitaj modeloj.

La atributoj min kaj max

Kiam nombreca input-kampo (kun la tipo number aux la tipo range) havas iun el la atributoj min (= minimumo) kaj max (= maksimumo), la TTT-legilo povas kontroli, cxu la nombro-valoro de la kampo obeas tiujn limigojn. Se ne, gxi povas atentigi pri tio, kaj haltigi forsendadon de la formularo.

Jen ekzemplo:

<form>

  <div>
    <label>Kiomo (minimume 10, maksimume 30):
    <input type="number" name="nombro" min="10" max="30"/></label>
  </div>

  <div>
    <input type="submit" value="Sendi"/>
  </div>

</form>

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de la atributoj min kaj max. Via TTT-legilo eble ne permesos al vi forsendi tiun formularon, se vi ne sekvos la indikojn pri minimumo kaj maksimumo.

La atributo novalidate

Normale la TTT-legilo cxiam auxtomate kontrolas formularon antaux ol foresendi gxin (kaj eventuale haltigas la forsendon, sed gxi trovas erarojn), t.e. gxi tion faras, se gxi konas kaj sekvas tiun parton de la HTML5-normo. Sed oni povas malsxalti la kontroladon. Tion oni faras per la bulea atributo novalidate (= ne kontroli).

Jen ekzemplo:

<form novalidate="novalidate">

  <div>
    <label>Nomo (deviga):
      <input type="text" name="nomo" size="30"
        required="required"/></label>
  </div>

  <div>
    <label>UEA-kodo:
      <input type="text" name="ueakodo" size="30"
        pattern="^[a-z]{4}-[a-z]$"
        title="UEA-kodo havas la formon 'xxxx-x', kie 'x' povas esti iu ajn minuskla Askia litero"/></label>
  </div>

  <div>
    <label>Kiomo (minimume 10, maksimume 30):
    <input type="number" name="nombro" min="10" max="30"/></label>
  </div>
  
  <div>
    <input type="submit" value="Sendi"/>
  </div>
</form>

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de la atributo novalidate.