To create a form with a username input field and a user icon on the left side of the input field, you can use HTML and CSS. You can use a user icon from an icon library like Font Awesome. Here's an example:
HTML for Username Input Field:
<!DOCTYPE html>
<html>
<head>
<!-- Include Font Awesome CSS (or use another icon library) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.input-container {
position: relative;
width: 300px; /* Adjust the width as needed */
}
.input-container i {
position: absolute;
left: 10px; /* Adjust the left position as needed */
top: 50%;
transform: translateY(-50%);
color: #555; /* Icon color */
}
.input-container input {
padding-left: 30px; /* Leave space for the icon on the left */
width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<div class="input-container">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
In this example:
- We include Font Awesome for the user icon (you can use another icon library or your custom icon).
- We use the `.input-container` class to position the icon and input field.
- The `<i>` element holds the user icon and is positioned to the left of the input field.
- The input field has padding on the left to leave space for the icon, and the width is set to 100% to fill the container.
You can adjust the width, left position, icon color, and other styles to match your design preferences.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me