ugrás a tartalomhoz

Karácsonyi formcontrol CSS

janoszen · 2005. Dec. 25. (V), 15.51
Egy ideje egy általam gyártott weboldal kapcsán felmerült kérdés után igen heves vita kerekedett a HTML form elemei formázása kapcsán. Azóta azon dolgoztam, hogy valami épkézláb koncepciót dolgozzak ki arra, hogy hogyan lehetne viszonylag tisztességesen elhelyezni a formok mindenféle komponenseit.

A megoldásom távol a tökéletestől, de gondoltam, megosztom veletek.

A HTML tesztkód:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html lang="hu" xml:lang="hu">  
  3.   <head>  
  4.     <title>Test document</title>  
  5.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  6.     <link rel="stylesheet" type="text/css" href="formcontrol.css" />  
  7.   </head>  
  8.     
  9.   <body>  
  10.    <div id="container">  
  11.     <form action="#" method="get">  
  12.      <div class="formcontrol textfield">  
  13.       <label for="mytextfield1">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="text" name="mytextfield1" id="mytextfield1" value="" />  
  14.      </div>  
  15.   
  16.      <div class="formcontrol passwordfield">  
  17.       <label for="mytextfield2">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="password" name="mytextfield2" id="mytextfield2" value="" />  
  18.      </div>  
  19.   
  20.      <div class="formcontrol filefield">  
  21.       <label for="mytextfield3">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="file" name="mytextfield3" id="mytextfield3" value="" />  
  22.      </div>  
  23.   
  24.      <div class="formcontrol textarea">  
  25.       <label for="mytextfield4">Egy megfelelően hosszú string<span class="colon">:</span></label> <textarea name="mytextfield4" id="mytextfield4"></textarea>  
  26.      </div>  
  27.   
  28.      <div class="formcontrol dropdown">  
  29.       <label for="mytextfield5">Egy megfelelően hosszú string<span class="colon">:</span></label> <select name="mytextfield5" id="mytextfield5" size="1"></select>  
  30.      </div>  
  31.   
  32.      <div class="formcontrol selectlist">  
  33.       <label for="mytextfield6">Egy megfelelően hosszú string<span class="colon">:</span></label> <select name="mytextfield6" id="mytextfield6" size="4"></select>  
  34.      </div>  
  35.   
  36.      <div class="formcontrol checkbox">  
  37.       <label for="mytextfield7">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield7" id="mytextfield7" value="1" />  
  38.      </div>  
  39.     </form>  
  40.    </div>  
  41.   </body>  
  42. </html>  
A hozzá tartozó CSS kód így néz ki:
  1. div.textfield,  
  2.  div.passwordfield,  
  3.  div.filefield,  
  4.  div.checkbox,  
  5.  div.dropdown,  
  6.  div.selectlist,  
  7.  div.textarea  
  8. {  
  9.  text-align:right;  
  10.  vertical-align:top;  
  11.    
  12.  margin-top:2px;  
  13.  margin-bottom:2px;  
  14.    
  15.  position:relative;  
  16.  overflow:auto;  
  17.  _height:1%;  
  18. }  
  19.   
  20. div.textfield label,  
  21.  div.passwordfield label,  
  22.  div.filefield label,  
  23.  div.checkbox label,  
  24.  div.dropdown label,  
  25.  div.selectlist label,  
  26.  div.textarea label  
  27. {  
  28.  width:32%;  
  29.  float:left;  
  30.  text-align:right;  
  31. }  
  32.   
  33. div.textfield input,  
  34.  div.passwordfield input,  
  35.  div.filefield input,  
  36.  div.checkbox input,  
  37.  div.dropdown select,  
  38.  div.selectlist select,  
  39.  div.textarea textarea  
  40. {  
  41.  margin-left:auto;  
  42.  min-width:0px;  
  43.  width:64%;  
  44. }  
A továbbiakban még fejlesztgetem az ötletet, mert még van ötletem, nem is kevés.

Többek között:
  • Hiányoznak még az OK és RESET gombok
  • Hiányoznak a RADIO buttonok
  • A checkboxok megjelenése még nem olyan, mint szeretném.
  • Szándékszom létrehozni RADIOLIST és CHECKBOXLIST kontrollokat, amelyek gy. egy DIV, amelyet az overflow tulajdonság segítségével scrollozhatóvá lehet tenni. Aki programozott már Windóz alá mondjuk Dephiben, az ismeri ezt a kontrollt.
  • Szándékszom beépíteni az itt, a Weblaboron bemutatott képválasztó selectet.


További ötletek, javaslatok, megoldások jöhetnek ide vagy a kapcsolat menün keresztül magánba. A magánba küldött üzeneteket feldolgozom és felteszem ide.

Kellemes további karácsonyt!

ProClub
‹ Egyszerre több iframe frissítése createTextNode() és a &copy; ›
 ■
1

Checkboxlist

janoszen · 2005. Dec. 25. (V), 16.58
Sziasztok!

Megint én. :) Elkeztem csinálni a Checkboxlisthez a kódot és a következőt alkottam:
  1. fieldset.radiolist, fieldset.checkboxlist  
  2. {  
  3.  text-align:left;  
  4.  margin:2px;  
  5.  border:1px solid #c0c0c0;  
  6. }  
  7.   
  8. fieldset.radiolist div.radio,  
  9.  fieldset.checkboxlist div.checkbox  
  10. {  
  11.  overflow:visible;  
  12.  text-align:left;  
  13.  background-color:#e0e0e0;  
  14. }  
  15.   
  16. fieldset.radiolist div.radio label,  
  17.  fieldset.checkboxlist div.checkbox label  
  18. {  
  19.  width:auto;  
  20.  float:none;  
  21.  margin:0px;  
  22.  margin-left:20px;  
  23. }  
  24.   
  25. fieldset.radiolist .colon,  
  26.  fieldset.checkboxlist .colon  
  27. {  
  28.  display:none;  
  29. }  
  30.   
  31. fieldset.radiolist div.radio input,  
  32.  fieldset.checkboxlist div.checkbox input  
  33. {  
  34.  position:absolute;  
  35.  left:0px;  
  36.  margin-top:2px;  
  37.  _margin-top:0px;  
  38.  width:20px;  
  39. }  
A HTML:
  1. <fieldset class="checkboxlist">  
  2.  <legend>Checkbox list</legend>  
  3.  <div class="formcontrol checkbox">  
  4.   <label for="mytextfield8">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield8" id="mytextfield8" value="1" />  
  5.  </div>  
  6.   
  7.  <div class="formcontrol checkbox">  
  8.   <label for="mytextfield9">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield9" id="mytextfield9" value="1" />  
  9.  </div>  
  10.   
  11.  <div class="formcontrol checkbox">  
  12.   <label for="mytextfield10">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield10" id="mytextfield10" value="1" />  
  13.  </div>  
  14. </fieldset>  
A probléma az, hogy sehogy sem tudom az overflow: tulajdonsággal rábírni a boxot arra, hogy rendesen működjön. Amíg nincs overflow, semmi gond. De amint van, nem jó.

Meg tudja valaki nézni, hogy mi lehet az oka?

Köszi
2

<Nincs cím>

Anonymous · 2006. Feb. 27. (H), 21.06
Egy ilyen formra milyen irányelvek vonatkoznak? Arra gondolok, lehet-e táblázattal megjeleníteni vagy csak CSS-sel megengedett a formázása? Hisz az alap html-ben is törekedni kell a jól szerkesztettségre és egy a fentihez hasonló "nyers" űrlap meglehetősen csúnya/átláthatatlan tud lenni.