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

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

"Klippa-og-líma" kóđadćmi fyrir forritara sem vilja skrifa einföld og ađgengileg HTML eyđublöđ sem er síđan auđvelt ađ fegra međ CSS. Upphaflega skrifađ sem inanhússplagg fyrir Hugsmiđjuna

Ţ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?


Ţessum svarhala hefur veriđ lokađ. Kćrar ţakkir til ţeirra sem tóku ţátt í umrćđunni.


 

Flakk um vefsvćđiđ



 

Nýleg svör frá lesendum

  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Dinesh (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Ada (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • notandi (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Geir (Lausnin á efnahagsvandanum)
  • Jenný (Lausnin á efnahagsvandanum)
  • Óli Jens (Lausnin á efnahagsvandanum)
  • Már (Lausnin á efnahagsvandanum)
  • Kjartan S (Lausnin á efnahagsvandanum)

 

 

Yfirlit yfir ţetta skjal

(Atriđin í listanum vísa á ákveđna kafla ofar á síđunni.)