Advanced Customization with Icons and JavaScript
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.