formの拡張仕様２つ

W3Cでformの拡張仕様が２つ出ていた。ちょっと気になる仕様

W3C HTML Form HTTP Extensions

こっちはHTMLのformで

• GET/POSTだけでなく、PUT/DELETE/PATCHなどのリクエストを送信できるようにする
• inputの値をどこに入れるかをpayload属性で指定できるようにする
  • <input payload='_action'>にするとURLに
  • <input payload='_header'>にするとヘッダ
  • <input payload='_body'>にするとリクエストボディに
• inputのname属性を使ってHTTP認証できるようにする
  • <input name='_username_'>と<input name='_password_'>で認証
  • <input type='hidden' name='_logout_'>でログアウトする

W3C HTML JSON form submission

こっちはJSONを送信できるようにする仕様。例示があってわかりやすい。

<form enctyp='application/json'>でJSONを送信する。

EXAMPLE 1: Basic Keys

<form enctype='application/json'>
  <input name='name' value='Bender'>
  <select name='hind'>
    <option selected>Bitable</option>
    <option>Kickable</option>
  </select>
  <input type='checkbox' name='shiny' checked>
</form>

// produces
{
  "name":   "Bender"
, "hind":   "Bitable"
, "shiny":  true
}

こんな感じでJSONの奥の方にある属性も指定できる

EXAMPLE 3: Deeper Structure
<form enctype='application/json'>
  <input name='pet[species]' value='Dahut'>
  <input name='pet[name]' value='Hypatia'>
  <input name='kids[1]' value='Thelma'>
  <input name='kids[0]' value='Ashley'>
</form>

// produces
{
    "pet":  {
        "species":  "Dahut"
    ,   "name":     "Hypatia"
    }
,   "kids":   ["Ashley", "Thelma"]
}