In this category, you can explore different HTML forms including signup/login forms, contact us, and search box forms, etc. Each tutorial explained with a source code example. Besides this, various form components like toggle buttons, input styles, range sliders, etc are available in this category.
Glassmorphism is a modern web design concept in which the elements are designed in a morphism style with glass effects. There are multiple libraries to make elements morphism, but here we will create a glassmorphism login form using HTML and … Read More
A pricing table is a useful element to describe the features and price of a product/service. No doubt, a pricing table plays an important role in successful sales on an eCommerce website. So, it must be user-friendly, attractive, clear, and … Read More
Sometimes, we need to calculate the age of users from their date of birth for various purposes. Whether you want to display the age of a user on a profile page or want to validate a user registration form for … Read More
The stylish input fields attract the users while filling out the form element. We can make the input stylish by defining color and shadow as well as placing an icon inside it. So, this tutorial explains how you can place … Read More
A toggle button is a visual element of the user interface that is used to switch between two (true/false) state. In web development, an HTML radio (or checkbox) input is used to get true and false value on checked and … Read More
Are you looking for a feedback form design? If yes, then you are in the right place. This tutorial explains how to create a feedback form with a star rating system using HTML and CSS. Besides the star-rating, we’ll also … Read More
Do you want to show characters in the HTML password input field? Well! in this guide you will come to know how to display password characters rather than default dots. Besides this, we’ll also create a project to show/hide the … Read More
A “Contact Us” page is one of the most important pages of a website that contains information on all basic contact information, including the contact form. This makes it easy for users to contact for information related to the content … Read More
Ticks are useful marks along with the numeric values in the HTML range slider. These marks not only create range steps but also helps to identify the current value of the slider. Such a range slider can be used for … Read More
A search box is one of the most used elements on a web page while browsing. Generally, a search box is located inside the navbar of most websites. But, if a navbar has limited space where should the search box … Read More
Do you want to create a message card in HTML that would be displayed after successful registration? Yes! you are in the right place. In this tutorial, I’ll show how you can do this with a few simple steps of … Read More
In this tutorial, we are going to build an HTML login/signup form placed in a popup model. We’ve used the tabs feature to switch between the login and sign up form. Besides this, there is also an SVG popup close … Read More
In a user interface, a range slider is a useful element to set a range of values. It makes it easy to input number values through its thumb/handle. In HTML, we can define a range slider with input type range … Read More
A few days back, I was designing a landing page for a client. He asked me to add an animated stylish search box in that. I searched on the web, found many designs for the search box but none of … Read More
The world is changing rapidly due to the modern technology of the web. Nowadays, most of the life tasks we are doing via the internet. Whether it is about applying for a job or online course, we need to register … Read More
Nowadays, every Web Designer tries to make an attractive design that attracts users. Whether it’s about a full website or a component of a website. No doubt, each component has its own value in a website. This component can be … Read More
In this tutorial, I will show you how to style a Google Custom Search box with CSS and HTML. We will use {a-gsc-i-id1} elements to design the search bar. We know that the Google search field let you enable search … Read More
Learn how to create a CSS Search box with Icon Inside. We will create three different examples of search boxes that have the icons within the input type text. Each example clean coded and work well on desktop and as … Read More
Have you tried out an expandable search box? What about click to reveal search bar? It works almost similar but with additional animation and more smooth. Today we are going to build a reveal search bar with the help of … Read More
Basically, HTML input type checkbox & radio is used to switch between true or false in JavaScript statements. We can easily change a setting between two states by getting checkbox checked (or unchecked) value. Although, we can use such inputs … Read More
