Lomake: muotoilu css:llä

CSS

h2 {

clear: both;
}
/* ensimmäinen */
#form1 .vasen {
    width: 30%;
    float: left;
    display: block;	
  }

/* toinen */  
#form2 {

width: 25em;
}

#form2 .oikea {
    float: right;
    clear: both;
    margin: 0;
    padding: 0;
    margin-top: 0.5em;
    vertical-align: middle;
  }
  #form2 .oikea input {
      margin: 0;
      padding: 0;
      height: 1.5em;
  }
  #form2 > label {
    margin: 0;
    margin-top: 0em;
    display: block;
    padding: 0;
    padding-top: 0.5em;
    min-height: 2em;
  }
  #form2 div {
      padding: 0;
      margin: 0;
      margin-top: 0.5em;
  }
  #form2 .oikea label input {
    vertical-align: middle;
    margin-left: 0.5em;
}

/* kolmas */
#form3 {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 15em 10em;
}

#form3 > label, #form3 div {
    display: block;
}

/* neljäs */

#form4 {
    max-width: 25em;
    display: flex;  
    flex-wrap: wrap;
}
#form4 > label, #form4 .label {
   flex: 14em;
   margin-bottom: 1em;
}
#form4 .input {
    margin-bottom: 1em;
    flex: 10em;
 
 }
 
/* viides */

#form5 {
    width: 25em;
    column-width: 12em;
    column-gap: 1em;
}
#form5 div > label, #form5 div div {
 display: block;
 /* täytyy kikkailla labelit samalle tasalle kenttien kanssa */
 margin:0;
 margin-top: 1em;
 padding: 0;
}
#form5 div p {
    padding: 0;
    margin: 0;
    margin-top: 1em;
}
#form5 > div {
    /* oltava niin paljon, että riittää molemmille sarakkeille. */
    min-height: 10em;
    margin: 0;
    padding: 0;
}
/* kuudes */
#form6 {
    position: relative;
    max-width: 25em;
}
#form6 > label, #form6 > div {
  display: block;
  margin-top: 1em;
}
#form6 > label input {
    position: absolute;
    right: 0em;
}
#form6 > div > div {
   display: inline;
   position: absolute;
   right: 0em;
}

HTML

<h1>Lomakemuotoilua CSS:llä</h1>
        <p>Yksinkertaisin float-versio</p>
        <form id="form1" action="form.html" method="post">
            <label class="vasen" for="nimi1">Nimi</label>
            <p>
                <input type="text" id="nimi1" name="nimi" />
            </p>
            <label class="vasen" for="osoite1">Osoite</label>
            <p>
                <input type="text" id="osoite1" name="osoite" />
            </p>
            <div class="vasen">Sukupuoli
            </div>
            <p>
                <label>mies <input checked="checked" type="radio" value="mies" name="sukupuoli" />
                </label>
                <label>nainen <input type="radio" value="nainen" name="sukupuoli" />
                </label>
            </p>
        </form>
        <h2>Toinen lomake</h2>
        <p>Tässä float-toteutus on erilainen kuin ylemmässä</p>

<form id="form2" action="form.html" method="post">
            <p class="oikea">
                <input type="text" id="nimi2" name="nimi" />
            </p>
            <label for="nimi2">Nimi</label>
            <p class="oikea">
                <input type="text" id="osoite2" name="osoite" />
            </p>
            <label for="osoite2">Osoite</label>
            <p class="oikea">
                <label>mies <input type="radio" checked="checked" value="mies" name="sukupuoli" />
                </label>
                <label>nainen <input type="radio" value="nainen" name="sukupuoli" />
                </label>
            </p>
            <div>Sukupuoli
            </div>
        </form>

<h2>Kolmas lomake</h2>
        <p>Tässä grid-toteutus</p>

<form id="form3" action="form.html" method="post">
            <label for="nimi3">Nimi</label>
            <input type="text" id="nimi3" name="nimi" />
            <label for="osoite3">Osoite</label>
            <input type="text" id="osoite3" name="osoite" />
            <div>Sukupuoli
            </div>
            <p>
                <label>mies <input checked="checked" type="radio" value="mies" name="sukupuoli" />
                </label>
                <label>nainen <input type="radio" value="nainen" name="sukupuoli" />
                </label>
            </p>
        </form>

<h2>Neljäs lomake</h2>
        <p>Tässä flexbox-toteutus</p>

<form id="form4" action="form.html" method="post">
            <label for="nimi4">Nimi</label>
            <div class="input"><input type="text" id="nimi4" name="nimi" /></div>
            <label for="osoite4">Osoite</label>
            <div class="input">
                <input type="text" id="osoite4" name="osoite" />
            </div>
            <div class="label">Sukupuoli
            </div>

<div class="input"><label>mies <input checked="checked" type="radio" value="mies" name="sukupuoli" />
                </label>
                <label>nainen <input type="radio" value="nainen" name="sukupuoli" />
                </label></div>

</form>

<h2>Viides lomake</h2>
        <p>Tässä saraketoteutus</p>
        <form id="form5" action="form.html" method="post">
            <div>
                <label for="nimi5">Nimi</label>
                <label for="osoite5">Osoite</label>
                <div>Sukupuoli
                </div>
            </div>
            <div>
                <p>
                    <input type="text" id="nimi5" name="nimi" />
                </p>
                <p>
                    <input type="text" id="osoite5" name="osoite" />
                </p>
                <p><label>mies <input checked="checked" type="radio" value="mies" name="sukupuoli" />
                    </label>
                    <label>nainen <input type="radio" value="nainen" name="sukupuoli" />
                    </label>
                </p>
            </div>
        </form>

<h2>Kuudes lomake</h2>
        <p>Tässä positiointitoteutus</p>
        <form id="form6" action="form.html" method="post">
            <label for="nimi6">Nimi <input type="text" id="nimi6" name="nimi" />
            </label>
            <label for="osoite6">Osoite <input type="text" id="osoite6" name="osoite" />
            </label>
            <div>Sukupuoli
                <div><label>mies <input checked="checked" type="radio" value="mies" name="sukupuoli" />
                    </label>
                    <label>nainen <input type="radio" value="nainen" name="sukupuoli" />
                    </label>
                </div>

</div>
        </form>

Lomakemuotoilua CSS:llä

Toinen lomake

Kolmas lomake

Neljäs lomake

Viides lomake

Kuudes lomake

CSS

HTML

Javascript

Konsoli