Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Lokesh Badavath
Page 6 of 7
How to set horizontal header for a table?
Tables in HTML can have horizontal headers and vertical headers. A horizontal header displays column labels across the top of the table, while a vertical header displays row labels down the left side. For horizontal headers, we place all elements inside the first tag of the table. Horizontal vs Vertical Table Headers Horizontal Headers Name Age John 25 Sarah 30 Vertical Headers ...
Read MoreHow do I wrap text in a \'pre\' tag in HTML?
In this article, we are going to learn how to wrap text in a tag in HTML. The HTML tag is used to display preformatted blocks of text exactly as they appear in the source code, preserving all spaces, line breaks, and indentation. Preformatted text refers to content that has already been formatted and should be displayed without any additional formatting changes by the browser. The tag preserves whitespace and uses a monospace font by default, making it ideal for displaying code, poetry, ASCII art, or any text where spacing is important. Syntax Following ...
Read MoreHow to limit the number of characters allowed in form input text field?
In this article, we will learn how to limit the number of characters allowed in form input text field using HTML attributes. HTML provides built-in attributes to control the character limits in input fields. The maxlength attribute sets the maximum number of characters allowed, while the minlength attribute sets the minimum number of characters required for validation. Syntax Following is the syntax for the maxlength attribute − Following is the syntax for the minlength attribute − Both attributes can be used together to set a character range ...
Read MoreHow to limit an HTML input box so that it only accepts numeric input?
In this article, we will learn how to limit an HTML input box so that it only accepts numeric inputs. The most effective way to restrict input to numbers is using . This creates a numeric input field that automatically validates user input and provides built-in controls like spinner buttons. Additionally, we can use attributes like min, max, and step to further control the allowed numeric values. Syntax Following is the basic syntax to create a numeric input field − Following is the syntax with additional attributes for range control − ...
Read MoreHow to allow multiple file uploads in HTML forms.
In this article, we will learn how to allow multiple file uploads in HTML forms. The multiple attribute enables users to select and upload several files at once through a single input field, providing a more efficient user experience for file uploads. The multiple attribute is a boolean attribute that works with email and file input types. When applied to file inputs, it allows users to select multiple files from their device using the standard file picker dialog. Syntax Following is the syntax for enabling multiple file uploads in HTML forms − ...
Read MoreHow to use input type field with steps in HTML?
The step attribute in HTML input fields defines the interval between valid numbers that users can enter or select. When used with input types like number, range, date, or time, it controls the stepping behavior of spinner buttons and slider movements. For example, if step="2", the valid numbers could be -4, -2, 0, 2, 4, etc. The step attribute sets the stepping interval when clicking up and down spinner buttons in number fields or moving a slider left and right on range inputs. Syntax Following is the syntax to use the step attribute in HTML input fields ...
Read MoreHow to create a collapsed border in HTML?
The border-collapse property is a CSS property used to control how table borders are displayed. When set to collapse, it merges adjacent table cell borders into a single border, creating a cleaner appearance. When set to separate, each cell maintains its own individual border. Syntax Following is the syntax for the border-collapse property − border-collapse: value; The border-collapse property accepts the following values − collapse − Borders are collapsed into a single border separate − Borders are kept separate (default behavior) initial − Sets the property to its default value (separate) inherit ...
Read MoreHow to use input type field with the color picker in HTML?
The color input type in HTML provides a user-friendly way to select colors through a built-in color picker interface. The element displays a clickable color swatch that opens a color picker dialog when activated. When a user clicks on the color input field, the browser displays a native color picker interface. The selected color value is stored as a seven-character hexadecimal string (e.g., #ff0000 for red). You can set a default color using the value attribute with a valid hexadecimal color code. Syntax Following is the syntax to use input type field with color picker in ...
Read MoreHow to secretly copy to clipboard JavaScript function in Chrome and Firefox?
In JavaScript, you can programmatically copy text to the clipboard without user interaction using different methods. This tutorial shows how to implement "secret" clipboard copying that works silently in the background. We'll explore both the legacy execCommand() method and the modern Clipboard API for copying text to clipboard programmatically. Using execCommand() Method (Legacy) The execCommand() method was traditionally used for clipboard operations. Here's a basic implementation: Copy text ...
Read MoreHow to work with JavaScript Drag and drop for touch devices?
JavaScript drag and drop functionality provides an intuitive way to move elements within web pages. While the HTML5 Drag and Drop API works well on desktop, touch devices require additional handling to ensure proper functionality. Basic Drag and Drop Concepts To make an element draggable in HTML5, add the draggable="true" attribute to the element. By default, images and text selections are draggable, but other elements need this attribute. Drag me Drag and Drop Events The drag and drop process involves two sets of events: Events on draggable elements: dragstart - Fires ...
Read More