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

To prevent users from typing in a text field without disabling the field with HTML, we add the readonly attribute.

For instance, we write

<input readonly type="text" />

to add the readonly attribute to the input to stop users from enter input values but not make it grayed out.

How to limit the maximum files chosen when using multiple file inputs with JavaScript?

To limit the maximum files chosen when using multiple file inputs with JavaScript, we check the length of e.files.

For instance, we write

<input multiple type="file" onchange="trySubmitFile(event)" />

to add a file input.

We set its onchange attribute to call trySubmitFile with the event object.

Then we write

function trySubmitFile(e) {
  const files = e.target.files;
  if (files.length > 5) {
    alert("You are only allowed to upload a maximum of 2 files at a time");
  }
  //...
}

to define the trySubmitFile function.

We check if the number of selected files is bigger than 5 with files.length > 5.

We get the select files with e.target.files.

How to add a confirmation before the closing of the tab/browser with JavaScript?

To add a confirmation before the closing of the tab/browser with JavaScript, we set the window.onbeforeunload property to a function that shows the alert.

For instance, we write

window.onbeforeunload = (e) => {
  return "Sure?";
};

to set window.onbeforeunload to a function that returns a non-empty string.

Then the browser will show an alert box before we close the tab or browser window.

How to add a drop-down menu and text field in one with HTML?

To add a drop-down menu and text field in one with HTML, we use the datalist element.

For instance, we write

<label
  >Choose a browser from this list: <input list="browsers" name="myBrowser"
/></label>
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

to add a datalist element with an id attribute that matches the list attribute value of the input to use the datalist element’s option eleemnts as the choices for the input.

How to change the default message of the required field in the popover of form-control in Bootstrap and JavaScript?

To change the default message of the required field in the popover of form-control in Bootstrap and JavaScript, we call the setCustomValidity method.

For instance, we write

<input
  class="form-control"
  type="email"
  required=""
  placeholder="username"
  oninvalid="this.setCustomValidity('Please Enter valid email')"
  oninput="setCustomValidity('')"
/>

to add an input that sets the oninvalid attribute to call setCustomValidity with the validation message we want.

And we set oninput to call setCustomValidity to empty the validation message.

How to prevent iPhone from zooming in on select in a web app with CSS?

To prevent iPhone from zooming in on select in a web app with CSS, we add a meta element and set the drop[ down font size.

For instance, we write

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

to add a meta tag that disable zooming by setting the minimum-scale and maximum-scale to 1.0.

Then we write

select {
  font-size: 50px;
}

to set the font size of the select element to 50px.