<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <title>Autocomplete input with HTML</title>
    </head>
    <body>
        <div class="container">
            <div class="row py-5">
                <div class="card text-dark bg-light position-absolute top-50 start-50 translate-middle mb-3" style="max-width: 25rem;">
                    <div class="border-bottom p-3 text-center">Autocomplete Input with HTML</div>
                    <div class="card-body">
                        <form>
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" class="form-control" id="name" placeholder="Your Name">
                            </div>
                            <div class="mb-3">
                                <label for="Region" class="form-label">Region</label>
                                <input list="list" class="form-control" placeholder="Input Your Region">
                                <datalist id="list">
                                    <option value="Jawa Timur">
                                    <option value="Jawa Tengah">
                                    <option value="Jawa Barat">
                                    <option value="DI. Yogyakarta">
                                    <option value="Bali">
                                </datalist>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.