Svona gerum við: HTML fyrir innsláttareyðublöð

Skrifað 1. júní 2004, kl. 13:11

Þessi dæmi eru hvergi nærri tæmandi útlistun á því hvernig er gott að skrifa HTML eyðublöð, en þau taka á yfirgnæfandi meirihluta þeirra innsláttarhluta sem maður þarf að skrifa dags daglega.

Ég vona að þetta komi einhverjum að gagni.

Venjulegur textainnsláttarreitur:

<p class="fi_txt">
  <label for="abc1">Nafn:</label>
  <input id="abc1" name="nafn" />
</p>

Reitur með "required" virkni:

<p class="fi_txt req">
  <label for="abc1"><acronym class="req" title="þarf að fylla út: ">*</acronym>Nafn:</label>
  <input id="abc1" name="nafn" />
</p>

Innsláttareitur fyrir lykilorð:

<p class="fi_txt fi_pwd">
  <label for="abc2">Lykilorð:</label>
  <input type="password" id="abc2" name="passwd" />
</p>

Ath að lykiloðareitir eru líka af klassanum fi_txt, því þeir eru jú í rótina ekkert annað en textainnsláttarreitir. Þannig er klass-nafnið fi_pwd í raun bara nánari skilgreining á inntaki textareitsins.

Á svipaðan hátt má nota sérstök klass-nöfn til að marka textareiti sem taka innslátt á fyrirfram gefnu formi, s.s. dagsetningar, kennitölur, símanúmer, o.fl.

Dæmi:

• fi_date
• fi_kt
• fi_tel
• fi_email
• fi_url
• fi_ccnum
• fi_ccexp
• fi_qty
• fi_pnr
• o.s.frv.

Textarea reitur:

<p class="fi_bdy">
  <label for="abc3">Lykilorð:</label>
  <textarea id="abc3" cols="60" rows="10" name="aths"></textarea>
</p>

Almennt séð forðast ég að nota size="" stillingar á innsláttarreiti, en í sumum tilfellum er það skynsamlegt - sérstaklega á þeim reitum sem hafa maxlength="" stillinguna virka. Í tilfelli <textarea> þá nota ég líka cols="" og rows="" stillingarnar því án þeirra þá teikna flestir vafrar reitinn svo smánarlega lítinn þegar síðan er birt CSS-laus, að hann er ekki nothæfur til innsláttar.

"Select" fellivalmynd:

<p class="fi_sel">
  <label for="abc4">Svar óskast:</label>
  <select id="abc4" name="replymethod">
    <option value="foo" selected="selected">í tölvupósti</option>
    <option value="fle">símleiðis</option>
    <option value="bla">bréfleiðis</option>
   </select>
</p>

Ath: ef menn vilja að sjálfgefið sé ekkert valið, þá má setja tóma línu <option value=""></option> efst í listann. Ég forðast eins og heitan eldinn að setja "Veldu stöff..." í efstu línuna. Betra að hafa hana bara tóma.

Hakreitur:

<p class="fi_chk"><label for="abc5">
  <input type="checkbox" id="abc5" name="agree" value="yes" />
  Ég hef lesið <a href="skilmalar.html">skilmálana</a></label>
</p>

Takið eftir að <label> markið nær utan um bæði reitinn og textann sem fylgir honum.

Margir hakreitir:

<fieldset class="fi_chk">
  <h4>Fá vöffluna með:</h4>
  <ul>
    <li><label for="abc6">
      <input type="checkbox" id="abc6" name="medl" value="sukkul" />
      súkkulaði</label>
    </li>
    <li><label for="abc7">
      <input type="checkbox" id="abc7" name="medl" value="rjomi" />
      rjóma</label>
    </li>
    <li><label for="abc8">
      <input type="checkbox" id="abc8" name="medl" value="sulta" />
      sultu</label>
    </li>
  </ul>
</fieldset>

Margir "radio" hnappar:

<fieldset class="fi_chk">
  <h4>Kyn:</h4>
  <ul class="fi_rdo">
    <li><label for="abc9">
      <input type="radio" id="abc9" name="kyn" value="kvk" />
      Kona</label>
    </li>
    <li><label for="abc10">
      <input type="radio" id="abc10" name="kyn" value="kk" />
      Karl</label>
    </li>
    <li><label for="abc11">
      <input type="radio" id="abc11" name="kyn" value="wtf" />
      Geimvera</label>
    </li>
  </ul>
</fieldset>

Senda hnappur:

<p class="fi_btn"><input type="submit" value="Senda" /></p>

Senda og hreinsa hnappar:

<p class="fi_btn">
  <input type="button" class="reset" value="Hreinsa" />
  <input type="submit" value="Senda" />
</p>

Ath: "Hreinsa" hnappurinn er type="button" til að tryggja að hann sé meinlaus. Svo keyrum við lítið, almennt Javascript fall á window.onload til að glæða virkni í hnappinn og heimta staðfestingu frá notandanum.

Senda, hreinsa + aðrir/auka sendihnappar:

<p class="fi_btn">
  <input type="button" class="reset" value="Hreinsa"/>
  <input type="submit" class="back" value="Til baka" />
  <input type="submit" value="Senda" />
</p>

Dæmi um það sem ég kalla "aðra" sendihnappar, eru "Hætta við", "Bakka", o.þ.h. en oft vill maður gefa slíkum hnöppum annað útlit en "aðal" hnöppunum.

Margir reitir grúppaðir saman:

Ef þörf er á að grúppa saman marga reiti þá notum við <fieldset> í staðinn fyrir <div> og oft má nota class="lysandinafn" á <fieldset> markið. <h3> markar fyrirsagnir:

<fieldset class="address">
  <h3>Póstfang:</h3>
  <p class="fi_txt"><label for="abc13">Heimilisfang:</label> <input id="abc13" name="addr" /></p>
  <p class="fi_txt"><label for="abc14">Borg/bær:</label> <input id="abc14" name="city" /></p>
  <p class="fi_txt"><label for="abc15">Land:</label> <input id="abc15" name="cntry" /></p>
</fieldset>

(HTML staðallin segir að maður eigi að nota <legend>, en ekki <h3>, til að marka fyrirsögn grúppunnar, en <legend> hefur þann hvimleiða galla að það er ekki hægt að nota CSS til að stjórna útliti þess nema að afar takmörkuðu leyti. Því notum við <h3>.)

Afstemming með Javascript (validation):

Dæmi um einföld "validation" föll má jafnan finna í skránni: "js/script.js". Einnig má augljóslega í sumum tilfellum nýta sér req klass-nafnið til að sjálfvirknivæða ákveðna hluta afstemmingarinnar. Þá má nota klass-nöfnin sem lýsa innitaki innsláttarreitanna (fi_pwd, fi_kt, fi_email, o.s.frv.) til að sjálfvirknivæða afstemminguna enn frekar.

Athugasemdir? Spurningar?