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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="hu" xml:lang="hu">
  <head>
    <title>Test document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="formcontrol.css" />
  </head>
  
  <body>
   <div id="container">
    <form action="#" method="get">
     <div class="formcontrol textfield">
      <label for="mytextfield1">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="text" name="mytextfield1" id="mytextfield1" value="" />
     </div>

     <div class="formcontrol passwordfield">
      <label for="mytextfield2">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="password" name="mytextfield2" id="mytextfield2" value="" />
     </div>

     <div class="formcontrol filefield">
      <label for="mytextfield3">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="file" name="mytextfield3" id="mytextfield3" value="" />
     </div>

     <div class="formcontrol textarea">
      <label for="mytextfield4">Egy megfelelően hosszú string<span class="colon">:</span></label> <textarea name="mytextfield4" id="mytextfield4"></textarea>
     </div>

     <div class="formcontrol dropdown">
      <label for="mytextfield5">Egy megfelelően hosszú string<span class="colon">:</span></label> <select name="mytextfield5" id="mytextfield5" size="1"></select>
     </div>

     <div class="formcontrol selectlist">
      <label for="mytextfield6">Egy megfelelően hosszú string<span class="colon">:</span></label> <select name="mytextfield6" id="mytextfield6" size="4"></select>
     </div>

     <div class="formcontrol checkbox">
      <label for="mytextfield7">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield7" id="mytextfield7" value="1" />
     </div>
    </form>
   </div>
  </body>
</html>
A hozzá tartozó CSS kód így néz ki:

div.textfield,
 div.passwordfield,
 div.filefield,
 div.checkbox,
 div.dropdown,
 div.selectlist,
 div.textarea
{
 text-align:right;
 vertical-align:top;
 
 margin-top:2px;
 margin-bottom:2px;
 
 position:relative;
 overflow:auto;
 _height:1%;
}

div.textfield label,
 div.passwordfield label,
 div.filefield label,
 div.checkbox label,
 div.dropdown label,
 div.selectlist label,
 div.textarea label
{
 width:32%;
 float:left;
 text-align:right;
}

div.textfield input,
 div.passwordfield input,
 div.filefield input,
 div.checkbox input,
 div.dropdown select,
 div.selectlist select,
 div.textarea textarea
{
 margin-left:auto;
 min-width:0px;
 width:64%;
}
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:

fieldset.radiolist, fieldset.checkboxlist
{
 text-align:left;
 margin:2px;
 border:1px solid #c0c0c0;
}

fieldset.radiolist div.radio,
 fieldset.checkboxlist div.checkbox
{
 overflow:visible;
 text-align:left;
 background-color:#e0e0e0;
}

fieldset.radiolist div.radio label,
 fieldset.checkboxlist div.checkbox label
{
 width:auto;
 float:none;
 margin:0px;
 margin-left:20px;
}

fieldset.radiolist .colon,
 fieldset.checkboxlist .colon
{
 display:none;
}

fieldset.radiolist div.radio input,
 fieldset.checkboxlist div.checkbox input
{
 position:absolute;
 left:0px;
 margin-top:2px;
 _margin-top:0px;
 width:20px;
}
A HTML:

<fieldset class="checkboxlist">
 <legend>Checkbox list</legend>
 <div class="formcontrol checkbox">
  <label for="mytextfield8">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield8" id="mytextfield8" value="1" />
 </div>

 <div class="formcontrol checkbox">
  <label for="mytextfield9">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield9" id="mytextfield9" value="1" />
 </div>

 <div class="formcontrol checkbox">
  <label for="mytextfield10">Egy megfelelően hosszú string<span class="colon">:</span></label> <input type="checkbox" name="mytextfield10" id="mytextfield10" value="1" />
 </div>
</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.