วิธีตั้งชื่อองค์ประกอบ (Element Name) ใน HTML

ใช้แอตทริบิวต์ name เพื่อตั้งชื่อองค์ประกอบ ใช้ได้กับองค์ประกอบ HTML ต่อไปนี้: <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ name:

<!DOCTYPE html>
<html>
  <body>
    Subject: <input type="text" name="sub" spellcheck="true">
    <p>Add an incorrect spelling for a word above and see what happens.</p>
    <p contenteditable="true" spellcheck="true">This is an editable conttent, with a spelling mistake. Click to edit.</p>
  </body>
</html>

บทบาทของ name ในแต่ละองค์ประกอบ

ตัวอย่าง: หลายปุ่ม Submit

<form action="/process" method="post">
  <input type="text" name="username" placeholder="Username">
  <button type="submit" name="action" value="save">Save</button>
  <button type="submit" name="action" value="publish">Publish</button>
  <button type="submit" name="action" value="preview">Preview</button>
</form>

<!-- Server receives: action=save หรือ action=publish หรือ action=preview -->

Radio Buttons - name เดียวกัน = กลุ่มเดียว

<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
</fieldset>

ความแตกต่าง: name vs id