Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <html> <head> <title>Odeslání vyplněného formuláře na email</title> <style> .container- { display: flex; position: relative; padding-left: 40px; margin-bottom: 0px; margin-top: 30px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .container- input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; display: inline-block; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container-:hover input ~ .checkmark { background-color: #ccc; } .container- input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } .container- input:checked ~ .checkmark:after { display: inline-block; } .container- .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .container2{ display: inline-block; margin-top: 80px; margin-bottom: 80px; flex-wrap: wrap; } .column-left- { float: left; font-size: 26px; margin: 30px; display: inline-block; } .column-right- { float: right; font-size: 26px; margin: 30px; display: inline-block; } .column-center- { display: inline-block; font-size: 26px; margin: 30px; display: inline-block; } </style> </head> <body> <h1>Odeslání vyplněného formuláře na email</</h1> <p>checkbox, checkmark, number</p> <div class="container2"> <div class="column-left-"> <label class="container-">Slunečnice <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Růže <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Kopretina <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Sazenice <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Tulipán <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Mix <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span> </div> <div class="column-center-"> <label class="container-">Orchidej <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Sasanka <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Sedmikráska <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Levandule <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Narcis <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Poměnka <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span> </div> <div class="column-right-"> <label class="container-">Maceška <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Petrklíč <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Lilie <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Slunečnice <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Karafiát <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span><br> <label class="container-">Hortenzie <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </span> <input type="number" name="quantity" min="0" max="100"><span style="font-size: 18px;"> ks</span> </span> <select id="itm-barva-Individual" name="itm-barva-Individual"><option value="">Barva vyberte</option><option value="Červená">Červená</option><option value="Žlutá">Žlutá</option><option value="Oranžová">Oranžová</option><option value="Růžová">Růžová</option><option value="Mix barev">Mix barev</option></select> </span> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>