Advanced Customization with Icons and JavaScript

Method 1: Using HTML and CSS

For a more advanced implementation, such as adding an icon inside the input field that toggles the input type (e.g., for a password field), you might use Font Awesome for the icon and JavaScript for the toggle functionality.

Example: Show/Hide Password Toggle

First, include Font Awesome for the icons:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”>

Then, add the HTML structure with embedded JavaScript:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Show/Hide Password</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> 
    <style> 
        .input-wrapper { 
            position: relative; 
            display: inline-block; 
        } 
  
        .input-wrapper input { 
            padding-right: 30px; 
        } 
  
        .toggle-password { 
            position: absolute; 
            top: 50%; 
            right: 10px; 
            transform: translateY(-50%); 
            border: none; 
            background: none; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="input-wrapper"> 
        <input id="password" type="password" 
            placeholder="Password"> 
        <button class="toggle-password" 
            onclick="togglePasswordVisibility()"> 
            <i id="toggleIcon" class="fas fa-eye"></i> 
        </button> 
    </div> 
  
    <script> 
        function togglePasswordVisibility() { 
            var passwordInput = document.getElementById('password'); 
            var toggleIcon = document.getElementById('toggleIcon'); 
            if (passwordInput.type === "password") { 
                passwordInput.type = "text"; 
                toggleIcon.classList.remove('fa-eye'); 
                toggleIcon.classList.add('fa-eye-slash'); 
            } else { 
                passwordInput.type = "password"; 
                toggleIcon.classList.remove('fa-eye-slash'); 
                toggleIcon.classList.add('fa-eye'); 
            } 
        } 
    </script> 
</body> 
  
</html>

Output

This setup offers an interactive user experience by allowing the user to toggle the visibility of their password input.

How to Add Button Inside an Input Field in HTML ?

Integrating a button inside an input box is a common design pattern in web development, often seen in search bars, where a “search” button sits within the text input field, or in password fields that include a “show/hide” toggle. This UI element enhances user experience by offering a clear, interactive way to perform actions directly from the input field. Achieving this layout involves a combination of HTML, CSS, and sometimes JavaScript, depending on the functionality required.

Tags:

#HTML-Questions #HTML #Web Technologies

Method 1: Using HTML and CSS

Advanced Customization with Icons and JavaScript

HTML

How to Add Button Inside an Input Field in HTML ?

Similar Reads

Contact Us