How to Add Button Inside an Input Field in HTML ?
Last Updated :
14 Feb, 2024
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.
Method 1: Using HTML and CSS
The simplest way to place a button inside an input box is by wrapping both elements within a parent div and using CSS to position the button over the input field.
Example: Basic Implementation to add button in input field.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Input with Button</title>
<style>
.input-wrapper {
position: relative;
display: inline-block;
}
.input-wrapper input {
padding-right: 40px;
}
.input-wrapper button {
position: absolute;
top: 0;
right: 0;
border: none;
background-color: transparent;
cursor: pointer;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" placeholder="Search...">
<button onclick="alert('Button clicked!');">
🔍
</button>
</div>
</body>
</html>
Output
In this example, the button is absolutely positioned within the input-wrapper container, aligning it to the right of the input field. The padding on the right side of the input ensures that text entered by the user does not overlap with the button.
Method 2: 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.
Similar Reads
How to Add Input Field inside Table Cell in HTML ? In HTML, adding input fields inside the table cells can be done to make the application user interactive and useful in the scenarios of building forms, data entry systems, etc. Below are the approaches to add input field inside a Table Cell in HTML: Table of Content Using 'input' tagUsing data Attri
3 min read
How to Add an Input Field on Button Click in JavaScript ? JavaScript allows us to dynamically add an input field upon button click. We can use the below approaches for adding an input field on Button Click in JavaScript. Table of Content Using DOM ManipulationUsing Template Literal and InnerHTMLUsing DOM ManipulationDOM manipulation is used to dynamically
2 min read
How to add icons in the button in HTML ? Adding icons in buttons in HTML involves including visual symbols or images within buttons to enhance their appearance and usability. This can be done using icon libraries like Font Awesome, Bootstrap Icons, or Material Icons, or by inserting images directly with <img> tags for visual cues.Add
3 min read
How to put a responsive clear button inside HTML input text field ? To create a responsive, clear button inside an HTML input field, we need to carefully position both the input field and the button within the same container. Using CSS, the button can be positioned on the right side of the input field, and JavaScript or jQuery will handle the clearing functionality
3 min read
How to put a responsive clear button inside HTML input text field ? To create a responsive, clear button inside an HTML input field, we need to carefully position both the input field and the button within the same container. Using CSS, the button can be positioned on the right side of the input field, and JavaScript or jQuery will handle the clearing functionality
3 min read
How to put a responsive clear button inside HTML input text field ? To create a responsive, clear button inside an HTML input field, we need to carefully position both the input field and the button within the same container. Using CSS, the button can be positioned on the right side of the input field, and JavaScript or jQuery will handle the clearing functionality
3 min read