Form
CODE
×
HTML
<form class='mx-auto col-12 col-md-10 col-lg-8'> <h2 class='left-align'>Verborgen hinter Dunkelwolken</h2> <h5>Lorem mollis platea velit</h5> <div class='form-floating mb-6'> <input type=text value='' class='form-control' placeholder='Placeholder-Text' id='input-1'> <label for='input-1'>Name of form element</label> </div> <div class='caption'>Das galaktische Zentrum (links unten) im infraroten Spektrum, verdeckt von Staubwolken.</div> <div class='form-floating mb-6 error'> <input type=email value='54870' class='form-control is-invalid' placeholder='Placeholder-Text' id='input-error'> <label class='error' for='input-error'>Name of form element</label> </div> <div class='caption'>Das galaktische Zentrum (links unten) im infraroten Spektrum, verdeckt von Staubwolken.</div> <div class='form-floating mb-6 pw'> <input type=password value='' class='form-control' placeholder='Your password' id='input-2'> <label for='input-2'>Password</label> </div> <h5>Est Orci fermentum plecit</h5> <div class='form-floating mb-6 textarea'> <textarea class='form-control' placeholder='Your message' id='textarea'></textarea> <label for='textarea'>Your Message</label> </div> <div class='form-floating mb-6 v2'> <select class='form-select form-select-lg' aria-label='example' id='select-1'><option selected>Please select one item ...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option></select> <label for='select-1'>Name of select list</label> </div> <h5>Lorem mollis platea velit</h5> <div class='form-check mb-3'> <input type=radio value='' class='form-check-input' name='flexRadio-1' id='flexRadio-1'> <label class='form-check-label' for='flexRadio-1'>Name of form element</label> </div> <div class='form-check mb-3 v2'> <input type=radio value='' class='form-check-input' name='flexRadio-1' id='flexRadio-2'> <label class='form-check-label' for='flexRadio-2'>Name of form element</label> </div> <h5>Lorem mollis platea velit</h5> <div class='form-check mb-3 checkbox'> <input type=checkbox value='' class='form-check-input' id='flexCheck-1'> <label class='form-check-label' for='flexCheck-1'>Name of form element</label> </div> <div class='form-check mb-3 v4'> <input type=checkbox value='' class='form-check-input' id='flexCheck-2'> <label class='form-check-label' for='flexCheck-2'>Name of form element</label> </div> <div class='button-group'> <button class='btn btn-primary'>Who we are</button> <button class='btn btn-secondary'>GET IN TOUCH</button> </div> </form>
CSS
form .caption { margin-top: -36px; margin-bottom: 36px; } form .is-invalid + .caption, form .error + .caption { margin-top: -36px; color: var(--fec) } form .is-invalid + label { color: var(--fec) !important; } .form-floating > div { display: none !important; } .was-validated .form-control:invalid, .form-control.is-invalid { padding-right: 50px !important; } .form-floating > .form-control, .form-floating > .form-control-plaintext { padding: 1rem 1rem; } .form-control { padding: 0.375rem 1rem; } .form-floating > label { padding: 1rem 1rem; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { transform: scale(0.7) translateY(-0.6rem) translateX(0.5rem); color: var(--fc2); font-weight: 400; } select.form-select.form-select-lg { padding-left: 1rem; } div.caption { color: var(--fc2); font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); line-height: var(--lh-s); font-size: var(--fs-s); letter-spacing: var(--bf-ls); word-spacing: var(--bf-ws); max-width: var(--max-w); } h5 { font-size: var(--fs-l); line-height: var(--lh-m); word-spacing: var(--bf-ws); letter-spacing: var(--bf-ls); color: var(--fc3); font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); text-align: var(--ah4); margin-bottom: calc(var(--fs-m) * var(--lh-m) / 2); } input[type=text].form-control { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); } label.form-check-label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-xs); line-height: var(--lh-s); color: var(--fc2); margin-left: 10px; } input[type=radio].form-check-input { border-color: var(--lc5); margin-top: 0px; width: 26px; height: 26px; } input[type=checkbox].form-check-input { border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-color: var(--lc5); margin-top: 0px; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } select.form-select.form-select-lg { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); padding-left: 0.75rem; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } input[type=password].form-control { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); } textarea.form-control { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); max-height: 50vh; min-height: 120px !important; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } input[type=email].form-control.is-invalid { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); } h5 { font-size: var(--fs-l); line-height: var(--lh-m); word-spacing: var(--bf-ws); letter-spacing: var(--bf-ls); color: var(--fc3); font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); text-align: var(--ah4); margin-bottom: calc(var(--fs-m) * var(--lh-m) / 2); } button.btn.btn-primary { font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); font-size: var(--fs-l); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-width: var(--lw3); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); width:auto; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); color: var(--fpb); background-color: var(--bsc2); border-color: var(--lsc2); margin-top: 38px; margin-bottom: 24px; padding-top: 16px; padding-right: 46px; padding-bottom: 16px; padding-left: 46px; } button.btn.btn-secondary { font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); font-size: var(--fs-l); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-width: var(--lw4); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); width:auto; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); background-color:transparent; border-color: var(--lc7); color: var(--fsb); margin-top: 38px; margin-bottom: 24px; padding-top: 16px; padding-right: 46px; padding-bottom: 16px; padding-left: 46px; } button.btn.btn-primary:hover, button.btn.btn-primary:focus { border-color: var(--lsc1); background-color: var(--bsc1); color: var(--fsc2); } button.btn.btn-secondary:hover, button.btn.btn-secondary:focus { background-color: var(--bsc4); color: var(--fsc2); border-color: var(--lsc1); } input[type=radio].form-check-inputdisabled { background-color: var(--bc5); opacity:1; } @media screen and (max-width: 991px) { div.caption { font-size: var(--fs-xs); } h5 { font-size: var(--fs-m); margin-bottom: calc(var(--fs-s) * var(--lh-m) / 2); } h5 { font-size: var(--fs-m); margin-bottom: calc(var(--fs-s) * var(--lh-m) / 2); } button.btn.btn-primary { font-size: var(--fs-m); } button.btn.btn-secondary { font-size: var(--fs-m); } } @media screen and (max-width: 575px) { div.caption { font-size: var(--fs-xxs); } h5 { font-size: var(--fs-s); margin-bottom: calc(var(--fs-xs) * var(--lh-m) / 2); } h5 { font-size: var(--fs-s); margin-bottom: calc(var(--fs-xs) * var(--lh-m) / 2); } button.btn.btn-primary { margin-top: 24px; } button.btn.btn-secondary { margin-top: 24px; } } @media screen and (max-width: 389px) { button.btn.btn-secondary { width: 100%; } } .form-control:focus { box-shadow: none; } .form-control:focus-visible { box-shadow: 0 0 0 1px var(--bsc1); border-color: var(--bsc1) !important; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } h2 { color: var(--fc3); font-size: var(--fs-xxl); line-height: var(--lh-s); font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); text-align: var(--ah2); letter-spacing: var(--hf-ls); word-spacing: var(--hf-ws); margin-bottom: calc(var(--fs-xxl) * var(--lh-s) / 2); } @media screen and (max-width: 991px) { h2 { font-size: var(--fs-xl); margin-bottom: calc(var(--fs-xl) * var(--lh-s) / 2); } } @media screen and (max-width: 575px) { h2 { font-size: var(--fs-ll); margin-bottom: calc(var(--fs-ll) * var(--lh-s) / 2); } } p + h2, h1 + h2 { margin-top: calc(var(--fs-xxl) * var(--lh-s) * 1.5) !important; } .container.background .top-distance > h2:first-of-type, .container.background .top-distance-large > h2:first-of-type { margin-top: -12px !important; } @media screen and (max-width: 991px) { p + h2, h1 + h2 { margin-top: calc(var(--fs-xl) * var(--lh-s) * 1.25) !important; } } @media screen and (max-width: 575px) { p + h2, h1 + h2 { margin-top: calc(var(--fs-ll) * var(--lh-s)) !important; } } @media screen and (max-width: 389px) { h2 { font-size: var(--fs-l) } h2.animated, h2.large { font-size: var(--fs-l) } } .left-align { text-align:left; }
JS
Form
Last Edit: Nov 9, 2023, 4:58pm
×
Verborgen hinter Dunkelwolken
Lorem mollis platea velit
Name of form element
Das galaktische Zentrum (links unten) im infraroten Spektrum, verdeckt von Staubwolken.
Name of form element
Das galaktische Zentrum (links unten) im infraroten Spektrum, verdeckt von Staubwolken.
Password
Est Orci fermentum plecit
Your Message
Please select one item ...
One
Two
Three
Four
Five
Name of select list
Lorem mollis platea velit
Name of form element
Name of form element
Lorem mollis platea velit
Name of form element
Name of form element
Who we are
GET IN TOUCH