= How to enable Form features = == Interactive form validation == 1. Implement `WebCore/page/ValidationMessageClient.h` for your port 2. Set it to `PageClients::validationMessageClient` 3. Instantiate a `Page` object 4. `page->settings()->setInteractiveFormValidationEnabled(true)` Doing step 3 and 4 without step 1 and 2 enables a platform-neutral form validation UI. But it has [https://bugs.webkit.org/show_bug.cgi?id=95527 some unresolvable bugs]. You should provide your `ValidationMessageClient`. == input[type=number] == If you have never done anything for input[type=number], it lacks the following features: * Spin button UI * Number localization === Spin button UI === This is optional. Opera has similar UI, but IE10 has no spin button. If you want the spin button UI, implement `RenderTheme::adjustInnerSpinButtonStyle` and `paintInnerSpinButtonStyle`. Test: fast/forms/number/number-{appearance,spinbutton}*.html === Number localization === This is optional. IE10 localizes numbers, but Opera doesn't. This feature requires `Locale` class implementation. If your port is using `WebCore/platform/text/LocaleNone.cpp`, this feature is disabled. Use `WebCore/platform/text/{LocaleICU.cpp,mac/LocaleMac.mm,win/LocaleWin.cpp}`, or implement your own Locale class. Test: fast/forms/number/number-l10n-input.html == input[type=color] == Enable `ENABLE_INPUT_TYPE_COLOR` flag, and implement `ChromeClient::createColorChooser`. == Date, datetime-local, month, time, week input types == WebCore provides a button UI to invoke platform-specific chooser for them. [[Image(chooser-only.png)]] 1. Enable `ENABLE_INPUT_TYPE_`''FOO'' 2. Implement `Locale` class (See "Number localization" section) 3. Implement `ChromeClient::openDateTimeChooser` == input[type=datetime] == Do not enable it. You can not make an appropriate UI with the current WebCore code. == Datalist element == This depends on input types. === Text field types === 1. Enable `ENABLE_DATALIST_ELEMENT` 2. Implement `RenderTheme::supportsDataListUI` so that it returns true for supported types. 3. In WebKit layer, hook keyboard input, focus, or touch events for a target text field, and show UI to choose values of `HTMLInputElement::dataList`. Note: Discoverability of the datalist suggestions is bad. We should improve it. === Range type === 1. Enable `ENABLE_DATALIST_ELEMENT` 2. Implement `RenderTheme::supportsDataListUI` so that it returns true for range type. 3. Implement/override `RenderTheme::slideTickSnappingThreshold`, `sliderTickSize`, `sliderTickOffsetFromTrackCenter`. === Color type === 1. Enable `ENABLE_DATALIST_ELEMENT` 2. Implement `RenderTheme::supportsDataListUI` so that it returns true for color type. 3. Your `ColorChooser` implementation should respect `ColorChooserClient::shouldShowSuggestions` and `suggestions`. === Date, datetime-local, month, time, week types === 1. Enable `ENABLE_DATALIST_ELEMENT` 2. Implement `RenderTheme::supportsDataListUI` so that it returns true for supported types. 3. Implement `ChromeClient::openDateTimeChooser` so that it handles `DateTimeChooserParameters::suggestionValues`.