以前にEFO開発をやっていた時から気がついていたんですが、最近とあるシステムを構築している時に、Javascriptの入力フォームname値問題にブチ当たったので、知らない人の為に何がヤバいのか書いておきます。
HTMLのformタグとその中に配置するinput要素で、ホームページのお問い合わせなどの情報を送信する際に、Javascriptを使う時などに、仕様を知っておかないと起こり得るトラブルです。
入力フォームの値アクセス手法
Javascriptで入力フォームのそれぞれの要素(input、select、textarea、など)の値を取得するには、次の様にコードを書けば簡単にアクセスできます。
sample-1.html
<form name='form1'>
<input type='text' name='yourname' value='hoge-taro' />
</form>
<script>
console.log(document.forms.form1.yourname.value)
</script>
> hoge-taro
formタグ、要素タグのそれぞれに、name属性値がセットされている場合は、このように簡単に値にアクセスすることができます。
document.form.%formタグの名前.%要素の名前.value
では、name属性値が書かれていない場合はどのように値にアクセスをするのかというと、次のようにいくつかの方法があります。
sample-2.html
<form>
<input type='text' name='yourname' value='huga-taro' />
</form>
<script>
console.log(document.forms[0].yourname.value)
</script>
> huga-taro
document.form.%formタグの番号（ページ内の順番）.%要素の名前.value
sample-3.html
<form>
<input type='text' class='yourname' value='hage-taro' />
</form>
<script>
console.log(document.forms[0][0].value)
console.log(document.querySelector(`.yourname`).value)
</script>
> hage-taro
> hage-taro
document.form.%formタグの番号（ページ内の順番）.%要素の番号（formタグ内の要素の順番）.value
そもそも、submitした後で、サーバーにデータを受け渡すために、inputタグのname値は必要なので、sample-3のパターンはあまり存在しないと思います。
また、ダイレクトにinputタグを要素取得してvalue値を取得する方法もできますが、これもinput要素にname値が無いのはNGパターンです。
name="name"のヤバさ
formタグのname属性値は、上記サンプルでは、"form1"となっていますが、この値になっているwebサイトは結構たくさんある事を知ってますか？
そうした事を踏まえて、formタグ内のそれぞれの要素のname値は、次のような規則が存在します。
input要素のname値に"name"を使ってはいけない。
input要素のname値に"name"を使うとどうなるか？
上記sample-1と同じ方式で要素のvalue値にアクセスしようとするとちゃんとvalue値にはアクセスできますがこのままの状態だと、formタグのname属性にアクセスすることができなくなります。
sample-4.html
<form name='form1'>
<input type='text' name='name' value='hage-taro' />
</form>
<script>
console.log(document.forms.form1.name)
console.log(document.querySelector(`form[name='form1']`).getAttribute('name'))
</script>
> <input>
ん？name属性値にアクセスしようとすると、内包するinputタグのname="name"の要素が選択されてしまいます。
でも、次のようにすると、formタグのname属性にアクセスすることはできます。
console.log(document.querySelector(`form[name='form1']`).getAttribute('name'))
> form1
こうした自体を防ぐために、name値の値で使ってはいけないものを理解しておく必要があります。
要するに、
属性で使われるものは、name値の値として使ってはいけないという事です。
あとがき
Javascriptで入力フォームを操作するのは、動的ページ対応をしたい場合に行いますが、今回紹介したような特性を知っておかないと、とんでもない結果になってしまう可能性があります。
ホームページにおける入力フォームというのは、個人情報やいろいろな機密情報の送信を行う重要な役割で使われるため、
この領域が誤作動をすると、
社会的な事件に発展してしまう可能性もあるので、エンジニアとして、十分に理解して構築をすることをオススメします。
