Found 7663 Questions for Front End Technology

How to display Base64 images in HTML?

AmitDiwan
Updated on 01-Nov-2022 12:00:25
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
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
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
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
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
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
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 get the length of a string in bytes in JavaScript?

Prince Varshney
Updated on 18-Oct-2022 12:35:40
In this tutorial, we are going to learn how can we get the length of a string in bytes in JavaScript. Before going into this we should what a byte is. A byte is a unit of data that is 8 binary bits long i.e., 1 byte can hold up to 8 bits of binary data. A byte is a unit most computers use to represent a character such as a letter, number, or typographic symbol. Some examples of strings and their length in bytes are given − Input "Tutorials Point" Output 15 bytes Input 20€ Output 5 bytes Input ... Read More

How to find all elements in a given array except for the first one using JavaScript?

Prince Varshney
Updated on 18-Oct-2022 12:29:34
In this tutorial, we are going to find all the elements present in the given array except the first element using JavaScript. Here we will create one array and using JavaScript will print all the elements on the HTML page leaving the first element. There are mainly two approaches we can use to do the above task. Both the methods are given as − Approach 1: By using the slice() Method The slice() method is a JavaScript method that is used to slice out the required amount of elements from the array. Syntax The following syntax can be used with ... Read More

How to find every element that exists in any of two given arrays once using JavaScript?

Prince Varshney
Updated on 18-Oct-2022 12:25:46
In this tutorial, we are going to learn how can we find every element that exists in any of the two given arrays once means we need to take two arrays filled with some elements and then from those two arrays create a new array which contains all the elements present in both the array once i.e., no element should be repeated in the new array created. For example, we take two arrays and find every element that exists in any of the two arrays once Input const arr1 = [1, 2, 3, 4, 5] const arr2 = [1, 4, ... Read More
Advertisements