= 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 two UI types for them. * Multiple-fields UI (`ENABLE_INPUT_MULTIPLE_FIELDS_UI` flag) [[Image(multiple-fields-example.png)]] * Chooser-only UI (no `ENABLE_INPUT_MULTIPLE_FIELDS_UI` flag) In the multiple-fields UI, users can specify values quickly with keyboard or mouse input. This UI is not suitable for mobile devices with touch input. Optionally we can provide platform-specific chooser dialog UI. The Chooser-only UI is simple. We provide only platform-specific chooser dialog UI. === Chooser-only UI === 1. Enable `ENABLE_INPUT_TYPE_`''FOO'' without `ENABLE_INPUT_MULTIPLE_FIELDS_UI` 2. Implement `Locale` class (See "Number localization" section) 3. Implement `ChromeClient::openDateTimeChooser` === Multiple-fields UI === 1. Enable `ENABLE_INPUT_TYPE_`''FOO'' and `ENABLE_INPUT_MULTIPLE_FIELDS_UI` 2. Implement `Locale` class (See "Number localization" section) 2. Implement `RenderTheme::adjustInnerSpinButonStyle` and `paintInnerSpinButtonStyle` 3. Optionally, provide chooser dialog UI. 1. Implement `RenderTheme::supportsCalendarPicker` so that it returns true for supported input types. 2. Implement `ChromeClient::openDateTimeChooser` === ENABLE_CALENDAR_PICKER === WebCore has a calendar chooser implementation built with HTML. It supports date type, month type, week type, and year-month-day part of datetime-local type, and doesn't support time type and the time part of datetime-local type for now. So, the implementation is not enough for the chooser-only UI. 1. Enable `ENABLE_PAGE_POPUP` flag.[[BR]] This feature requires `V8EnabledPerContext` extended attribute. If your port uses JavaScriptCore, dont't use `WebCore/page/DOMWindowPagePopup.idl` and setup `pagePopupController` property in C++ code. 2. Implement `ChromeClient::openPagePopup` and `closePagePopup`. 3. Enable `ENABLE_CALENDAR_PICKER` flag 4. Update your build files so that it converts `WebCore/Resources/pagepopups/{pickerCommon.js,pickerCommon.css,calendarPicker.js,calendarPicker.css}` to C++ files by `WebCore/make-file-arrays.py` 5. Implement `RenderTheme::supportsCalendarPicker` so that it returns true for supported input types. 6. Implement `ChromeClient::openDateTimeChooser`. It should use ChromeClient::openPagePopup and the converted resources. See `WebKit/chromium/src/DateTimeChooserImpl.cpp`. [[Image(calendar-picker.png)]] [[BR]] Figure: ENABLE_CALENDAR_PICKER == 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`. === 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`.