4 muutettua tiedostoa jossa 144 lisäystä ja 0 poistoa
+ 6
- 0
09-forms/.prettierrc
Näytä tiedosto
| @@ -0,0 +1,6 @@ | |||
| { | |||
| "trailingComma": "es5", | |||
| "tabWidth": 4, | |||
| "semi": true, | |||
| "singleQuote": true | |||
| } | |||
+ 82
- 0
09-forms/index.html
Näytä tiedosto
| @@ -0,0 +1,82 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8" /> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
| <title>09-forms</title> | |||
| <link rel="stylesheet" href="styles/main.css" type="text/css" /> | |||
| </head> | |||
| <body> | |||
| <form action="#" method="POST" id="form"> | |||
| <input type="hidden" name="hidden" /> | |||
| <label> | |||
| Textfield | |||
| <input type="text" name="text" /> | |||
| </label> | |||
| <label> | |||
| Date | |||
| <input type="date" name="date" /> | |||
| </label> | |||
| <label> | |||
| <input type="email" name="email" /> | |||
| </label> | |||
| <label> | |||
| Password | |||
| <input type="password" name="password" /> | |||
| </label> | |||
| <div class="container"> | |||
| <label> | |||
| <input type="radio" name="radio" value="radio-1" checked /> | |||
| Radio 1 | |||
| </label> | |||
| <label> | |||
| <input type="radio" name="radio" value="radio-2" /> | |||
| Radio 2 | |||
| </label> | |||
| <label> | |||
| <input type="radio" name="radio" value="radio-3" /> | |||
| Radio 3 | |||
| </label> | |||
| <label> | |||
| <input type="radio" name="radio" value="radio-4" /> | |||
| Radio 4 | |||
| </label> | |||
| </div> | |||
| <div class="container"> | |||
| <label> | |||
| <input type="checkbox" name="checkbox" value="checkbox-1" /> | |||
| Checkbox 1 | |||
| </label> | |||
| <label> | |||
| <input type="checkbox" name="checkbox" value="checkbox-2" /> | |||
| Checkbox 2 | |||
| </label> | |||
| <label> | |||
| <input type="checkbox" name="checkbox" value="checkbox-3" /> | |||
| Checkbox 3 | |||
| </label> | |||
| <label> | |||
| <input type="checkbox" name="checkbox" value="checkbox-4" /> | |||
| Checkbox 4 | |||
| </label> | |||
| </div> | |||
| <label> | |||
| Select | |||
| <select name="select" multiple> | |||
| <option value="select-1">select-1</option> | |||
| <option value="select-2">select-2</option> | |||
| <option value="select-3">select-3</option> | |||
| <option value="select-4">select-4</option> | |||
| </select> | |||
| </label> | |||
| <input type="submit" /> | |||
| </form> | |||
| <script src="scripts/main.js"></script> | |||
| </body> | |||
| </html> | |||
+ 28
- 0
09-forms/scripts/main.js
Näytä tiedosto
| @@ -0,0 +1,28 @@ | |||
| const form = document.getElementById('form'); | |||
| form.addEventListener('submit', function(e) { | |||
| e.preventDefault(); | |||
| //console.log(e); | |||
| const text = form.querySelector('input[name="text"]').value; | |||
| //console.log(text); | |||
| const select = form.querySelector('select[name="select"]').value; | |||
| //console.log(select); | |||
| const selectedOpt = form.querySelectorAll('option:checked'); | |||
| // for (let i = 0; i < selectedOpt.length; i++) { | |||
| // console.log(selectedOpt[i].value); | |||
| // } | |||
| //.value kan niet meer op de queryselecctor gebruikt worden om dat we nu een queryselectorall hebben | |||
| const radio = form.querySelector('input[name="radio"]:checked'); | |||
| //console.log(radio.value); | |||
| const checkbox = form.querySelectorAll('input[name="checkbox"]:checked'); | |||
| for (let i = 0; i < checkbox.length; i++) { | |||
| console.log(checkbox[i].value); | |||
| } | |||
| console.log(form.querySelector('input[name="date"]).value;) | |||
| }); | |||
+ 28
- 0
09-forms/styles/main.css
Näytä tiedosto
| @@ -0,0 +1,28 @@ | |||
| html { | |||
| font-family: sans-serif; | |||
| } | |||
| form { | |||
| width: 60%; | |||
| margin: 0 auto auto 0; | |||
| display: flex; | |||
| flex-flow: column wrap; | |||
| } | |||
| label { | |||
| display: block; | |||
| margin-top: 1rem; | |||
| } | |||
| input { | |||
| margin-left: 1rem; | |||
| margin-right: 0; | |||
| } | |||
| input[type='radio'], | |||
| input[type='checkbox'] { | |||
| margin: 0; | |||
| } | |||
| .container { | |||
| width: calc(50% - 1rem); | |||
| } | |||
Loading…