Demo 7 - Tiedustelulomake
Laadi seuraava lomake:
- Lomake lähetetään osoitteeseen https://tredu-form-app.herokuapp.com/luelomake.php
- Tekstikentillä kysytään vastaajan etunimi name="fname" ja sukunimi name="lname"
- Valintaluettelolla kysytään vastaajan syntymävuosi (select name="year" id="year")
- Vaihtoehdot ovat esim. vuodet 1996 - 2004 (option value="1996")
- Voit myös kokeilla listan teossa tämän sivun lopussa olevaa JavaScriptiä
- Lempiväriä kysytään input type="color" kentällä (name="color")
- Radionapeilla kysytään vastaajan äidinkieltä
- Vaihtoehdot:
- name="lang" value="suomi"
- name="lang" value="ruotsi"
- name="lang" value="muu"
- Checkboxeilla kysytään ta kielitaitoa
- Vaihtoehdot:
- suomi name="suomi" value="suomi"
- ruotsi name="ruotsi" value="ruotsi"
- englanti name="englanti" value="englanti"
- saksa name="saksa" value="saksa"
- venäjä name="venaja" value="venäjä"
- ranska name="ranska" value="ranska"
- Lisää myös päivämääräkenttä (name="date")
- Tekstialueella pyydetään kertomaan itsestään vapaasti (name="message")
- Harjoitellaan lisäksi kirjautumislomakkeen tekoa:
- Lisää sähköposti-kenttä (type="email" name="email")
- Lisää Salasana-kenttä (type="password" name="password")
- Lomakkeen voi lähettää vastaamisen jälkeen "Lähetä tiedot" -painikkeesta (type="submit")
- Muotoile lomake CSS:llä
Tyhjä lomake
Täytetty lomake
Lähetetty lomake
<![CDATA[<script>
const ageinput = document.getElementById('year')
let options = ''
for(let year = 1996; year < 2005; year++){
options+= `<option value="${year}">${year}</option>`
}
ageinput.innerHTML = options;
</script>]]>