# HTML: Form

## Hit `ENTER` to Submit Form

Form Spec:

* If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
* if a form has 2+ input fields and no buttons or input\[type=submit] then hitting enter doesn't trigger submit
  * If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission.
* if a form has one or more input fields and one or more buttons or input\[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input\[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

That means:

* If you only have one input, then you don't need `input[type=submit]`. Hit ENTER will submit the form.
* If you have more than one blocking input, then hitting ENTER will NOT submit the form **unless** you have a `input[type=submit]`.
  * It also means on mobile, even you see search button (because your input is type search), hitting search won't do anything. The fix is to have a hidden submit button so 'search' button works.

For Angular:

* use `ng-submit` on the form instead of `button(ng-click)` to make sure ENTER works.

## Mobile

### 'Go' or 'Search' button on Soft Keyboard

iOS:

* The 'Go' button is only shown: if the `input` tag is inside a `form` tag with `action` property. Otherwise shows a return button. See: <http://stackoverflow.com/questions/22986347>
* The 'Search' button is shown when `<input type='search'>` or name of the input contains 'search'

Android:

* Shows 'Go' for text inputs
* SHows 'Next' to number inputs

### How to use keyboard 'Go' or 'Search' to submit form?

When you have submit button:

* by default the key press will submit the form

When you don't have submit button:

* if you ONLY have one input in the form, it'll work by press the 'Go'.
* if you have more than one input:
  * create a submit type button with style="visibility:hidden;position:absolute" (don't show and don't mess container layout)

    Ref:
* <http://stackoverflow.com/questions/5665203/getting-iphone-go-button-to-submit-form>

### How to hide soft keyboard manually?

Use `blur()` on active element: <https://github.com/caiogondim/hide-virtual-keyboard.js/blob/master/src/index.js>

## Library

* Address auto complete: <https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform>
* persist form value between back: <http://garlicjs.org/>