Handling Forms & User Input

What UI pattern does this implement?

const field = document.querySelector('.field');
field.querySelector('input').addEventListener('focus', () => {
  field.classList.add('active');
});
field.querySelector('input').addEventListener('blur', e => {
  if (!e.target.value) field.classList.remove('active');
});

Form validation
Floating labels
This implements the floating label pattern for form fields: 1) Label moves up when input is focused, 2) Stays up if input has value after blur, 3) Returns to original position when input is empty, 4) Improves form aesthetics and usability, 5) Maintains context while typing, 6) Popular in Material Design and modern web forms. This pattern provides better space efficiency while maintaining clear field labels.
Input masking
Error handling

Next Question (16/20)