Input

<label for="name">Name</label>
<input
  type="text"
  id="name"
  name="name"
  class="w-input"
  data-name="Name"
  maxlength="256"
  placeholder=""
/>

Programming support

Pseudo-required inputs

In some cases we may need a form element to appear readonly/disabled, but to still perform standard form validations. Currently that does not happen if an element is readonly or disabled ( Chrome ).

e.g. Input Element 

    if(tourAid) { 

      const tourDateElement = document.getElementById('tour-date') as HTMLInputElement;
      if (tourDateElement) {

        // Prevent user editing by blurring on focus
        tourDateElement.onfocus = () => tourDateElement.blur();

        // Also make it non-clickable via CSS
        tourDateElement.style.pointerEvents = 'none';

          // Optional: add styling to indicate it's non-editable
        tourDateElement.style.backgroundColor = '#f5f5f5';

//        tourDateElement.readOnly = true;
      }

PreviousLabelNextFile Upload 🟢

Last updated