Taustatiedot
Nimesi:
Sukupuoli:
En kerro
Mies
Nainen
Mitä kanavia katsot?
TV 1
TV 2
MTV 3
Nelonen
Milloin katsot eniten TV:tä?
aamulla
päivällä
illalla
yöllä
Vapaa palaute
CSS
#mallilomake label { display: block; }
HTML
<!-- labeleista on tehty lohkoja: #mallilomake label { display: block; } --> <form action="#" method="post" id="mallilomake"> <fieldset> <legend>Taustatiedot</legend> <label>Nimesi: <input type="text" name="nimi" title="Anna nimesi" placeholder="Anna nimesi" required="required" /> </label> <p> Sukupuoli:</p> <label>En kerro <input type="radio" name="sukupuoli" value="-" checked="checked" /> </label> <label>Mies <input type="radio" name="sukupuoli" value="M" /> </label> <label>Nainen <input type="radio" name="sukupuoli" value="N" /> </label> </fieldset> <fieldset> <legend>Mitä kanavia katsot?</legend> <label>TV 1 <input type="checkbox" name="kanava" value="1" /> </label> <label>TV 2 <input type="checkbox" name="kanava" value="2" /> </label> <label >MTV 3 <input type="checkbox" name="kanava" value="3" /> </label> <label>Nelonen <input type="checkbox" name="kanava" value="4" /> </label> </fieldset> <fieldset> <legend>Milloin katsot eniten TV:tä?</legend> <select id="select" name="aika"> <option value="08-12">aamulla</option> <option value="12-18">päivällä</option> <option value="18-24" selected="selected">illalla</option> <option value="00-08">yöllä</option> </select> </fieldset> <fieldset> <legend>Vapaa palaute</legend> <textarea name="palaute" rows="5" cols="40"></textarea> </fieldset> <p><input type="submit" name="laheta" value="Lähetä!" /></p> </form>
Javascript
document.forms.mallilomake.addEventListener("submit", function (e) { e.preventDefault(); // estetään lomakkeen lähettäminen let lomake = e.target; console.log("lomakkeen sisältö: ---------------------------"); let nimi = lomake.nimi; console.log("nimi", nimi.value); let sukupuoli = lomake.sukupuoli; console.log( sukupuoli.value ); let checkboxit = lomake.kanava; for(let c of checkboxit) { if ( c.checked ) { console.log("kanava", c.value ); } } console.log("aika", lomake.aika.value); console.log("palaute", lomake.palaute.value); });
Konsoli