Found 2416 Articles for HTML

Unescape HTML entities in JavaScript?

AmitDiwan
Updated on 12-Nov-2023 10:48:58

1K+ Views

To unescape HTML entities in JavaScript, use the unescape() function. Let’s say you want to encode special character with the unescape() function − document.write(unescape("Demo%20Text%20")); In this article, we will see two examples − Unescape Entities Decode the Encoded String Unescape Entities Example Lo unescape, we will use the unescape() method in JavaScript. Let us see an example − DOCTYPE html> Demo Heading document.write(unescape("Demo%20Text%20")); Output Decode the Encoded String Use escape() for encoding ... Read More

How to make an element width: 100% minus padding?

AmitDiwan
Updated on 01-Nov-2022 12:38:47

2K+ Views

Let’s say we have padding: 50px 10px; for the input and want it to be 100% of the parent div's width. Using width: 100%; is not working. To fix it, we can place the input in a div with position: relative and a fixed height. This will form the element width to be 100% minus padding. We have set the position to be relative with fixed height − .container { position: relative; height: 30px; } The position of the input is set absolute − content { position: absolute; ... Read More

How to display Base64 images in HTML?

AmitDiwan
Updated on 14-Sep-2023 21:56:10

24K+ Views

To display images encoded with Base64, you need to get the base64 encoded string and use the img element. This prevents the page from loading slowly and saves the web browser from additional HTTP requests. Set the base64 image in the src attribute of the . Let’s say we have the following image − For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts − The 1st part is the Base64 encoded image. The 2nd part is the Base64 encoded string of the image. ... Read More

Retrieve the position (X,Y) of an HTML element

AmitDiwan
Updated on 01-Nov-2022 11:57:44

4K+ Views

The X, Y position of an HTML document represents X as horizontal whereas Y vertical position. Here, we will see two examples to get the position i.e. Get the position of a specific text on a web page. Get the position of buttons on a web page. Get the position of a specific text on a web page To get the position of a specific text on a web page, we will use the getBoundingClientRect() method. It provides information about the size of an element and its position relative to the viewport. This will give us the ... Read More

How can I make a div not larger than its contents?

AmitDiwan
Updated on 01-Nov-2022 11:51:18

78 Views

To make a div not larger than its contents, use the display property with the value inline-block. We have a div here with an image − The div is styled with inline-block. This inline-block would form a div not larger than its contents − .wrapper{ display: inline-block; border: 10px solid orange; } The image is given a border − img{ border: 20px solid white; } Example Let us now see the complete example − DOCTYPE html> ... Read More

Can you nest HTML forms?

AmitDiwan
Updated on 01-Nov-2022 11:28:05

2K+ Views

In HTML, we cannot nest HTML forms, but we can add multiple forms. Let us see an example of multiple forms, wherein we will add more than one form, upload buttons and multiple Submit buttons. First, we will set the 1st form. This allows uploading only a single file − Select a file: Just after that, we have used and then comes the 2nd form. This allows uploading multiple files − Select a file: ... Read More

How to set a value to a file input in HTML?

AmitDiwan
Updated on 01-Nov-2022 11:23:19

4K+ Views

To set a value to a file input in HTML, use the type attribute. It defines a Browse button to upload the files with a file-select field − However, we cannot set a specific value to a file input in HTML for security reasons. Nothing will happen, even if, let’s say we set a value like this − Let us see some examples to upload single and multiple files with input type file. File select with only one file Example This allows a user to upload only a single file − DOCTYPE html> ... Read More

How do I create an HTML button that acts like a link?

AmitDiwan
Updated on 25-Oct-2022 07:39:10

3K+ Views

We can easily create an HTML button to act like a link and clickable. Let us see the following examples − Create an HTML button link with the tag Create an HTML button link with the tag Create an HTML button link with the onclick event Create an HTML button link with the tag In this example, we will create a link button with tag. The tag is set inside the tag for this − Tutorial Library ... Read More

How to prevent buttons from submitting forms in HTML?

AmitDiwan
Updated on 25-Oct-2022 07:02:55

2K+ Views

To prevent forms from being submitted, we can use the onsubmit property. We can also use the event.preventDefault() method − Prevent buttons from submitting forms using the onsubmit property Prevent buttons from submitting forms using event.preventDefault() Prevent buttons from submitting forms using the onsubmit property We can prevent form from submitting using the onsubmit property as shown below − We have returned false above in the tag itself to prevent form from submitting. Example Let us see the complete example − doctype html> Details ... Read More

How to apply CSS to iframe?

AmitDiwan
Updated on 18-Oct-2022 08:22:01

7K+ Views

Define an inline frame with HTML tag . The tag is not somehow related to tag, instead, it can appear anywhere in your document. The tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. The src attribute is used to specify the URL of the document that occupies the inline frame. We can easily apply CSS to an iframe, but let us first look at the attributes of the − src − This attribute is used to give the file name that should ... Read More

Advertisements