<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>Material Design for Bootstrap</title> <!-- MDB icon --> <link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" /> <!-- Google Fonts Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <!-- MDB --> <link rel="stylesheet" href="../../css/mdb.min.css" /> <!-- PRISM --> <link rel="stylesheet" href="../../dev/css/new-prism.css" /> <!-- Custom styles --> <style></style> </head> <body> <div class="container my-5"> <!-- Navs --> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <!-- Overview tab --> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-overview-tab" data-mdb-toggle="pill" href="#pills-overview" role="tab" aria-controls="pills-overview" aria-selected="true" >Overview</a > </li> <!-- Overview tab --> <!-- Api tab --> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-api-tab" data-mdb-toggle="pill" href="#pills-api" role="tab" aria-controls="pills-api" aria-selected="false" >API</a > </li> <!-- Api tab --> </ul> <!-- Navs --> <!-- Panels --> <div class="tab-content mt-4" id="pills-tabContent"> <!-- Overview panel --> <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" > <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-10 mb-4"> <!--Section: Docs content--> <section> <!--Section: Introduction--> <section id="section-introduction"> <!-- Main title --> <h2 class="h1 fw-bold">Title</h2> <!-- Seo title --> <h1 class="h5">Subtitle</h1> <!-- Description --> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque. </p> </section> <!--Section: Introduction--> <hr class="my-5" /> <!--Section: Basic example--> <section id="section-basic-example"> <!-- Section title --> <h2 class="mb-4">White input</h2> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4 bg-dark"> <div style="width: 23rem;"> <div class="form-outline form-white"> <input type="text" id="formWhite" class="form-control" /> <label class="form-label" for="formWhite">Example label</label> </div> </div> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline form-white"> <input type="text" id="formWhite" class="form-control" /> <label class="form-label" for="formWhite">New label</label> </div> </code> </mdbsnippet> </section> <!--Section: Code--> <!-- Section title --> <h2 class="mt-5 mb-4">Basic example</h2> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem;"> <div class="form-outline"> <input type="text" id="form1" class="form-control" /> <label class="form-label" for="form1">Example label</label> </div> </div> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline"> <input type="text" id="form1" class="form-control" /> <label class="form-label" for="form1">Example label</label> </div> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem;"> <div class="form-outline"> <input type="text" id="formControlLg" class="form-control form-control-lg" /> <label class="form-label" for="formControlLg">Form control lg</label> </div> <br /> <div class="form-outline"> <input type="text" id="formControlDefault" class="form-control" /> <label class="form-label" for="formControlDefault" >Form control default</label > </div> <br /> <div class="form-outline"> <input type="text" id="formControlSm" class="form-control form-control-sm" /> <label class="form-label" for="formControlSm">Form control sm</label> </div> </div> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline"> <input type="text" id="formControlLg" class="form-control form-control-lg" /> <label class="form-label" for="formControlLg">Form control lg</label> </div> <div class="form-outline"> <input type="text" id="formControlDefault" class="form-control" /> <label class="form-label" for="formControlDefault" >Form control default</label > </div> <div class="form-outline"> <input type="text" id="formControlSm" class="form-control form-control-sm" /> <label class="form-label" for="formControlSm">Form control sm</label> </div> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem;"> <div class="form-outline mb-3"> <input type="email" id="formControlExample" class="form-control" placeholder="name@example.com" /> <label class="form-label" for="formControlExample">Email address</label> </div> <div class="form-outline mb-3"> <input type="email" id="formControlExample2" class="form-control" placeholder="name@example.com" /> </div> <div class="form-outline mb-3"> <input type="email" id="formControlExample4" value="test" class="form-control" placeholder="name@example.com" /> </div> <div class="form-outline mb-3"> <textarea type="text" id="formControlTextarea" class="form-control" rows="3" placeholder="name@example.com" ></textarea> </div> <div class="form-outline"> <textarea type="text" id="formControlTextarea4" class="form-control" rows="3" placeholder="name@example.com" > Test</textarea > </div> </div> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline mb-3"> <input type="email" id="formControlExample3" class="form-control" placeholder="name@example.com" /> <label class="form-label" for="formControlExample3">Email address</label> </div> <div class="form-outline"> <textarea type="text" id="formControlTextarea2" class="form-control" rows="3" ></textarea> <label class="form-label" for="formControlTextarea2" >Example textarea</label > </div> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem;"> <div class="form-outline"> <input class="form-control" id="formControlReadonly" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly /> <label class="form-label" for="formControlReadonly">Readonly</label> </div> </div> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline"> <input class="form-control" id="formControlReadonly" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly /> <label class="form-label" for="formControlReadonly">Readonly</label> </div> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border p-4 mb-4"> <h1 class="text-danger mb-4"> Ta opcja poniżej u nas nie ma zastosowania bo my nie rozdzielamy labela od inputa </h1> <h2 id="readonly-plain-text"> Readonly plain text<a class="anchorjs-link" aria-label="Anchor" data-anchorjs-icon="#" href="#readonly-plain-text" style="padding-left: 0.375em;" ></a> </h2> <p> If you want to have <code><input readonly></code> elements in your form styled as plain text, use the <code>.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding. </p> <div class="mb-3 row"> <label for="staticEmail" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com" /> </div> </div> <div class="mb-3 row"> <label for="inputPassword" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" /> </div> </div> <br /> <form class="row g-3"> <div class="col-auto"> <label for="staticEmail2" class="sr-only">Email</label> <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com" /> </div> <div class="col-auto"> <label for="inputPassword2" class="sr-only">Password</label> <input type="password" class="form-control" id="inputPassword2" placeholder="Password" /> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary mb-3">Confirm identity</button> </div> </form> </section> <!--Section: Demo--> <!--Section: Demo--> <section class="border p-4 mb-4"> <form class="row g-3 d-flex justify-content-center align-items-center"> <div class="col-auto"> <div class="form-outline"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password" /> <label class="form-label" for="inputPassword2" class="sr-only" >Password</label > </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary">Confirm identity</button> </div> </form> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <form class="row g-3 d-flex justify-content-center align-items-center"> <div class="col-auto"> <div class="form-outline"> <input type="password" class="form-control" id="inputPassword2" placeholder="Password" /> <label class="form-label" for="inputPassword2" class="sr-only" >Password</label > </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary">Confirm identity</button> </div> </form> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border p-4 mb-4"> <h1 class="text-danger mb-4">Czy chcemy coś zrobić z tą opcją?</h1> <label for="exampleColorInput" class="form-label">Color picker</label> <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color" /> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <label for="exampleColorInput" class="form-label">Color picker</label> <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color" /> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem;"> <div class="form-outline"> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..." /> <label for="exampleDataList" class="form-label">Datalist example</label> <datalist id="datalistOptions"> <option value="San Francisco"></option> <option value="New York"></option> <option value="Seattle"></option> <option value="Los Angeles"></option> <option value="Chicago"></option> </datalist> </div> </div> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline"> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..." /> <label for="exampleDataList" class="form-label">Datalist example</label> <datalist id="datalistOptions"> <option value="San Francisco"></option> <option value="New York"></option> <option value="Seattle"></option> <option value="Los Angeles"></option> <option value="Chicago"></option> </datalist> </div> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border p-4 mb-4"> <form class="row g-3 mb-4"> <div class="col-4"> <div class="form-outline"> <input type="text" class="form-control form-control-lg" id="inputExampleBtn" placeholder="Type sth here..." /> <label class="form-label" for="inputExampleBtn" >Form control default size</label > </div> </div> <div class="col-3"> <button type="submit" class="btn btn-primary btn-lg">Button</button> </div> </form> <form class="row g-3 mb-4"> <div class="col-4"> <div class="form-outline"> <input type="text" class="form-control" id="inputExampleBtn2" placeholder="Type sth here..." /> <label class="form-label" for="inputExampleBtn2" >Form control default size</label > </div> </div> <div class="col-3"> <button type="submit" class="btn btn-primary">Button</button> </div> </form> <form class="row g-3"> <div class="col-4"> <div class="form-outline"> <input type="text" class="form-control form-control-sm" id="inputExampleBtn3" placeholder="Type sth here..." /> <label class="form-label" for="inputExampleBtn3" >Form control default size</label > </div> </div> <div class="col-3"> <button type="submit" class="btn btn-primary btn-sm">Button</button> </div> </form> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <form class="row g-3 mb-4"> <div class="col-4"> <div class="form-outline"> <input type="text" class="form-control form-control-lg" id="inputExampleBtn4" placeholder="Type sth here..." /> <label class="form-label" for="inputExampleBtn4" >Form control default size</label > </div> </div> <div class="col-3"> <button type="submit" class="btn btn-primary btn-lg">Button</button> </div> </form> <form class="row g-3 mb-4"> <div class="col-4"> <div class="form-outline"> <input type="text" class="form-control" id="inputExampleBtn" placeholder="Type sth here..." /> <label class="form-label" for="inputExampleBtn" >Form control default size</label > </div> </div> <div class="col-3"> <button type="submit" class="btn btn-primary">Button</button> </div> </form> <form class="row g-3"> <div class="col-4"> <div class="form-outline"> <input type="text" class="form-control form-control-sm" id="inputExampleBtn" placeholder="Type sth here..." /> <label class="form-label" for="inputExampleBtn" >Form control default size</label > </div> </div> <div class="col-3"> <button type="submit" class="btn btn-primary btn-sm">Button</button> </div> </form> </code> </mdbsnippet> </section> <!--Section: Code--> <!--Section: Demo--> <section class="border p-4 my-4"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal" > Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-outline mb-3"> <input type="text" id="form100" class="form-control" value="Test" /> <label class="form-label" for="form100">Example label</label> </div> <div class="form-outline mb-3"> <input type="text" id="form101" class="form-control" value="Test2" /> <label class="form-label" for="form101">Long Example label</label> </div> <div class="form-outline"> <input type="text" id="form102" class="form-control" /> <label class="form-label" for="form102">Label</label> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </section> <!--Section: Demo--> <!--Section: Demo--> <section class="border p-4 mb-4"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-mdb-toggle="dropdown" aria-expanded="false" > Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">Something here</a></li> <li> <a class="dropdown-item"> <div class="form-outline"> <input type="text" id="form104" class="form-control" value="Test" /> <label class="form-label" for="form104">Example label</label> </div> </a> </li> <li> <a class="dropdown-item"> <div class="form-outline"> <input type="text" id="form105" class="form-control" value="Test2" /> <label class="form-label" for="form105">Long Example label</label> </div> </a> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </section> <!--Section: Demo--> <!--Section: Demo--> <div class="card" style="width: 18rem;"> <img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <div class="form-outline my-3"> <input type="text" id="form106" class="form-control" /> <label class="form-label" for="form106">Long Example label</label> </div> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <!--Section: Demo--> <p class="note note-warning mt-4"> If any form parent is hidden, after displaying it, update the input to recalculate the width of the label using the following code: </p> <mdbsnippet> <code data-lang="javascript" data-name="JS"> document.querySelectorAll('.form-outline').forEach((formOutline) => { new mdb.Input(formOutline).update(); }) </code> </mdbsnippet> <h2 class="mt-4">Autofill</h2> <!--Section: Demo--> <form method="post" type="multipart/form-data" onsubmit="check(event)"> <div class="form-outline my-3"> <input type="email" id="form107" name="email" class="form-control" /> <label class="form-label" for="form107">Long Example label</label> </div> <div class="form-outline my-3"> <input type="password" id="form108" name="password" class="form-control" /> <label class="form-label" for="form108">Long Example label</label> </div> <button class="btn btn-primary">Submit</button> </form> <!--Section: Demo--> <h2 class="mt-4">Input group</h2> <!--Section: Demo--> <section class="border p-4 mb-4"> <div class="input-group form-outline mb-3"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" id="input1" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" /> <label class="form-label" for="input1">Username</label> </div> <div class="input-group form-outline mb-3"> <input type="text" class="form-control" id="input2" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" /> <span class="input-group-text" id="basic-addon2">@example.com</span> <label class="form-label" for="input2">Recipient's username</label> </div> <div class="input-group form-outline mb-3"> <span class="input-group-text" id="basic-addon3" >https://example.com/users/</span > <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" /> <label class="form-label" for="basic-url">Your vanity URL</label> </div> <div class="input-group form-outline mb-3"> <span class="input-group-text">$</span> <input type="text" class="form-control" id="input3" aria-label="Amount (to the nearest dollar)" /> <span class="input-group-text">.00</span> <label class="form-label" for="input3">Your vanity URL</label> </div> <div class="input-group form-outline"> <span class="input-group-text">With textarea</span> <textarea class="form-control" aria-label="With textarea" id="textarea1" ></textarea> <label class="form-label" for="textarea1">Textarea form</label> </div> <div class="form-outline my-3"> <input type="email" id="form118" name="email" class="form-control" /> <label class="form-label" for="form118">Long Example label</label> </div> </section> <!--Section: Demo--> <h2 class="mt-4">Tabs</h2> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-mdb-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" >Home</a > </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-mdb-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" >Profile</a > </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="contact-tab" data-mdb-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" >Contact</a > </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" > <div class="form-outline mt-4"> <input type="text" id="form120" class="form-control" value="Test" /> <label class="form-label" for="form120">Example label</label> </div> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" > <div class="form-outline mt-4"> <input type="text" id="form121" class="form-control" value="Test" /> <label class="form-label" for="form121">Example label</label> </div> </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" > <div class="form-outline mt-4"> <input type="text" id="form122" class="form-control" value="Test" /> <label class="form-label" for="form122">Example label</label> </div> </div> </div> </section> <!--Section: Basic example--> <h2 class="mt-4">Form reset</h2> <form id="formReset" style="max-width: 22rem;" class="needs-validation" novalidate> <!-- 2 column grid layout with text inputs for the first and last names --> <div class="row mb-3"> <div class="col"> <div class="form-outline"> <input type="text" id="form3Example1" class="form-control" required /> <label class="form-label" for="form3Example1">First name</label> <div class="invalid-feedback">Input can't be empty</div> </div> </div> <div class="col"> <div class="form-outline"> <input type="text" id="form3Example2" class="form-control" required /> <label class="form-label" for="form3Example2">Last name</label> <div class="invalid-feedback">Input can't be empty</div> </div> </div> </div> <!-- Email input --> <div class="form-outline mb-4"> <input type="email" id="form3Example3" class="form-control" required /> <label class="form-label" for="form3Example3">Email address</label> <div class="invalid-feedback">Input can't be empty</div> </div> <!-- Password input --> <div class="form-outline mb-4"> <input type="password" id="form3Example4" class="form-control" required /> <label class="form-label" for="form3Example4">Password</label> <div class="invalid-feedback">Input can't be empty</div> </div> <button class="btn btn-danger mt-3 ms-2" id="clear" type="button"> Clear form </button> </form> <!-- Section title --> <h2 class="mt-4">Helper text</h2> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem"> <div class="form-outline"> <input type="text" id="form1" class="form-control" /> <label class="form-label" for="form1">Example label</label> <div class="form-helper">Example helper</div> </div> </div> </section> <!--Section: Demo--> <!--Section: Demo--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline"> <input type="text" id="form1" class="form-control" /> <label class="form-label" for="form1">Example label</label> <div class="form-helper">Example helper</div> </div> </code> </mdbsnippet> </section> <!--Section: Demo--> <hr class="my-5" /> <!-- Section title --> <h2 class="mt-4">Character counter</h2> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem"> <div class="form-outline"> <input type="text" id="form1" class="form-control" data-mdb-showcounter="true" maxlength="20" /> <label class="form-label" for="form1">Example label</label> <div class="form-helper"></div> </div> </div> </section> <!--Section: Demo--> <!--Section: Demo--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline"> <input type="text" id="form1" class="form-control" data-mdb-showcounter="true" maxlength="20" /> <label class="form-label" for="form1">Example label</label> <div class="form-helper"></div> </div> </code> </mdbsnippet> </section> <!--Section: Demo--> <hr class="my-5" /> <!-- Section title --> <h2 class="mt-4">Icons</h2> <!-- Section title --> <h2 class="mt-4">Trailing icon</h2> <!--Section: Demo--> <section class="border d-flex justify-content-center p-4 mb-4"> <div style="width: 23rem"> <div class="form-outline"> <i class="fas fa-exclamation-circle trailing"></i> <input type="text" id="form1" class="form-control form-icon-trailing" /> <label class="form-label" for="form1">Example label</label> </div> </div> </section> <!--Section: Demo--> <!--Section: Demo--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> <div class="form-outline"> <i class="fas fa-exclamation-circle trailing"></i> <input type="text" id="form1" class="form-control form-icon-trailing" /> <label class="form-label" for="form1">Example label</label> </div> </code> </mdbsnippet> </section> <!--Section: Demo--> </section> <!--Section: Docs content--> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-2 mb-4"> <!-- Table of content --> <nav id="table-of-content"> <ul> <li><a href="#section-introduction">Introduction</a></li> <li><a href="#section-basic-example">Basic example</a></li> </ul> </nav> <!-- Table of content --> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!-- Overview panel --> <!-- API panel --> <div class="tab-pane fade" id="pills-api" role="tabpanel" aria-labelledby="pills-api-tab"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-10 mb-4"> <!--Section: API content--> <section> <!--Section: Introduction--> <section id="section-introduction"> <!-- Main title --> <h2 class="h1 fw-bold">Title - API</h2> </section> <!--Section: Introduction--> <hr class="my-5" /> <!--Section: Usage--> <section id="section-usage"> <!-- Section title --> <h2 class="mb-4">Usage</h2> <h4 class="mb-4">Via data attributes</h4> <mdbsnippet> <code data-lang="html" data-name="HTML"> <button type="button" data-mdb-toggle="modal" data-mdb-target="#myModal"> Launch modal </button> </code> </mdbsnippet> <h4 class="my-4">Via JavaScript</h4> <mdbsnippet> <code data-lang="js" data-name="JavaScript"> var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) </code> </mdbsnippet> </section> <!--Section: Usage--> <hr class="my-5" /> <!--Section: Options--> <section id="section-options"> <!-- Section title --> <h2 class="mb-4">Options</h2> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th class="th-sm">Name</th> <th class="th-sm">Type</th> <th class="th-sm">Default</th> <th class="th-sm">Description</th> </tr> </thead> <tbody> <tr> <td class="text-nowrap"><code class="highlighter-rouge">tag</code></td> <td><i>String</i></td> <td><code>'button'</code></td> <td>Changes button tag</td> </tr> </tbody> </table> </div> </section> <!--Section: Options--> <hr class="my-5" /> <!--Section: Methods--> <section id="section-methods"> <!-- Section title --> <h2 class="mb-4">Methods</h2> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th class="th-sm">Name</th> <th class="th-sm">Description</th> <th class="th-sm">Example</th> </tr> </thead> <tbody> <tr> <td class="text-nowrap"><code class="highlighter-rouge">toggle</code></td> <td>Manually toggles a modal</td> <td><code class="language-markup text-nowrap">myModal.toggle()</code></td> </tr> </tbody> </table> </div> </section> <!--Section: Methods--> <hr class="my-5" /> <!--Section: Events--> <section id="section-events"> <!-- Section title --> <h2 class="mb-4">Events</h2> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th class="th-sm">Name</th> <th class="th-sm">Description</th> </tr> </thead> <tbody> <tr> <td class="text-nowrap"> <code class="highlighter-rouge">show.bs.modal</code> </td> <td> This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. </td> </tr> </tbody> </table> </div> </section> <!--Section: Events--> </section> <!--Section: API content--> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-2 mb-4"> <!-- Table of content --> <nav id="table-of-content"> <ul> <li><a href="#section-usage">Usage</a></li> <li><a href="#section-options">Options</a></li> <li><a href="#section-methods">Methods</a></li> <li><a href="#section-events">Events</a></li> </ul> </nav> <!-- Table of content --> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!-- API panel --> </div> <!-- Panels --> </div> <!-- PRISM --> <script type="text/javascript" src="../../dev/js/new-prism.js"></script> <!-- MDB SNIPPET --> <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script> <!-- MDB --> <script type="text/javascript" src="../../js/mdb.min.js"></script> <!-- Custom scripts --> <script type="text/javascript"> const check = (e) => { e.preventDefault(); const form = new FormData(e.target); const email = form.get('email'); const password = form.get('password'); alert(`email: ${email}, password: ${password}`); }; const formReset = document.querySelector('#formReset'); const clearBtn = document.querySelector('#clear'); clearBtn.addEventListener('click', () => { formReset.reset(); }); </script> </body> </html>