HTML Input Time readOnly Property: Time Input Read-Only

HTML Input Time readOnly Property: Time Input Read-Only

The readOnly property in HTML’s <input type="time"> element specifies whether the time input field is read-only. When set to true, the user cannot modify the time value directly in the input field. However, the value can still be read or changed using JavaScript. This property is useful when you want to display a time value that the user should not change, such as in a display-only form field or when the value is controlled by a script.

Syntax

The readOnly property is a boolean attribute. Here’s how to use it:

<input type="time" id="timeInput" readOnly>

or using Javascript:

<input type="time" id="timeInput">

<script>
  const timeInput = document.getElementById("timeInput");
  timeInput.readOnly = true; // or false;
</script>

Attribute Table

Here’s a table summarizing the attributes associated with the readOnly property:

Attribute	Value	Description
`readOnly`	`readOnly` or `””`	If present, it specifies that the input field is read-only.
`readOnly` (JavaScript)	`true` or `false`	A boolean value indicating whether the input field is read-only.

Examples

Let’s explore some practical examples of how to use the readOnly property with the <input type="time"> element.

Basic Read-Only Time Input

This example demonstrates a basic read-only time input field. The user cannot change the time value directly.

<label for="timeInputReadOnly">Read-Only Time:</label>
<input
  type="time"
  id="timeInputReadOnly"
  value="10:30"
  readOnly
  style="margin-left: 10px;"
/><br /><br />

<label for="timeInputEditable">Editable Time:</label>
<input
  type="time"
  id="timeInputEditable"
  value="11:45"
  style="margin-left: 10px;"
/>

Here’s how the rendered output looks:

In this example, the first time input field (timeInputReadOnly) is set to readOnly, so the user cannot modify the time. The second input field (timeInputEditable) is editable.

Setting readOnly with JavaScript

You can dynamically set the readOnly property using JavaScript. This is useful when you want to control the read-only state based on certain conditions.

<label for="timeInputJS">Time (Click to Toggle Read-Only):</label>
<input
  type="time"
  id="timeInputJS"
  value="14:00"
  style="margin-left: 10px;"
/><br /><br />

<button id="toggleReadOnly">Toggle Read-Only</button>

<script>
  const timeInputJs = document.getElementById("timeInputJS");
  const toggleReadOnlyButton = document.getElementById("toggleReadOnly");

  toggleReadOnlyButton.addEventListener("click", function () {
    timeInputJs.readOnly = !timeInputJs.readOnly;
    if (timeInputJs.readOnly) {
      toggleReadOnlyButton.textContent = "Make Editable";
    } else {
      toggleReadOnlyButton.textContent = "Make Read-Only";
    }
  });
</script>

Here’s how the rendered output looks:

In this example, clicking the “Toggle Read-Only” button toggles the readOnly property of the time input field.

Read-Only Time with Form Submission

Even when a time input field is read-only, its value is still submitted when the form is submitted.

<form id="timeForm" onsubmit="handleSubmit(event)">
  <label for="timeInputSubmit">Read-Only Time (Submits with Form):</label>
  <input
    type="time"
    id="timeInputSubmit"
    name="timeInputSubmit"
    value="16:15"
    readOnly
    style="margin-left: 10px;"
  /><br /><br />
  <input type="submit" value="Submit Form" />
</form>

<div id="submissionResult" style="margin-top: 10px;"></div>

<script>
  function handleSubmit(event) {
    event.preventDefault();
    const form = document.getElementById("timeForm");
    const formData = new FormData(form);
    let result = "Form Data Submitted:<br>";
    for (const pair of formData.entries()) {
      result += pair[0] + ": " + pair[1] + "<br>";
    }
    document.getElementById("submissionResult").innerHTML = result;
  }
</script>

Here’s how the rendered output looks:

In this example, the time input field is read-only, but its value is still included when the form is submitted.

Tips and Notes

• Use the readOnly property to prevent users from directly modifying a time input field while still allowing the value to be submitted with a form. 💡
• The readOnly property does not prevent the value from being changed via JavaScript. ✍️
• Consider using the disabled property if you want to prevent the value from being submitted with the form. 🚫
• Always validate user inputs on the server-side, even if the input fields are read-only on the client-side. ✅

Browser Support

The <input type="time"> element and its readOnly property are supported by all modern browsers. Here is a general compatibility overview:

• Chrome: Yes
• Edge: Yes
• Firefox: Yes
• Safari: Yes
• Opera: Yes

Conclusion

The readOnly property of the HTML <input type="time"> element is a useful feature for preventing users from modifying the time value in an input field. It can be controlled dynamically with JavaScript and is supported across all modern browsers. By using this property, you can create more controlled and user-friendly forms.