折腾了半天的H5 input type=search

<form>
  <div>
    <input type="search" id="mySearch" name="q">
    <button>Search</button>
  </div>
</form>

input type=search开始每次提交都得不到值，最后在developer.mozilla.org上找到了这个问题的解决方案，原来是需要给它命名才行得通。

This renders like so:

src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input/search$samples/Basic_example?revision=1319676" class="live-sample-frame sample-code-frame" height="40" width="600" id="frame_Basic_example" frameborder="0" style="max-width: calc((100% - 40px) - 6px); margin: 0px; padding: 20px; border-width: 1px 1px 1px 5px; border-style: solid; border-color: rgb(63, 135, 166); width: calc((100% - 40px) - 6px);">

Open in CodePen Open in JSFiddle

q is the most common name given to search inputs, although it's not mandatory. When submitted, the data name/value pair sent to the server will be q=searchterm.

You must remember to set a name for your input, otherwise nothing will be submitted.