- var theme_customizer = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Base inputs ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Forms li.breadcrumb-item Form Controls li.breadcrumb-item.active Base Inputs .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header.pb-0 h5 Basic form control form.form.theme-form .card-body .row .col .mb-3 label.form-label(for='exampleFormControlInput1') Email address input#exampleFormControlInput1.form-control(type='email', placeholder='name@example.com') .row .col .mb-3 label.form-label(for='exampleInputPassword2') Password input#exampleInputPassword2.form-control(type='password', placeholder='Password') .row .col .mb-3 label.form-label(for='exampleFormControlSelect9') Example select select#exampleFormControlSelect9.form-select.digits option 1 option 2 option 3 option 4 option 5 .row .col .mb-3 label.form-label(for='exampleFormControlSelect3') Example multiple select select#exampleFormControlSelect3.form-select.digits(multiple='') option 1 option 2 option 3 option 4 option 5 .row .col div label.form-label(for='exampleFormControlTextarea4') Example textarea textarea#exampleFormControlTextarea4.form-control(rows='3') .card-footer.text-end button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') .card .card-header.pb-0 h5 Basic HTML input control form.form.theme-form .card-body .row .col .mb-3.row label.col-sm-3.col-form-label Simple Input .col-sm-9 input.form-control(type='text') .mb-3.row label.col-sm-3.col-form-label Placeholder .col-sm-9 input.form-control(type='text', placeholder='Type your title in Placeholder') .mb-3.row label.col-sm-3.col-form-label Password .col-sm-9 input.form-control(type='password', placeholder='Password input') .mb-3.row label.col-sm-3.col-form-label Number .col-sm-9 input.form-control.digits(type='number', placeholder='Number') .mb-3.row label.col-sm-3.col-form-label Telephone .col-sm-9 input.form-control.m-input.digits(type='tel', value='91-(999)-999-999') .mb-3.row label.col-sm-3.col-form-label URL .col-sm-9 input.form-control(type='url', value='https://getbootstrap.com') .mb-3.row label.col-sm-3.col-form-label Date and time .col-sm-9 input#example-datetime-local-input.form-control.digits(type='datetime-local', value='2018-01-19T18:45:00') .mb-3.row label.col-sm-3.col-form-label Date .col-sm-9 input.form-control.digits(type='date', value='2018-01-01') .mb-3.row label.col-sm-3.col-form-label Month .col-sm-9 input.form-control.digits(type='month', value='2018-01') .mb-3.row label.col-sm-3.col-form-label Week .col-sm-9 input.form-control.digits(type='week', value='2018-W09') .mb-3.row label.col-sm-3.col-form-label Time .col-sm-9 input.form-control.digits(type='time', value='21:45:00') .mb-3.row label.col-sm-3.col-form-label.pt-0 Color picker .col-sm-9 input.form-control.form-control-color(type='color', value='#24695c') .mb-3.row label.col-sm-3.col-form-label | Maximum | Length .col-sm-9 input.form-control(type='text', placeholder='Content must be in 6 characters', maxlength='6') .mb-3.row label.col-sm-3.col-form-label.pt-0 Static Text .col-sm-9 .form-control-static | Hello !... This is | static text .row label.col-sm-3.col-form-label Textarea .col-sm-9 textarea.form-control(rows='5', cols='5', placeholder='Default textarea') .card-footer.text-end .col-sm-9.offset-sm-3 button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') .card .card-header.pb-0 h5 Edges input style form.form.theme-form .card-body .row .col .mb-3 label.form-label(for='exampleFormControlInput5') Email address input#exampleFormControlInput5.form-control.btn-pill(type='email', placeholder='name@example.com') .row .col .mb-3 label.form-label(for='exampleInputPassword6') Password input#exampleInputPassword6.form-control.btn-pill(type='password', placeholder='Password') .row .col .mb-3 label.form-label(for='exampleFormControlSelect7') Example select select#exampleFormControlSelect7.form-select.btn-pill.digits option 1 option 2 option 3 option 4 option 5 .row .col .mb-3 label.form-label(for='exampleFormControlSelect8') Example multiple select select#exampleFormControlSelect8.form-select.btn-pill.p-l-45.digits(multiple='') option 1 option 2 option 3 option 4 option 5 .row .col div label.form-label(for='exampleFormControlTextarea9') Example textarea textarea#exampleFormControlTextarea9.form-control.btn-pill(rows='3') .card-footer.text-end button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') .card .card-header.pb-0 h5 Flat input style form.form.theme-form .card-body .row .col .mb-3 label.form-label(for='exampleFormControlInput10') Email address input#exampleFormControlInput10.form-control.btn-square(type='email', placeholder='name@example.com') .row .col .mb-3 label.form-label(for='exampleInputPassword11') Password input#exampleInputPassword11.form-control.btn-square(type='password', placeholder='Password') .row .col .mb-3 label.form-label(for='exampleFormControlSelect12') Example select select#exampleFormControlSelect12.form-select.btn-square.digits option 1 option 2 option 3 option 4 option 5 .row .col .mb-3 label.form-label(for='exampleFormControlSelect13') Example multiple select select#exampleFormControlSelect13.form-select.btn-square.digits(multiple='') option 1 option 2 option 3 option 4 option 5 .row .col div label.form-label(for='exampleFormControlTextarea14') Example textarea textarea#exampleFormControlTextarea14.form-control.btn-square(rows='3') .card-footer.text-end button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') .card .card-header.pb-0 h5 Raise input style form.form.theme-form .card-body .row .col .mb-3 label.form-label(for='exampleFormControlInput15') Email address input#exampleFormControlInput15.form-control.input-air-primary(type='email', placeholder='name@example.com') .row .col .mb-3 label.form-label(for='exampleInputPassword16') Password input#exampleInputPassword16.form-control.input-air-primary(type='password', placeholder='Password') .row .col .mb-3 label.form-label(for='exampleFormControlSelect17') Example select select#exampleFormControlSelect17.form-select.input-air-primary.digits option 1 option 2 option 3 option 4 option 5 .row .col .mb-3 label.form-label(for='exampleFormControlSelect18') Example multiple select select#exampleFormControlSelect18.form-select.input-air-primary.digits(multiple='') option 1 option 2 option 3 option 4 option 5 .row .col div label.form-label(for='exampleFormControlTextarea19') Example textarea textarea#exampleFormControlTextarea19.form-control.input-air-primary(rows='3') .card-footer.text-end button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') .card .card-header.pb-0 h5 Solid input style form.form.theme-form .card-body .row .col .mb-3 label.form-label(for='exampleFormControlInput20') Email address input#exampleFormControlInput20.form-control(type='email', placeholder='name@example.com') .row .col .mb-3 label.form-label(for='exampleInputPassword21') Password input#exampleInputPassword21.form-control(type='password', placeholder='Password') .row .col .mb-3 label.form-label(for='exampleInputPassword22') Disabled input#exampleInputPassword22.form-control(type='text', disabled='', placeholder='Disabled') .row .col .mb-3 label.form-label(for='exampleFormControlSelect23') Example select select#exampleFormControlSelect23.form-select.digits option 1 option 2 option 3 option 4 option 5 .row .col .mb-3 label.form-label(for='exampleFormControlSelect24') Example multiple select select#exampleFormControlSelect24.form-select.digits(multiple='') option 1 option 2 option 3 option 4 option 5 .row .col div label.form-label(for='exampleFormControlTextarea25') Example textarea textarea#exampleFormControlTextarea25.form-control(rows='3') .card-footer.text-end button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') .card .card-header.pb-0 h5 Input sizing form.form.theme-form .card-body .row .col .mb-3 label.form-label(for='colFormLabelSm26') Large input input#colFormLabelSm26.form-control.form-control-lg(type='text', placeholder='col-form-label-lg') .row .col .mb-3 label.form-label(for='exampleInputPassword27') Default input input#exampleInputPassword27.form-control(type='text', placeholder='form-control') .row .col .mb-3 label.form-label(for='colFormLabelSm28') Small input input#colFormLabelSm28.form-control.form-control-sm(type='text', placeholder='col-form-label-sm') .row .col .mb-3 label.form-label(for='exampleFormControlSelect29') Large select select#exampleFormControlSelect29.form-select.form-control-lg.digits option 1 option 2 option 3 option 4 option 5 .row .col .mb-3 label.form-label(for='exampleFormControlSelect30') Default select select#exampleFormControlSelect30.form-select.digits option 1 option 2 option 3 option 4 option 5 .row .col div label.form-label(for='exampleFormControlSelect31') Small select select#exampleFormControlSelect31.form-select.form-control-sm.digits option 1 option 2 option 3 option 4 option 5 .card-footer.text-end button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') .card .card-header.pb-0 h5 Custom controls form.form.theme-form .card-body .row .col .mb-3.row label.col-sm-3.col-form-label Upload File .col-sm-9 input.form-control(type='file') .row .col .row label.col-sm-3.col-form-label Custom select .col-sm-9 select.custom-select.form-select option(selected='') Open this select menu option(value='1') One option(value='2') Two option(value='3') Three .card-footer.text-end button.btn.btn-primary(type='submit') Submit input.btn.btn-light(type='reset', value='Cancel') // Container-fluid Ends include ../../components/footer include ../../components/footer-files