Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Top 5 HTML Tricks That You Should Know
HTML is used to create web pages. In every new release of HTML, developers make some changes and add unique features. Here, we will discuss that unknown features by most developers who can help developers improve web pages.
Here, we have explained the top 5 HTML tricks with examples.
Color Picker in HTML
We can create a color picker in HTML using the <input> tag. It allows us to pick up any colour by clicking on the colour or adding RGB values.
Syntax
Users can follow the syntax below to create a color picker using HTML.
<input type="color" value="#ff0000">
In the above syntax, we have used the type= “color” to show color picker on the web page.
Example
In the example below, we have added color picker input using HTML. After that, whenever a user picks a new color, we change the web page's background colour using JavaScript. In the output, users can observe that it changes the background colour accordingly whenever they pick a new color from the color picker.
<html>
<body>
<h2>Using the <i> colorpicker of HTML </i> to select the color</h2>
<h3>Select any color to set for the background color.</h3>
<input type="color" id="colorpicker" name="colorpicker" value="#ff0000">
<script>
//Change the background color according to the selected color from the color picker.
var colorpicker = document.getElementById("colorpicker");
colorpicker.addEventListener("input", function () {
document.body.style.backgroundColor = colorpicker.value;
}, false);
</script>
</body>
</html>
Using the <progress> tag of HTML
The <progress> tag allows users to create a progress bar in HTML. We can set the maximum and minimum values of the progress bar and the current value in the progress bar.
Syntax
Users can follow the syntax below to use the <progress> tag to create a progress bar in HTML.
<progress value="50" max="100"> 50% </progress>
In the above syntax, we have set the progress bars and the current value's max value.
Example
In the example below, we have created two different progress bars using the <progress> HTML tag. In the first progress bar, we have set 50% progress; in the second, the maximum value is 200, and the current value is 75, which users can observe in the output. Also, we have changed the dimensions of the second progress bar.
<html>
<head>
<style>
.progress {
width: 200px;
height: 40px;
}
</style>
</head>
<body>
<h2>Using the <i> progress tag of HTML </i> to show the progress bar.</h2>
<progress value="50" max="100"> 50% </progress>
<br> <br>
<progress value="75" max="200" class="progress"> 75% </progress>
</body>
</html>
Making the Content of div Editable
Sometimes, we require to make the content of the div editable. So, the div element should also work as an input element. We can achieve that using the ‘contentEditale’ attribute.
Syntax
Users can follow the syntax below to make the content of the div element editable.
<div contenteditable="true"> // content of the div element </div>
Example
In the example below, we created the div element and added the content related to Github. Also, we have used the ‘contenteditable’ attribute with true value to make the content of the div element editable.
In the output, users can click on the content of the div element and can observe the cursor at the place where users have clicked.
<html>
<head>
<style>
.content {
width: 400px;
height: auto;
border-radius: 12px;
border: 3px dotted green;
padding: 5px;
font-size: 1.3rem;
color: blue;
}
</style>
</head>
<body>
<h2>Making the <i> content of div editable </i> using the contentEditable attribute.</h2>
<div class="content" contenteditable="true">
Github is a web-based hosting service for version control using Git. It is mostly used for computer code. It
offers all of the distributed version control and source code management (SCM) functionality of Git as well as
adding its own features. It provides access control and several collaboration features such as bug tracking,
feature requests, task management, and wikis for every project. <br>
</div>
</body>
</html>
Suggesting the Value in the Input Box
It is a good idea to suggest text with the input field. In Google search, when we try to search about anything, it suggests the text based on the typed value in the input box. We can also suggest input to users using the data list in HTML.
Syntax
Users can follow the syntax below to use the data list to suggest the value in the input box.
<input type="text" list="names"> <datalist id="names"> //Add options here </datalist>
In the above syntax, we have used the ‘list’ attribute with the input element to add options of the data list for the suggestion.
Example
In the example below, we have created the text input. Also, we have created the list using the ‘datalist’ tag of HTML. Furthermore, we have added different options with a value inside the ‘datalist’ element.
Here, the id of the ‘datalist’ is the ‘name’ that we have used as a value of the ‘list’ attribute in the ‘input’ tag.
In the output, usrers can try to write text in the input, and it will suggest options accordingly.
<html>
<body>
<h2>Suggesting the <i> value to the input box </i> using the datalist HTML tag</h2>
<input type = "text" list = "names">
<datalist id = "names">
<option value = "Shubham"></option>
<option value = "John"></option>
<option value = "Rahul"> </option>
<option value = "Raj"> </option>
<option value = "Jay"> </option>
<option value = "Mohit"> </option>
<option value = "Rohan"> </option>
<option value = "Jems"> </option>
<option value = "Rajesh"> </option>
<option value = "Mahesh"> </option>
<option value = "Ramesh"> </option>
<option value = "Manan"> </option>
</datalist>
</body>
</html>
Add the Space Between Table Cells
We can add spaces between the table cells in an HTML table using the ‘border-spacing’ CSS property. Here, we will add custom space between every row and column of the table.
Syntax
Users can follow the syntax below to add spaces between table cells.
table {
border-collapse: separate;
border-spacing: 20px;
}
In the above syntax, we have used the ‘border-spacing’ CSS property with the ‘border-collaps’ CSS property.
Example
In the example below, we created the table and added 3 rows and 3 columns. In CSS, we have used the ‘border-spacing’ property to add space between table cells. Also, users need to always use the ‘border-collapse’ CSS property with the ‘border-spacing’ property.
In the output, users can observe the space of 20px between every table cell.
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 20px;
}
td {
border: 1px solid black;
padding: 5px 10px;
}
</style>
</head>
<body>
<h3>Adding the <i> space between the table cells </i> using the border-space property</h3>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
</tr>
</table>
</body
</html>
We have explained the top 5 HTML tricks with examples in this tutorial. The first trick was about using the color picker, and the second trick was about creating the progress bar using the <progress> tag. In the third trick, we made div editable; in the fourth trick, we suggested input texts. In the final trick, we added space between table cells.
975 Views
