Categories
HTML

How to make HTML select read only?

Sometimes, we want to make HTML select read only.

In this article, we’ll look at how to make HTML select read only.

How to make HTML select read only?

To make HTML select read only, we disable all the select’s options.

For instance, we write

<select>
  <option disabled>1</option>
  <option selected>2</option>
  <option disabled>3</option>
</select>

to disable the options we don’t want the user to select with the disabled attribute.

And we set the default option with the selected attribute.

Conclusion

To make HTML select read only, we disable all the select’s options.

Categories
HTML

How to make HTML text input allow only numeric input?

Sometimes, we want to make HTML text input allow only numeric input.

In this article, we’ll look at how to make HTML text input allow only numeric input.

How to make HTML text input allow only numeric input?

To make HTML text input allow only numeric input, we set the pattern attribute.

For instance, we write

<input id="numbersOnly" pattern="[0-9.]+" type="text" />

to set the pattern attribute to a regex that validates that the input values are only digits or a decimal point.

Conclusion

To make HTML text input allow only numeric input, we set the pattern attribute.

Categories
HTML

How to prevent buttons from submitting forms with HTML?

Sometimes, we want to prevent buttons from submitting forms with HTML.

In this article, we’ll look at how to prevent buttons from submitting forms with HTML.

How to prevent buttons from submitting forms with HTML?

To prevent buttons from submitting forms with HTML, we set the type attribute of the button to button.

For instance, we write

<button type="button">Button</button>

to set the type attribute to button to stop it from submitting the form that it’s in.

Conclusion

To prevent buttons from submitting forms with HTML, we set the type attribute of the button to button.

Categories
HTML

How to make a placeholder for a select box with HTML?

Sometimes, we want to make a placeholder for a select box with HTML.

In this article, we’ll look at how to make a placeholder for a select box with HTML.

How to make a placeholder for a select box with HTML?

To make a placeholder for a select box with HTML, we add a disabled option into the drop down.

For instance, we write

<label
  >Option name
  <select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
  </select>
</label>

to add a disabled option as the first option.

We make it selected by default with the selected attribute.

Conclusion

To make a placeholder for a select box with HTML, we add a disabled option into the drop down.

Categories
HTML

How to fix &times word in HTML changes to ×?

Sometimes, we want to fix &times word in HTML changes to ×.

In this article, we’ll look at how to fix &times word in HTML changes to ×.

How to fix &times word in HTML changes to ×?

To fix &times word in HTML changes to ×, we should escape the ampersand.

For instance, we write

<div class="test">&amp;times</div>

to add &amp; to render an ampersand on the page.

Conclusion

To fix &times word in HTML changes to ×, we should escape the ampersand.