Floating labels are clean, fancy and modern way of showing input label getting rid of old boring label style resulting in user experience. FLoating labels help users understand what they should specigy, because the label never disappears if field is focused or filled. This tutorial will show you how to create Floating Labels Using HTML and CSS. No worries this tutorial will help you to add that fancy feature in your web forms even if it goes beyond javascript.now whether angular,react or native Android, etc.
Step-by-Step Guide to Creating Floating Labels
Step 1: Basic HTML Structure
Start by setting up a simple HTML form with input fields and labels. Here’s the basic structure:
Step 2: Styling with CSS
Next, we’ll add CSS to style the form and create the floating label effect. Here’s the CSS code:
<!DOCTYPE html>: This declaration defines the document type and version of HTML. It ensures the browser interprets the document as HTML5.
<html lang="en">: The root element of the HTML document. The lang attribute specifies the language of the document’s content (English in this case).
<head>: Contains meta-information about the HTML document, such as the character encoding, viewport settings, and links to external resources like CSS files.
<meta charset="UTF-8">: Defines the character encoding for the document as UTF-8, which supports a wide range of characters from different languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage is responsive by setting the width of the viewport to the device’s width and scaling the initial size appropriately.
<title>Floating Label</title>: Sets the title of the document, which is displayed in the browser’s title bar or tab.
<link rel="stylesheet" href="style.css">: Links an external CSS file (style.css) to style the HTML document.
<body>: Contains the main content of the HTML document that is visible to the user.
<div class="input-group">: A container for grouping an input field and its associated label together. The class attribute is used to apply CSS styles to the group.
<input type="text" required>: An input field where users can enter text. The required attribute makes it mandatory to fill this field before submitting a form.
<label>Surname</label>: A label for the input field. When styled with CSS, it will float over the input field when the user starts typing.
<input type="password" required>: An input field for entering a password. The password type hides the text entered for security. The required attribute ensures the field must be filled out.
<label>Password</label>: A label for the password input field, which will float over the input field when styled appropriately with CSS.
css structure:
Conclusion:
In summary, floating labels are an effective method for enhancing the usability and appearance of forms in web development. By using HTML and CSS, developers can design input fields that are both attractive and functional, thereby improving the user experience. When used thoughtfully and appropriately, floating labels can significantly improve form design, making it more intuitive, efficient, and visually appealing.
