Form
CODE
×
HTML
<form class=''> <h1>Formular Headline</h1> <h2 class='form'>Bereichsbezeichnung (H2)</h2> <div class='selectbox' tabindex="0" role="listbox"> <div class='select'>Label</div> <svg class='select' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 8' xml:space='preserve'><path d="M10.7,0.9L6,5.7L1.3,0.9L0.6,1.6L6,7.1l5.4-5.5L10.7,0.9z"/></svg> <span class='floating-label'>Label</span> <div class='options'><div class="option">Dies ist eine Option in einer Selectbox</div> <div class="option active">Dies ist eine ausgewählte Option in einer Selectbox</div> <div class="option">Noch eine Option</div> <div class="option">Es folgt eine weitere Option</div> <div class="option">Dies ist die letzte Option</div></div> </div> <div class='form-group'> <span class='optional'>optional</span> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> <span class='notice'>Ansprechpartner für Rücksprachen</span> </div> <div class='help floating-label'> <input type=text value='' class='floating-label help' placeholder='Label'> <label class='floating-label'>Label</label> <img class='help' src='img/Help Icon.svg'> </div> <div class='form-group-opt-tt'> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> <span class='optional'>optional</span> <img class='help' src='img/Help Icon.svg'> </div> <div class='invalid floating-label'> <input type=text value='Invalid Entry' class='floating-label invalid'> <label class='floating-label'>Label</label> <span class='error'>This is an error message!</span> </div> <h3 class='form'>Eine H3 in einem Formular</h3> <div class='form-group-medium-left'> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> </div> <div class='form-group-medium-right'> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> </div> <div class='form-group-small-left'> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> </div> <div class='form-group-small-middle'> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> </div> <div class='form-group-small-right'> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> </div> <h2 class='form'>Bereichsbezeichnung (H2)</h2> <div class='textarea'> <textarea placeholder='Label'></textarea> <label class='floating-label'>Label</label> </div> <span class='notice'>Bitte beschreiben Sie Ihre Beanstandungen.</span> <div class='radiobuttons-list'> <span class='optional'>optional</span> <label class='radio-block' for="rx1"><input type="radio" id="rx1" name="r1"/><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio-block' for="rx2"><input type="radio" id="rx2" name="r1" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio-block' for="rx3"><input type="radio" id="rx3" name="r1" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> </div> <div class='checkboxes'> <span class='notice'><strong>Überschreibender Hinweistext</strong></span> <label class='checkbox-inline'><input type="checkbox" /><span class="checked"></span><span class="checkbox"></span>Checkbox</label> <label class='checkbox-inline'><input type="checkbox" /><span class="checked"></span><span class="checkbox"></span>Checkbox</label> <label class='checkbox-inline'><input type="checkbox" /><span class="checked"></span><span class="checkbox"></span>Checkbox</label> <span class='notice'>Das ist hier ein weiterer optionaler Hinweistext, welcher unterhalb desr Form-Elementes steht! Dieser kann länger ausfallen und ist nicht «fett» gesetzt.</span> </div> <div class='radiobuttons error'> <span class='notice'><strong>Überschreibender Hinweistext</strong></span> <label class='radio' for="ry1"><input type="radio" name="r2" id="ry1" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio' for="ry2"><input type="radio" name="r2" id="ry2" /><span class="checked-r"></span><span class="radio"></span>noch ein Radio Button</label> <label class='radio' for="ry5"><input type="radio" name="r2" id="ry5" /><span class="checked-r"></span><span class="radio"></span>ein weiterer Radio Button</label> <label class='radio' for="ry3"><input type="radio" name="r2" id="ry3" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio' for="ry4"><input type="radio" name="r2" id="ry4" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <img class='help' src='img/Help Icon.svg'> <span class='error'>This is an error message!</span> </div> <div class='date-from floating-label'> <input type=text value='' class='floating-label watermarked' placeholder='Datum von'> <img class='datepicker-img' src='img/datepicker.svg'> <label class='floating-label date-from'>Datum von</label> </div> <div class='date-to floating-label'> <input type=text value='' class='floating-label datepicker' placeholder='Datum bis'> <img class='datepicker-img' src='img/datepicker.svg'> <label class='floating-label date-to'>Datum bis</label> </div> <div class='file-upload floating-label' tabindex="0"> <input type=file value='' class='file-upload invalid' tab-index="-1"> <span class='placeholder'>Tabellarischer Lebenslauf</span> <img class='file-upload-img' src='img/Upload Icon 1.svg'> </div> <span class='notice'>PDF-Datei, max. 2.5 MB</span> <div class='file-upload floating-label success' tab-index="0"> <input type=text value='Mein-Lebenslauf.pdf' class='file-upload-success' readonly tab-index="-1"> <label class='floating-label' tab-index="-1">Tabellarischer Lebenslauf</label> <img class='file-upload-img-success' src='img/Upload Icon close.svg'> </div> <span class='notice'>PDF-Datei, max. 2.5 MB</span> <div class='file-upload floating-label invalid' tabindex="0"> <input type=file value='' class='file-upload invalid' tab-index="-1"> <span class='placeholder'>Tabellarischer Lebenslauf</span> <img class='file-upload-img' src='img/Upload Icon 1.svg'> <span class='notice'>PDF-Datei, max. 2.5 MB</span> <span class='error'>Es wurde bislang keine Datei hochgeladen!</span> </div> <div class='buttons'> <button class='submit'><span style="margin-right:10px">Senden</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19" height="18" viewBox="0 0 22.5 21.5" style="enable-background:new 0 0 22.5 21.5;" xml:space="preserve" class="first"> <style type="text/css"> .st0{fill:#fff;} </style> <path class="st0" d="M22.3,0.5c-0.2-0.5-0.8-0.6-1.3-0.4L0.5,10.8C0.3,11,0.1,11.1,0,11.4c-0.1,0.2-0.1,0.5,0,0.7 c0.1,0.2,0.3,0.4,0.5,0.5L8,15.1v5.5c0,0.5,0.4,0.9,0.9,0.9c0.3,0,0.6-0.1,0.8-0.4l3.2-4.4l5.8,2c0.1,0,0.2,0.1,0.3,0.1h0 c0.5,0,0.9-0.3,0.9-0.8l2.5-16.9C22.4,0.9,22.4,0.7,22.3,0.5z M10.6,14l9.5-10.2l-1.9,12.8L10.6,14z M17.1,4.3l-8.4,9l-5.4-1.8 L17.1,4.3z"/> </svg></button> </div> </form>
CSS
@media screen and (max-width: 1119px) { div.form-group-small-left { width: 47.5%; } div.form-group-small-right { clear:both; float: none; width: 47.5%; } div.form-group-small-middle { float:right; margin-right: 0; width: 47.5%; } } @media screen and (max-width: 767px) { div.form-group-medium-left { width: 100%; } div.form-group-medium-right { width: 100%; } div.form-group-small-left { float: none; width: 65.625%; } div.form-group-small-right { width: 65.625%; } div.form-group-small-middle { float: none; width: 65.625%; } div.date-from.floating-label { float: none; clear:both; margin-top: 20px; margin-bottom: 20px; width: 100%; } div.date-to.floating-label { float: none; clear:both; margin-top: 20px; margin-bottom: 20px; width: 100%; } form > div.date-from.floating-label { float: none; width: 100%; } form > div.date-to.floating-label { float: none; width: 100%; } } input[type=text].floating-label { padding-right: 62px; } input[type=text].floating-label.invalid { padding-right: 62px !important; color: var(--black); } img.help { position: absolute; height: 31px; width: 31px; right: 16px; top: 33px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } label.floating-label { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 400; position:absolute; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:1; } span.error { color: var(--dark-red); display:inline-block; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 400; } label.checkbox-inline { position:relative; display:inline-block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; margin-top: 10px; margin-right: 37px; margin-bottom: 20px; padding-left: 35px; } label.radio { position:relative; display:inline-block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; margin-top: 10px; margin-right: 37px; margin-bottom: 20px; padding-left: 35px; } label.radio-block { width:100%; position:relative; display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; margin-top: 30px; margin-bottom: 30px; padding-left: 37px; } span.optional { position:absolute; display:inline-block; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 0; right: 13px; background-color: #fff; padding: 2px 5px; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 13px; line-height: 17px; color: var(--black); } div.select { color: rgba(112,112,112,1); line-height: 1.4; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 17px; padding-right: 62px; padding-bottom: 12px; padding-left: 28px; width: 100%; max-width: 800px; height: 59px; } h1 { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 100; margin: 0 0 44px -3px; font-size: 54px; line-height: 62px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } h2.form { display:inline-block; margin-top: 50px; margin-bottom: 10px; width: 100%; } h3.form { display:inline-block; margin-top: 40px; margin-bottom: 10px; width: 100%; } span.notice { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; color: var(--black); background-color: var(--white); margin-top: 10px; margin-bottom: 16px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } span.floating-label { font-size: 13px; line-height: 17px; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:0; display:block; color: var(--black); } div.options { position:absolute; display:none; color: var(--black); max-height: 0px; } input[type=file].file-upload.invalid { color: var(--black); margin-top: 0; margin-bottom: 0; padding-right: 90px; } img.file-upload-img { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; width: 59px; height: 59px; } input[type=text].file-upload-success { background-color:transparent; margin-top: 0; margin-bottom: 0; padding-right: 90px; } img.file-upload-img-success { width: 59px; height: 59px; } span.placeholder { display:block; font-size: 16px; line-height: 26px; line-height: 125%; color: var(--black); margin-bottom: 12px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } input[type=text].floating-label.datepicker { padding-right: 62px !important; } img.datepicker-img { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; width: 29px; height: 29px; } svg.select { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; margin-bottom: 6px; width: 18px; height: 12px; } button.submit { overflow:hidden; text-align:center; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 500; line-height: 24px; background-color: rgba(78,78,78,1); color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0px 34px 0px 36px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: all 250ms ease-in-out; cursor:pointer; } form.invalid.floating-label > span.error { position: absolute; bottom: -7px; left: 0; } form.radiobuttons-list > span.optional { position: absolute; top: -20px; } form.selectbox > svg.select { position: absolute; top: 23px; right: 24px; } form.selectbox > span.floating-label { position: absolute; } form.selectbox > div.options { overflow-y: auto; } form.file-upload.floating-label.invalid > input[type=file].file-upload.invalid { padding-right: 120px; } form.file-upload.floating-label.invalid > span.placeholder { position: absolute; top: 20px; left: 28px; } form.file-upload.floating-label.invalid > img.file-upload-img { position: absolute; top: -1px; right: 0; } form.file-upload.floating-label.invalid > span.notice { position: absolute; top: 54px; left: 0px; } form.file-upload.floating-label.invalid > span.error { position: absolute; bottom: -60px !important; left: 0px; } form.file-upload.floating-label.success > label.floating-label { top: -20px; } form.file-upload.floating-label.success > img.file-upload-img-success { position: absolute; top: 0; right: 0; } form.file-upload.floating-label > span.placeholder { position: absolute; top: 20px; left: 28px; } form.file-upload.floating-label > img.file-upload-img { position: absolute; top: -1px; right: 0px; } form.radiobuttons.error > span.error { position: absolute; bottom: -37px !important; left: -2px; } form.date-from.floating-label > input[type=text].floating-label.watermarked { margin-top: 0; margin-bottom: 0; width: calc(100% - 59px); } form.date-from.floating-label > img.datepicker-img { position: absolute; top: 14px; right: 15px; } form.date-to.floating-label > input[type=text].floating-label.datepicker { margin-top: 0; margin-bottom: 0; width: calc(100% - 59px); } form.date-to.floating-label > img.datepicker-img { position: absolute; top: 14px; right: 15px; } img.help:hover, img.help:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } input[type=file].file-upload.invalid:hover, input[type=file].file-upload.invalid:focus { background-image: url('../img/Upload Icon Hover.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; background-size: auto; } img.file-upload-img:hover, img.file-upload-img:focus { } img.file-upload-img-success:hover, img.file-upload-img-success:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } img.datepicker-img:hover, img.datepicker-img:focus { } button.submit:hover, button.submit:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } form.file-upload.floating-label.invalid:hover > img.file-upload-img, form.file-upload.floating-label.invalid:focus > img.file-upload-img { top: -5px; } form.file-upload.floating-label:hover > img.file-upload-img, form.file-upload.floating-label:focus > img.file-upload-img { top: -5px; } @media screen and (max-width: 1119px) { h1 { font-size: 48px; line-height: 56px; margin: -9px 0 28px -2px; } } @media screen and (max-width: 767px) { h1 { font-size: 32px; line-height: 38px; margin: 45px 0 24px -1px; font-family: 'Roboto'; font-style: normal; font-weight: 300; } button.submit { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } } h2 { font-size: 30px; line-height: 36px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; margin: 0 0 12px -2px; max-width: 800px; color: var(--black); margin-left: -2px; } @media screen and (max-width: 1119px) { h2 { font-size: 24px; line-height: 29px; margin: -3px 0 8px -1px; margin-left: -1px; } } @media screen and (max-width: 767px) { h2 { font-size: 21px !important; line-height: 25px !important; margin: -2px 0 12px 0px; margin-left: 0px; } } h3 { font-size: 26px; line-height: 32px; margin: 0 0 12px -1px; max-width: 800px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); margin-left: -1px; } @media screen and (max-width: 1119px) { h3 { font-size: 24px; line-height: 29px; margin: -3px 0 8px -1px; margin-left: 0px; } } @media screen and (max-width: 767px) { h3 { font-size: 21px; line-height: 25px; margin: -2px 0 12px 0px; margin-left: 0px; } }
JS
Form
Letzte Änderung: 15.01.2025 - 11:50 Uhr
×
Formular Headline
Bereichsbezeichnung (H2)
Label
Label
Dies ist eine Option in einer Selectbox
Dies ist eine ausgewählte Option in einer Selectbox
Noch eine Option
Es folgt eine weitere Option
Dies ist die letzte Option
optional
Label
Ansprechpartner für Rücksprachen
Label
Label
optional
Label
This is an error message!
Eine H3 in einem Formular
Label
Label
Label
Label
Label
Bereichsbezeichnung (H2)
Label
Bitte beschreiben Sie Ihre Beanstandungen.
optional
Radio Button
Radio Button
Radio Button
Überschreibender Hinweistext
Checkbox
Checkbox
Checkbox
Das ist hier ein weiterer optionaler Hinweistext, welcher unterhalb desr Form-Elementes steht! Dieser kann länger ausfallen und ist nicht «fett» gesetzt.
Überschreibender Hinweistext
Radio Button
noch ein Radio Button
ein weiterer Radio Button
Radio Button
Radio Button
This is an error message!
Datum von
Datum bis
Tabellarischer Lebenslauf
PDF-Datei, max. 2.5 MB
Tabellarischer Lebenslauf
PDF-Datei, max. 2.5 MB
Tabellarischer Lebenslauf
PDF-Datei, max. 2.5 MB
Es wurde bislang keine Datei hochgeladen!
Senden