Novaj tekstecaj input-tipoj

email

retpoŝta adreso

url

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

tel

telefonnumero

search

serĉesprimo

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 aŭtomatan kontroladon, ke la enskribaĵo efektive estas tia, kia ĝi devas esti, aŭ diversajn helpaĵojn taŭgajn por la celita enhavo. Unu ekzemplo, kiu jam estas reala, estas la konduto de iuj TTT-legiloj en poŝtelefonoj, kie la surekrana klavaro ŝanĝiĝas, kiam oni eniras en input-kampon de la tipo email aŭ url: interalie aperas aparte facile atingebla klavo por la signo “@” (ĉe email) aŭ “/” (ĉe url).

Por la enhavo de email-kampoj kaj url-kampoj ekzistas formale difinitaj reguloj, kiujn la TTT-legiloj povas aŭtomate apliki, eble atentigante la uzanton, se la tajpita enhavo nekongruas kun tiuj reguloj, aŭ eble eĉ 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 paĝokreanto povas mem aldoni tiajn regulojn pere de la atributo pattern. Vidu pli pri tio ĉi-poste en la parto pri kontrolado de formularoj.

Laŭ 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.) serĉo-kampoj aspektas alie ol ordinaraj kampoj por entajpado de teksto.

input-oj kun la tipo email povas havi la bulean atributon multiple. Se ĝi ĉeestas, la kampo akceptas liston de retpoŝtaj adresoj (kun komoj - kaj libervolas spacetoj - inter la adresoj). Alie la kampo akceptas nur unu solan retpoŝtan adreson. (La aliaj tekstecaj kampoj ne povas havi la atributon multiple.)

Jen ekzemplo kun ĉiuj novaj tekstecaj input-tipoj:

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

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

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

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

Jen ligilo al paĝo kun la ĉi-antaŭa 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 paŝoj inter la minimumo kaj la maksimumo, decimala nombro

number-kampo povas havi minimumon kaj maksimumon indikitajn per min kaj max, kaj ankaŭ paŝovaloron indikitan per step. Se ne aperas valoro por paŝo en step-atributo, la defaŭlta paŝovaloro estas 1. La paŝovaloro de number-kampo gravas (kredeble) nur se la kampo havas ian rimedon por altigi aŭ malaltigi la valoron laŭpaŝe, ekzemple sagobutonojn.

range-kampo devas havi minimumon kaj maksimumon. Se la minimumon ne indikas min-atributo, ĝi estas 0. Se la maksimumon ne indikas max-atributo, ĝi estas 100. Se ne aperas valoro por paŝo en step-atributo, la defaŭlta paŝovaloro estas 1. La paŝovaloro ĉiam gravas ĉe range-kampoj.

input-elemento kun la tipo number aŭ range povas aspekti tute same kiel ordinara teksto-kampo, sed eblas ankaŭ aliaj aspektoj. number-kampo povas ekzemple havi aldonajn sagobutonojn, per kiuj oni povas altigi kaj malaltigi la nombron laŭpaŝe (tiel estas jam en la TTT-legilo Opera). range-kampo povas aperi kiel ŝovregilo (kies indikilon oni ŝovas 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 ŝovregilon.

range-kampoj havas defaŭltan valoron, validan dekomence, se la kampo ne havas valoron en sia value-atributo. La defaŭlto 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 defaŭlto estas egala al la minimumo.

Jen ekzemplo kun ambaŭ 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 paĝo kun la ĉi-antaŭaj 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 ekzemplopaĝo ne prezentiĝas tre bone. Oni povas per uzo de diversaj Javaskriptaj bibliotekoj jam nun krei tute bonajn range-kampojn por praktike ĉiuj TTT-legiloj, sed tiun aliron mi ne elektis ĉi 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 aldoniĝas, 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. laŭ la agordoj de la uzanto, t.e. laŭ la lokaĵaro 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 (paŝo) klarigitaj ĉi-antaŭe ĉe 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 ĉi-antaŭan regulon por semajnonumeroj.) La indikoj en step estu nombro. Tiu nombro esprimas ĉe la tipo date tagojn, ĉe la tipo month monatojn, ĉe la tipo week semajnojn, ĉe la tipoj time, datetime kaj datetime-local sekundojn. La defaŭlto estas 1 tago/monato/semajno aŭ 60 sekundoj.

Jen ekzemplo kun ĉiuj 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 paĝo kun la ĉi-antaŭa ekzemplo de la dataj-tempaj input-tipoj. En multaj nunaj (Junio 2011) TTT-legiloj tiu ekzemplopaĝo ne prezentiĝas tre bone, sed almenaŭ 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 ĉiuj TTT-legiloj, sed tiun aliron mi ne elektis ĉi 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 aŭ #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 paĝo kun la ĉi-antaŭa ekzemplo de la kolora input-tipo. En multaj nunaj (Junio 2011) TTT-legiloj tiu ekzemplopaĝo ne prezentiĝas tre bone, sed almenaŭ 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 ĉiuj TTT-legiloj, sed tiun aliron mi ne elektis ĉi tie.

