index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width =device-width, initial-scale = 1">
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="./css/style.css">
    <title> Auto Complete Datalist & Form Practice & Dropdown & Dialog Box</title>
</head>
       <h3>This is Auto Complete Data list</h3>
       <input name="country" list="country_list">
       <datalist id="country_list">
        <option value="Bangladesh"></option>
        <option value="Australia"></option>
        <option value="USA"></option>
        <option value="Japan"></option>
        <option value="France"></option>
       </datalist>

        <h3> This is a Registration Form </h3>
        <form action="">
             <label for="">First Name</label><br>
             <input type="text"><br><br>
             <label for="">Last Name</label><br>
             <input type="text"><br><br>
             <label for="">Email</label><br>
             <input type="email"><br><br>
             <label for="">Birthday:</label><br><br>
             <input type="date"><br><br>
             <p>Gender</p>
             <label for="">Male</label>
             <input type="radio">
             <label for="">Female</label>
             <input type="radio">
             <label for="">Other</label>
             <input type="radio"><br><br>
             <label for="">Biography</label><br><br>
             <textarea name="" id="" cols="24" rows="5"></textarea><br><br>
             <label for=""> Subscribe to News letter</label><br>
             <input type="checkbox"><br><br>
             <button>Submit</button>  
        </form>

        <h3> This is Dropdown Practice </h3><br>
        <header>
               <nav class="navbar">
                    <ul>
                        <li><a href="#">Home</a></li>
                         <li><a href="#">About</a></li>
                         <li><a href="#">Contact</a></li>
                         <li><a href="#">Profile</a></li>
                    </ul>
                </nav>
        </header>
        <br><br>

        <h3> Dialog Box </h3>
        <button onclick="document.getElementById('myDialog').showModal();"> Open Dialog </button>
        <dialog id="myDialog">
            <p> I'm Ahmad Sahel Sarker Orpu . i'll be a Software & Apps Developer Insa Allah by 2025</p>
            <button onclick="document.getElementById('myDialog').close();"> Close </button>
        </dialog>
        

 <script src="./javaScript/JavaScript.js"></script>       
</body>
</html>