In this blog, I am creating Image Hover Effects with Color in a row using HTML & CSS. So, Let’s create an “index.html” & “style.css” below index.html code-
In this index.html container with four box classes & each box class with images & content class & multiple div which is define style.css page-
When you implement from this index.html & style.css page then showing below row-
In this blog, I am creating an Attractive Isometric card in a row using HTML & CSS. So, Let’s create a “index.html” & “style.css” below index.html code-
In this index.html container with card & multiple class which is define style.css page-
The HTTP method used to transfer data while submitting the form is specified using the HTML form> method Attribute. The HTTP methods GET and POST are the two types of HTTP methods. With the form> element, the method attribute can be used.
Attribute Values:
Which are the Supported Tags:–
<form>Syntax:–
<form method="get|post">Example 1:– This example illustrates the use of GET method attribute.
Output:-
Example 2: This example illustrates the use of the POST method attribute. This method sends the form-data as an HTTP post-transaction.
Output:-
In this blog, I am using I am creating an attractive card with a hover effect using HTML and CSS. So, Let’s before create a “index.html” and “style.css ” page below index.html page structure define-
In this index.html page, I am using a class “container” with three images and class “container” defined in below “style.css” code-
In this style.css class, i define images & container, class after that show below reflection card in a row.
This Attribute indicates that data in the form should be encoded before being submitted to the server. This sort of property can only be utilised if the method is set to “POST.”
Syntax:
<form enctype = "value">Element:– The enctype property is only applicable to the form> element.
Attribute Value: There are three values for this characteristic, which are given below:
Example:–
Output:-
Supported Browsers: The browser supported by enctype Attribute are listed below:
Export HTML data in Excel, even before we have to load some data into an HTML table. So here we have to make fetch employee table data and load it in an HTML table with table columns like name, address, gender, designation, and age. Here we have created an HTML table with id employee_data. So this id we will use for fetch this HTML table data in JavaScript code. Under this HTML code, we have made one button tag with id export_button, so when use has clicked on this button, then HTML table data will be download in Excel file format without refresh of a web page using JavaScript.
In this tutorial, we have to use SheetJS JavaScript Library to export HTML table data to Excel using JavaScript. So first we have to include the following SheetJS library link at the header of this HTML web page.
In the JavaScript code part, first we have created the html_table_to_excel(type) function. This function has used sheetJS library function and convert or write HTML table data to excel format and download it in a browser without refreshing the web page.
Once a function is ready then we have to call html_table_to_excel(type) function on the button click event, so for the trigger button click event, we have to use the addEventListener method. So when a user has clicked the button the html_table_to_excel(type) function is called with the xlsx file type. Then it will download the HTML table data in .xlsx format Excel file in the browser without having to refresh a Web page on the client-side.
In this tutorial, I am going to create creative Cube Hover Effects With Changing Color Animation in CSS. So, Before creates an “index.html” & “style.css”. Below index.html code-
In this index.html I am using cube shape with help of CSS and create multiple classes which is define below style.css code-
In this style.css page define all classes which is used in index.html and after that show below page with hover effects-
In this tutorial, you can find how to read excel files using javascript and display excel sheet data on web pages in HTML table format using javascript. In the previous, one of our tutorials, in which we have already seen how to convert HTML table data to Excel files using the SheetJS library. Now in this tutorial also we will be using the SheetJS JavaScript library and by using the JavaScript library, we will convert the Excel file data into an HTML table and display it on the web page.
First, we have to include the Bootstrap Stylesheet and SheetJS library link at the header of our HTML page.
After this under this HTML page, we have to create one file tag for select file excel from the local computer.
And below this file, we have to create one division tag to display excel sheet data on the web page in HTML table format.
Next, we have to move on to writing JavaScript code, so first store file tag property under one variable.
Next, we need to write the JavaScript code on the change event, so when the user has selected a file from the local computer using the file tag, the JavaScript code should be executed.
excel_file.addEventListener(‘change’, (event) => { });Under this change event code first, we want to check the selected file format .xls or .xlsx. If the selected file is not an Excel file then it will display an error on the web page, and if the selected file is Excel then it will proceed to display the Excel file data on the web page.
After a check, the validation error, now read the file using the FileReader object. Here file must be read ads ArrayBuffer bypassing the file object using event.target.files[0].
IF the selected file is a proper excel file then we need to convert what we have got from the FileReader object to Unit8Array object by passing Filereader result into Unit8Array constructor.
Next, we have pass this Unit8Array data in SheetJS read() function, and it will return the selected excel workbook object.
After getting the workbook object, next we have to get the sheet name of the selected excel file. So here SheetNames variable will return sheet name in array format.
Once we have to get the sheet name, now we want to get the first sheet data in JSON format, so we can get by SheetJS sheet_to_json() function by passing the workbook first sheet name.
Once we have to get the first sheet data in JSON format, next we have to simply write JavaScript code and convert that JSON data into an HTML format and display it under division tag with id excel_data. So it will display excel file data on the web page in HTML table format.
So once you have followed all the above steps then you can check output in the browser. So when we have selected an excel file then it will display excel sheet data on the web page in HTML table format without a refresh of the web page. So in this tutorial, we have seen how to convert Excel files to HTML tables at the client-side by using the SheetJS JavaScript library at the client-side. You can find the complete source code here.
HTML forms are used to collect some data from the site visitor. The HTML <form>…..</form> tag is used to create an HTML form
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<input> tag prompts the user to enter data and also request for the information from the web server after submitting the web form.
How it is Used?
<form>
<input>
</form>
In this blog, I am creating Scrolling Text Animation Effects with HTML & CSS. So, let’s Create an index.html & style.css page so, below an index.html page content-
Below style.css file, in this file, i am using multiple CSS class & id which is used in index.html.
