Category: HTML

Sometimes, we want to toggle HTML radio button by clicking its label.

In this article, we’ll look at how to toggle HTML radio button by clicking its label.

How to toggle HTML radio button by clicking its label?

To toggle HTML radio button by clicking its label, we can put the radio button inside the label.

For instance, we write

<label>
  <input type="radio" name="mode" value="create" />
  <i>create table</i>
</label>

to put the radio button input inside the label element.

Then we can click on the label to toggle the radio button.

Conclusion

To toggle HTML radio button by clicking its label, we can put the radio button inside the label.

Sometimes, we want to prevent user from typing in text field without disabling the field with HTML.

In this article, we’ll look at how to prevent user from typing in text field without disabling the field with HTML.

How to prevent user from typing in text field without disabling the field with HTML?

To prevent user from typing in text field without disabling the field with HTML, we can add the readonly attribute to the input.

For instance, we write

<input readonly type="text" />

to stop users from enter text into the input without making it look disabled.

Conclusion

To prevent user from typing in text field without disabling the field with HTML, we can add the readonly attribute to the input.

Sometimes, we want to eliminate 300ms delay on click events in mobile Safari.

In this article, we’ll look at how to eliminate 300ms delay on click events in mobile Safari.

How to eliminate 300ms delay on click events in mobile Safari?

To eliminate 300ms delay on click events in mobile Safari, we add a meta element to set the viewport.

For instance, we write

<meta name="viewport" content="width=device-width, user-scalable=no" />

to add a meta element with name attribute set to viewport to eliminate the 300ms delay on click events in Mobile Safari.

Conclusion

To eliminate 300ms delay on click events in mobile Safari, we add a meta element to set the viewport.

Sometimes, we want to create a toggle button in Bootstrap.

In this article, we’ll look at how to create a toggle button in Bootstrap.

How to create a toggle button in Bootstrap?

To create a toggle button in Bootstrap, we add the data-toggle attribute to a button.

For instance, we write

<button type="button" class="btn btn-primary" data-toggle="button">
  Single toggle
</button>

to add data-toggle="button" into the button to make the button a toggle button with Bootstrap.

Conclusion

To create a toggle button in Bootstrap, we add the data-toggle attribute to a button.

Sometimes, we want to load images dynamically or lazily when users scrolls them into view with HTML.

In this article, we’ll look at how to load images dynamically or lazily when users scrolls them into view with HTML.

How to load images dynamically or lazily when users scrolls them into view with HTML?

To load images dynamically or lazily when users scrolls them into view with HTML, we can set the loading attribute to lazy.

For instance, we write

<img src="http://placeimg.com/640/360/any" loading="lazy" />

to set the loading attribute to lazy.

Then the image will be loaded only when it’s visible.

Conclusion

To load images dynamically or lazily when users scrolls them into view with HTML, we can set the loading attribute to lazy.