| <!DOCTYPE html> |
| <html lang="en" class="h-100"> |
| |
| <head> |
| <title>Web form</title> |
| |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| |
| <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <script src="//code.jquery.com/jquery-3.6.0.min.js"></script> |
| <script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> |
| <script src="//unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script> |
| <link href="//unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet"> |
| </head> |
| |
| <body class="d-flex flex-column h-100"> |
| <main class="flex-shrink-2"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-12"> |
| <h1 class="display-6">Web form</h1> |
| </div> |
| </div> |
| <form method="get" action="submitted-form.html"> |
| <div class="row"> |
| <div class="col-md-4 py-2"> |
| <label class="form-label w-100">Text input |
| <input type="text" class="form-control" name="my-text" id="my-text-id" myprop="myvalue"> |
| </label> |
| |
| <label class="form-label w-100">Password |
| <input type="password" class="form-control" name="my-password" autocomplete="off"> |
| </label> |
| |
| <label class="form-label w-100">Textarea |
| <textarea class="form-control" name="my-textarea" rows="3"></textarea> |
| </label> |
| |
| <label class="form-label w-100">Disabled input |
| <input class="form-control" type="text" name="my-disabled" placeholder="Disabled input" disabled> |
| </label> |
| |
| <label class="form-label w-100">Readonly input |
| <input class="form-control" type="text" name="my-readonly" value="Readonly input" readonly> |
| </label> |
| |
| <div class="form-group tp-align-right mt-3"> |
| <a href="./index.html"> |
| Return to index |
| </a> |
| </div> |
| </div> |
| |
| <div class="col-md-4 py-2"> |
| <label class="form-label w-100">Dropdown (select) |
| <select class="form-select" name="my-select"> |
| <option selected>Open this select menu</option> |
| <option value="1">One</option> |
| <option value="2">Two</option> |
| <option value="3">Three</option> |
| </select> |
| </label> |
| |
| <label class="form-label w-100">Dropdown (datalist) |
| <input class="form-control" list="my-options" name="my-datalist" placeholder="Type to search..."> |
| <datalist id="my-options"> |
| <option value="San Francisco"> |
| <option value="New York"> |
| <option value="Seattle"> |
| <option value="Los Angeles"> |
| <option value="Chicago"> |
| </datalist> |
| </label> |
| |
| <label class="form-label w-100">File input |
| <input class="form-control" type="file" name="my-file"> |
| </label> |
| |
| <div class="form-check"> |
| <label class="form-check-label w-100"> |
| <input class="form-check-input" type="checkbox" name="my-check" id="my-check-1" checked> |
| Checked checkbox |
| </label> |
| |
| <label class="form-check-label w-100"> |
| <input class="form-check-input" type="checkbox" name="my-check" id="my-check-2"> |
| Default checkbox |
| </label> |
| </div> |
| |
| <div class="form-check"> |
| <label class="form-check-label w-100"> |
| <input class="form-check-input" type="radio" name="my-radio" id="my-radio-1" checked> |
| Checked radio |
| </label> |
| </div> |
| <div class="form-check"> |
| <label class="form-check-label w-100"> |
| <input class="form-check-input" type="radio" name="my-radio" id="my-radio-2"> |
| Default radio |
| </label> |
| </div> |
| |
| <button type="submit" class="btn btn-outline-primary mt-3">Submit</button> |
| |
| </div> |
| |
| <div class="col-md-4 py-2"> |
| <label class="form-label w-100">Color picker |
| <input type="color" class="form-control form-control-color" name="my-colors" value="#563d7c"> |
| </label> |
| |
| <label class="form-label w-100">Date picker |
| <input type="text" class="form-control" name="my-date"> |
| </label> |
| |
| <label class="form-label w-100">Example range |
| <input type="range" class="form-range" name="my-range" min="0" max="10" step="1" value="5"> |
| </label> |
| |
| <input type="hidden" name="my-hidden"> |
| </div> |
| </div> |
| </form> |
| </div> |
| </main> |
| <script> |
| $('[name=my-date]').datepicker({ |
| }); |
| </script> |
| </body> |
| |
| </html> |
