Interop: Forms

[estelle]

• Review Form documentation:
  • Learn Forms
  • Web form building blocks
  • Your first form
  • How to structure a web form
  • Basic form controls #35510
  • Newer inputs #35514
  • Other form controls #35512
  • Styling web forms
  • Advanced form styling
  • UI pseudo-classes
  • Client-side form validation
  • Sending form data
• Advanced web form techniques
  • How to build custom form controls
  • Sending forms through JavaScript
  • CSS property compatibility table for form controls
  • HTML forms in legacy browsers
• Remove mentions of "when supported" on all form control pages
• Remove screen shots of the controls themselves (Retain dynamic keyboard and error msg images)
• Form submission target
• Constraint validation
• Review related CSS properties, including:
  • appearance
  • accent-color
  • resize
  • pointer-events
  • user-select
  • field-sizing
  • input-security
  • caret-color
  • caret-animation
  • caret-shape
  • caret
• Check <marquee> element status (Update page: <marquee> element mdn/content#36435)
• Sizing for <select>
• DOM reflection-forms
• replace before load
• Forms API
• Missing documentation - complete OWD Project: Missing form-related API docs #213

[estelle]

• Form control appearance:

  • <input>
  • <input type="text">
  • <input type="TEXT">
  • <input type="search">
  • <input type="tel">
  • <input type="url">
  • <input type="email">
  • <input type="password">
  • <input type="date">
  • <input type="month">
  • <input type="week">
  • <input type="time">
  • <input type="datetime-local">
  • <input type="number">
  • <input type="range">
  • <input type="color">
  • <input type="checkbox">
  • <input type="radio">
  • <input type="submit">
  • <input type="reset">
  • <input type="button">
  • <input type="unknowntype">
  • <select>
  • <select multiple="">
  • <select size="2">
  • <button>
  • <textarea>
  • <meter>
  • <progress>
  • <input type="hidden">
  • <input type="HIDDEN">
  • <input type="file">
  • <input type="image">
  • <form>
  • <fieldset>
  • <label>
  • <summary>
  • <video>
  • <video controls="">
  • <menuitem>
  • <marquee>
  • <keygen>

• Form sumbission target

  • https://bugs.chromium.org/p/chromium/issues/detail?id=1234409
  • https://bugs.webkit.org/show_bug.cgi?id=235407
  • https://bugs.chromium.org/p/chromium/issues/detail?id=1234409

• Validation

  • validate
  • validity-badInput
  • validity-customError
  • validity-patternMismatch
  • validity-rangeOverflow
  • validity-rangeUnderflow
  • validity-tooLong
  • validity-tooShort
  • validity-typeMismatch
  • validity-valid
  • validity-valueMissing
  • willValidate-datalist
  • willValidate
  • number input: dynamic-value: no-change
  • pattern: dynamic-value
  • input: willvalidate
  • radio: valueMissing

• CSS

  • appearance
  • accent-color
  • resize
  • pointer-events
  • user-select
  • field-sizing
  • input-security
  • 'caret-color'
  • 'caret-animation'
  • 'caret-shape'
  • caret

• HTML rendering

  • https://bugzilla.mozilla.org/show_bug.cgi?id=1733789
  • https://bugzilla.mozilla.org/show_bug.cgi?id=1708370
  • https://bugs.chromium.org/p/chromium/issues/detail?id=1220220
  • Toggle display
  • select sizing
  • <input> placeholder lineheight
  • <marquee>
  • textarea overflow: expect "visible" but got "auto"?

• DOM reflection-forms?

  • https://bugzilla.mozilla.org/show_bug.cgi?id=1878982
  • https://bugzilla.mozilla.org/show_bug.cgi?id=675943

• Navigating across documents / replace before load:

  • https://bugs.webkit.org/show_bug.cgi?id=227299
  • https://bugzilla.mozilla.org/show_bug.cgi?id=1718123

• https://developer.mozilla.org/en-US/docs/Web/API/Document/forms

• Learn Forms

  • Web form building blocks
  • Your first form
  • How to structure a web form
  • Basic form controls #35510
  • Newer inputs #35514
  • Other form controls #35512
  • Advanced form styling
  • UI pseudo-classes
  • Client-side form validation
  • Sending form data

• Advanced web form techniques

  • How to build custom form controls
  • Sending forms through JavaScript
  • CSS property compatibility table for form controls\

[Josh-Cena]

You may be interested in also closing the following issues:

• Subpar accessibility recommendation  mdn/content#36068
• File selector can be styled mdn/content#36090
• label accessibility advice is misleading mdn/content#33283
• How to build custom form controls: JS example is not accessible mdn/content#31250
• Create a form attribute page mdn/content#28375
• Advanced form styling should mention accent-color mdn/content#24304
• “Styling web forms”: Add an accessible version of the postcard mdn/content#16949