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 Eesha Gandhi
46 articles
How to Allow only Positive Numbers in the Input Number Type
The input number type in HTML allows users to enter numeric values, but by default it accepts both positive and negative numbers. To restrict input to only positive numbers, we need to combine HTML attributes with JavaScript validation techniques. The element provides several attributes for controlling numeric input: min, max, step, and value. However, the min attribute alone only restricts the spinner controls and form validation − users can still manually type negative numbers. Syntax Basic syntax for a number input with minimum value restriction − For complete positive-only restriction with ...
Read MoreHow to Allow the File Input Type to Accept Only Image Files
The tag in HTML creates an input control that accepts user input. The type attribute determines the kind of input field displayed, such as text fields, checkboxes, buttons, or file uploads. When working with file uploads, you often need to restrict the allowed file types to only accept image files. The element by default accepts all file types, but you can limit it to images using the accept attribute or JavaScript validation. This ensures users can only select image files from their device. Syntax Following is the basic syntax for file input − ...
Read MoreHow to Control the Space between Bullets and li Elements?
In HTML lists, controlling the space between bullet points and list items is a common styling requirement. By default, browsers apply standard spacing between bullets and text content, but this can be customized using various CSS techniques to achieve the desired visual layout. HTML provides three types of lists − Ordered List (ol) − Uses numbers or other schemes for sequential items Unordered List (ul) − Uses bullets for non-sequential items Description List (dl) − Used for term-definition pairs Default List Spacing When creating an unordered list, browsers apply default spacing between bullets and ...
Read MoreHow to Create a Hidden Div without a Line Break or Horizontal Space?
The HTML div element serves as a container for grouping related content on web pages. While div elements are normally visible and take up space in the document layout, there are situations where you need to hide a div without creating line breaks or consuming horizontal space. Understanding how to properly hide div elements is crucial for creating dynamic web layouts, implementing show/hide functionality, and managing space-efficient designs. Different hiding methods produce different results in terms of space consumption and layout impact. HTML Div Element Basics The tag is a block-level container element that groups related ...
Read MoreHow to Create a List with Dashes in HTML?
A list is any information that is displayed in a logical or linear format. It is a collection of items written in a meaningful group or sequence and denoted by bullet points, numbers, and so on. HTML Lists aid in the semantic display of a list of information. In HTML, there are three types of lists: Unordered list or Bulleted list (ul) The list items in an HTML unordered list are not in any particular order or sequence. Because the items are marked with bullets, an unordered list is also known as a Bulleted list. It begins ...
Read MoreHow to Create a Teardrop in HTML?
Creating shapes using HTML and CSS is quite an easy task until the shape is not very complex. A teardrop shape, with its curved bottom and pointed top, requires more advanced techniques than simple geometric shapes. In this tutorial, we will explore two methods to create a teardrop shape: using CSS with border-radius and transform properties, and using SVG for more precise control. Let's first understand why teardrops are challenging to create with basic HTML elements − They combine both curved and pointed edges The shape requires asymmetric styling Proper proportions are crucial for a realistic appearance ...
Read MoreHow to Create a Two-Column Div Layout with the Right Column Having Fixed Width?
The element is one of the most widely used elements in HTML for creating page layouts. A common requirement is to create a two-column layout where the right column has a fixed width while the left column fills the remaining space. This layout pattern is useful for sidebars, navigation panels, or content areas with advertisements. In this tutorial, we will explore different methods to create a two-column div layout with a fixed-width right column using CSS properties like float, width, and modern layout techniques. Understanding the Float Property The CSS float property positions an element to ...
Read MoreHow to Create an HTML Table with a Fixed Left Column and Scrollable Body?
A table with a fixed left column and scrollable body is a powerful layout technique that keeps important identifier columns (like names, IDs, or categories) visible while allowing horizontal scrolling through additional data columns. This approach is especially useful for displaying wide datasets where users need constant reference to the leftmost column while exploring other data. Creating such tables requires careful use of CSS positioning and overflow properties to achieve the desired fixed-column behavior while maintaining proper table structure and responsiveness. Table Structure Basics HTML tables are created with the tag, incorporating for rows, ...
Read MoreHow to Create Button with Line Breaks?
The HTML element is an interactive element that a user can activate with a mouse click or keyboard shortcut. It performs a programmable action, such as submitting a form or opening a dialog, once activated. When a button contains long text, it becomes necessary to add line breaks to improve readability and fit the button within specific dimensions. Buttons can be created using the HTML , , or tags. There are several CSS techniques to create line breaks within button text without compromising functionality or accessibility. Syntax Following is the basic syntax for creating a ...
Read MoreHow to Create Checkbox with a Clickable Label?
The HTML checkbox is created using the element to define square boxes that users can tick (check) when activated. Checkboxes allow users to select one or more options from a limited set of choices. Making a checkbox with a clickable label improves user experience by allowing users to click on the label text to toggle the checkbox state. Syntax Following is the basic syntax for creating a checkbox − To create a clickable label for the checkbox − Label Text Or using the for attribute − ...
Read More