liguofeng29’s blog

個人勉強用ブログだっす。

HTML5のform関連 - 新規属性

  1. form属性 : form要素外のコンポーネントもform属性を指定して、リクエストパラメータを生成する

  2. formaction属性 : submit毎にactionを指定する

  3. formxxx属性 : submit毎にenctype、POST/GET、formtargetを指定する

  4. autofocus属性 : ロード後にフォーカスを取得する

  5. placeholder属性 : 入力情報を表示する

  6. list属性 : 入力かつリストから選択可能

  7. autocomplete属性 : listを表示するかしないか

サンプルコード

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> HTML5新規from関連属性 </title>
</head>
<body>
<form id="addForm" action="http://google.co.jp">
    placeholder属性<input type="text" name="name" placeholder="名前入力"/><br>
    list属性<input type="text" name="name" list="books"/><br/>
    <input type="submit" value="通常submit"/><br>
    <input type="submit" value="formaction属性(yahoo.co.jp)" formaction="http://yahoo.co.jp"/><br>
    <input type="submit" value="formaction属性(javait.hatenablog.com)" formaction="http://javait.hatenablog.com"/><br>
    <input type="submit" value="formmethod属性(GETメソッド)" formmethod="get"/><br>
    <input type="submit" value="formmethod属性(POSTメソッド)" formmethod="post"/><br>
</form>
form属性&autofocus属性:<textarea name="desc" form="addForm" autofocus></textarea>

<datalist id="books">
    <option value="java">java</option>
    <option value="ee">ee</option>
    <option value="android">android</option>
</datalist>
</body>
</html>

f:id:liguofeng29:20160119223835g:plain