Kontrolado laŭ tipo

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

• la valoro de input-kampo de la tipo email devas esti retpoŝta adreso (aŭ pluraj retpoŝtajn retpoŝtaj 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 aŭ range devas esti decimala nombro.
• la valoro de input-kampo data aŭ tempa (tipoj: date, month, week, time, datetime aŭ datetime-local) devas esti dato aŭ tempo laŭ la reguloj por la koncerna tipo.

Noto: La HTML5-normo difinas formalajn regulojn por la formo de retpoŝtaj 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 sufiĉe nerealisma. Ĝi 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 retpoŝtaj 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-paĝo:
      <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 paĝo kun la ĉi-antaŭa ekzemplo de kontrolado laŭ tipo. Se via TTT-legilo regas tian kontroladon, ĝi postulos, ke ĉiuj kampoj estu ĝuste plenigitaj (aŭ estu malplenaj). Alie ĝi ne permesos al vi sendi la formularon. Tute povas esti, ke via TTT-legilo regas tian kontroladon nur por unu aŭ kelkaj el la kampoj, sed ne por ĉiuj.

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 aŭ color), select kaj textarea.

Jen ekzemploj de la atributo required:

<form>
  <div>
    <label>Retpoŝto:
      <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>Ŝatokupo:
      <select name="shatokupo" required="required">
        <option></option>
        <option value="1">poŝtmarkokolektado</option>
        <option value="2">monerokolektado</option>
        <option value="3">fotado</option>
        <option value="4">ŝakludado</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 paĝo kun la ĉi-antaŭaj ekzemploj de la required-atributo. Se via TTT-legilo regas tiun novan atributon, ĝi postulos, ke vi iel plenigu ĉiujn kampojn. Alie ĝi ne permesos al vi sendi la formularon. Povas esti, ke ĝi ankaŭ postulos, ke la retpoŝta kampo enhavu eblan retpoŝtan adreson.

La atributo pattern

La atributo pattern, kiu indikas modelon, povas esti uzata ĉe ĉiuj tekstecaj input-tipoj: text, email, url, tel kaj search, kaj ankaŭ ĉe input-elementoj kun la tipo password.

Tia modelo uziĝu ĉe kontrolado de la valoro de la kampo. La modelo havu la formon de regulesprima ŝablono. Se pattern estas indikita por email-kampo aŭ url-kampo, la modelo de tiu pattern estu uzata anstataŭ eventualaj defaŭltaj tipo-reguloj por tiaj kampoj.

Noto: Regulesprimoj estas speco de tre flekseblaj ĵokeraj esprimoj, per kiuj oni povas difini modelojn de tekstoĉenoj. Por pattern-atributoj oni devas uzi regulesprimojn laŭ la reguloj de ECMAScript, t.e. de Javaskripto. Tio estas iom komplika temo, kiun mi provizore ne klarigas ĉi tie.

Se oni aldonas al input-elemento kun pattern-atributo ankaŭ 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, ĝi povas uzi la tekston de la title-atributo kiel parton de la eraromesaĝo. Oni tamen memoru, ke la title-atributo montriĝas ankaŭ kiam oni musumas sur la input-elemento. Ĝi do havu la formon de klarigo, ne la formon de eraromesaĝo.

Jen ekzemploj de la pattern-atributo:

<form>
  <div>
    <label>Retpoŝta adreso:
      <input type="email" name="retposhto" size="30"
        pattern="[^ @]+@[^ @]+\.(com|net)$"
        title="Nur retpoŝtaj 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 paĝo kun la ĉi-antaŭaj ekzemploj de la pattern-atributo. Se via TTT-legilo regas tiun novan atributon, ĝi postulos, ke vi plenigu la kampojn laŭ la indikitaj modeloj.

La atributoj min kaj max

Kiam nombreca input-kampo (kun la tipo number aŭ la tipo range) havas iun el la atributoj min (= minimumo) kaj max (= maksimumo), la TTT-legilo povas kontroli, ĉu la nombro-valoro de la kampo obeas tiujn limigojn. Se ne, ĝi 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 paĝo kun la ĉi-antaŭa 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 ĉiam aŭtomate kontrolas formularon antaŭ ol foresendi ĝin (kaj eventuale haltigas la forsendon, sed ĝi trovas erarojn), t.e. ĝi tion faras, se ĝi konas kaj sekvas tiun parton de la HTML5-normo. Sed oni povas malŝalti 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 paĝo kun la ĉi-antaŭa ekzemplo de la atributo novalidate.