In this article, we will learn how to display a list in “n” column format in HTML and CSS with the help of columns, column-count, and grid CSS properties. Displaying a list in columns can be a useful way to save space and make the information more visually appealing. We can achieve this by using different approaches that rely on columns, column-count, and grid properties respectively. Let’s understand each approach in detail. Approach 1 In this approach, we will use the column-count CSS property to determine the number of columns we will divide our content into. Let’s understand ... Read More

In this article, we will learn how to display a dialog box on the page using the dialog HTML tag. Dialog boxes can be a useful tool to provide feedback to users or to prompt them for input. The HTML element provides an easy way to display a dialog box on a web page. The element is not supported in all browsers, but it can be polyfilled using JavaScript to provide support for older browsers. Let’s understand how to implement a dialog box on a webpage with the help of some examples Example 1 In this example, we ... Read More

In this article, we will learn how to disable the mouseout events triggered by child elements with the help of the “mouseleave” event or using the stopPropagation method of the native HTML event. The “mouseout” event, when triggered on a child element, bubbles up in its DOM hierarchy, and so it will also trigger the same event on all its parent elements. This can be unneeded when we only want to listen to the “mouseout” event on the parent element itself, not the bubbled-up event from its child elements. Let’s understand how to avoid the above problem with the ... Read More

In this article, we will learn how to disable the input type text area element with the help of a disabled attribute. Disabling an input field can be useful in situations where one wants to display information to the user but does not want the user to be able to edit or modify that information. For example, to display a message or a set of instructions in a text area element. This can also be useful in cases where one wants the user to avoid typing the content in the text area in the middle of a form submission. This ... Read More

In this article, we will learn how to disable the browser autocomplete feature on the web form fields or their input elements, and we will use the “autocomplete” attributes provided by “form” and “input” HTML tags. Browser autocomplete is a feature that suggests the past values entered and submitted into the forms. By default, autocomplete is enabled in the browsers, and so when the user clicks on an input, the suggestions are visible for that input value, and the user can directly pick any of the suggestions to autofill the content. To disable this behavior, we will see ... Read More

Cross-Site Scripting (XSS) is a major threat to web application security because it allows attackers to inject malicious scripts into reputable websites. This attack depends on innocent consumers, exposing important information or potentially gaining control of their accounts. Understanding and combating XSS threats is critical for maintaining a strong security posture as web applications become more complex and dynamic. In this article, we will dive into XSS attacks and look at possible prevention strategies. What are XSS Attacks? Cross-Site Scripting (XSS) attacks are a common security risk in web applications. Attackers take advantage of vulnerabilities in web pages to inject ... Read More

While developing web pages, many times, developers require to manage the size of different HTML elements such as image, div element, span element, etc. Developers can use the width and height CSS properties or HTML attributes to manipulate the dimensions of a particular element. In this tutorial, we will see the difference between the width/height HTML attribute and CSS properties. Width and Height HTML Attributes The width/height attributes in HTML are used for the presentation. It takes the width and height values in the ‘px’, ‘%’, etc. units but not in ‘rem’ units. Also, if we don’t define the unit ... Read More

By default, we can drag all the HTML elements by clicking on them. However, users should not be able to drag the non-draggable element. Otherwise, they can’t be able to differentiate between the draggable and non-draggable elements, as all elements are draggable. The images are also draggable on the web page. In this tutorial, we will learn various ways to prevent the dragging of ghost images. Example 1 (Dragging the Image) In this example, we added the image to the web page. Also, we set the dimensions for the image using the CSS. In the output, users can try to ... Read More

Have you ever observed that filling the form data on any web page suggests the previous input values? Now, the question is where the browser is finding that particular value? The browser stores the data in the cookie storage and fetches it from there. It also stores the login credentials in the cookie storage to suggest to users when they visit the login page again. It is a good practice to suggest data while filling out the contact form or any other form but not while filling out the login or sign form. Now, think about the scenario in which ... Read More

In many cases, developers require to place an icon inside the text input or particular HTML element. For example, we are creating a form containing multiple inputs. If we put the icon related to the form input field inside the input, we can create a better UI and attractive design for the application. In this tutorial, we will use the font-awesome library to add the icon on the web page. Also, we will manipulate the CSS code to place the icon inside the input field. Syntax Users can follow the syntax below to place an icon inside the input field. ... Read More