読者です 読者をやめる 読者になる 読者になる

てきとうなメモ

本の感想とか技術メモとか

formの拡張仕様2つ

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

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"]
}