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 palvelimelle // currentTarget on aina lomake itse; kentät haetaan elements-kokoelmasta const kentat = e.currentTarget.elements; console.log("lomakkeen sisältö: ---------------------------"); console.log("nimi", kentat.nimi.value); // valintanapeilla ryhmän nimi antaa suoraan valitun arvon console.log("sukupuoli", kentat.sukupuoli.value); // valintaruuduilla käydään ryhmä läpi, koska valittuja voi olla useita for (const ruutu of kentat.kanava) { if (ruutu.checked) { console.log("kanava", ruutu.value); } } console.log("aika", kentat.aika.value); console.log("palaute", kentat.palaute.value); // koko lomakkeen sisällön saa myös kerralla console.log("FormData:", Object.fromEntries(new FormData(e.currentTarget))); });
Konsoli