フォーム基本

g$.form:フォームの値の取得(オブジェクトで返す)

-> HTMLFormElement.elements
-> form event javascript

forms.elementsを取得


//forms.elementsではsubmitボタンも取得される。
const $form1 = document.getElementById("frmtest1");
  document.getElementById("getfrmtest1").addEventListener('click',function(){
  console.log($form1.elements);
  Array.prototype.slice.call($form1.elements).forEach(function (el) {
    console.log(el.type);
  });
},false);

forms.elementsの値をオブジェクトで取得


document.getElementById("getfrmtest2").addEventListener('click',function(){
  let $vals = g$.forｍ($form1);
  console.log($vals);
},false);

input のnameは、送信されるときのクエリ名

labelの注意点

-> ボタンやリンクタグは含めない！
-> h1などの見出しタグも含めない！
-> labelを入子にしない！

labelの使い方

「LABEL」とは、フォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのタグ。関連付けを行うことにより、ブラウザでラベル（もしくはラベルのアクセスキー）をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になる。

１）<label>ラベルと部品を囲んで紐付け</label>

※囲えば、forは不要


名前：

２）<label for="id指定" >　<input id="hoge">、forとIDで紐付け

forに入れるのはID（nameではない）

2)-1 テキスト系では、label input でlabelは、inputの前

  
    名前:

名前:

2)-2 選択系では、input　label でlabelは、inputの後ろが一般的

性別：男女

フォーカス


$select.onfocus = function() {
  console.log('active');
  $select.classList.add('active');
}
$select.onblur = function() {
  console.log('out');
 $select.classList.remove('active');
}

//イベント削除 $select.onblur = null ;

value：日本語可

valueは、日本語でもOK！ただし送信元－処理先の文字コードに注意。

キーボード操作

項目移動はタブキー。戻るときは、shift＋タブキー
選択項目の決定は、スペースキー。
ラジオボタン決定後の内移動は、矢印キー。

タブキー移動の順番は指定できる。
tabindex=順位
除外したいものは、マイナスをつける
tabindex=-1