フォームはどうやって属性を認識しているか？

Question

HTMLでフォームを作る時、全体を<form></form>で囲み、その中でユーザに入力して欲しい項目の入力欄を作り、submitボタンを作ります。

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

この時、ボタンを押した時に送信される項目はどうやって決まりますか？
nameが定義されていることが必要十分でしょうか？
<form>と</form>の間に書いてあれば、どんなにネストしていても認識されますか？

Answer 1

まず試しましょう。そして調べましょう。

---

form要素はform要素を入れることが文法的に出来ないので「ネスト」という状態にはなりません。div要素等他の物についてはいくらネスとしていても（ブラウザの限界が無い限り）問題ないでしょう。

あとはinput/select/textarea要素のname属性とdisabled属性とform属性を見てください。

【<form> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form

【<input>: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

【<select> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select

【<textarea> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea

Answer 2

基本はフォームタグで挟まれた領域内にあるnameとvalueを認識していますが、selectの場合は選択されたoptionがselected=trueになるのを認識しています。