HTML Forms

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

แบบฟอร์ม HTML ใช้เพื่อรวบรวมอินพุตของผู้ใช้ อินพุตของผู้ใช้มักถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="action_page.php">
  <label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" name="fname" value="เด่น"><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="ดี"><br><br>
  <input type="submit" value="ส่ง">
</form> 

<p>หากคุณคลิกปุ่ม "ส่ง" ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ "action_page.php"</p>

</body>
</html>
ลองดูสิ ❱

HTML Forms






หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ “action_page.php”

<form> Element

Tag <form> ใช้เพื่อสร้างรูปแบบ HTML สำหรับการป้อนข้อมูลของผู้ใช้:

<form>
.
form elements
.
</form>

<form> คือคอนเทนเนอร์สำหรับองค์ประกอบอินพุตประเภทต่างๆ เช่น ช่องข้อความ ช่องทำเครื่องหมาย ปุ่มตัวเลือก ปุ่มส่ง ฯลฯ

<input> Element

<input> เป็นองค์ประกอบรูปแบบที่ใช้มากที่สุด สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ Attribute type

ตัวอย่างบางส่วน:

Typeคำอธิบาย
<input type=”text”>แสดงฟิลด์ป้อนข้อความบรรทัดเดียว
<input type=”radio”>แสดงปุ่มตัวเลือก (สำหรับเลือกหนึ่งในหลายตัวเลือก)
<input type=”checkbox”>แสดงกล่องกาเครื่องหมาย (สำหรับการเลือกหลายตัวเลือก)
<input type=”submit”>แสดงปุ่มส่ง (สำหรับส่งแบบฟอร์ม)
<input type=”button”>แสดงปุ่มที่คลิกได้

Text Fields

<input type=”text”> ใช้สำหรับฟิลด์อินพุตการป้อนข้อความบรรทัดเดียว

ตัวอย่าง

แบบฟอร์มที่มีช่องใส่ข้อความ:

<!DOCTYPE html>
<html>
<body>

<h2>Text input fields</h2>

<form>
  <label for="fname">ชื่อจริง:</label><br>
  <input type="text" id="fname" name="fname" value="เด่น"><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="ดี">
</form>

<p>สังเกตได้ว่าตัวฟอร์มเองจะมองไม่เห็น เห็นเฉพาะช่องกรอกข้อความในฟอร์ม</p>

<p>ค่าเริ่มต้นของความกว้างของช่องกรอกข้อความคือ 20 ตัวอักษร</p>

</body>
</html>
ลองดูสิ ❱

Text input fields





สังเกตได้ว่าตัวฟอร์มเองจะมองไม่เห็น เห็นเฉพาะช่องกรอกข้อความในฟอร์ม


ค่าเริ่มต้นของความกว้างของช่องกรอกข้อความคือ 20 ตัวอักษร

<label> Element

<label> เป็นแท็กที่ใช้กำหนดป้ายกำกับสำหรับฟอร์มจำนวนมาก มีประโยชน์สำหรับผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านออกเสียงฉลากเมื่อผู้ใช้โฟกัสไปที่องค์ประกอบอินพุต

<label> ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกพื้นที่ขนาดเล็กมาก (เช่น ปุ่มตัวเลือก/ช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายในองค์ประกอบ องค์ประกอบดังกล่าวจะสลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย

Attribute for ของ Tag <label> ควรจะเท่ากับ Attribute id ขององค์ประกอบ <input> เพื่อผูกเข้าด้วยกัน

Radio Buttons (ปุ่มตัวเลือก)

ปุ่มตัวเลือกใช้สำหรับให้ผู้ใช้เลือกหนึ่งในจำนวนตัวเลือกที่จำกัดด้วยรูปแบบ <input type=”radio”>

ตัวอย่าง

แบบฟอร์มที่มีปุ่มตัวเลือก:

<!DOCTYPE html>
<html>
<body>

<h2>ปุ่มตัวเลือก</h2>

<p>เลือกภาษาเว็บที่คุณชื่นชอบ</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form> 

</body>
</html>
ลองดูสิ ❱

ปุ่มตัวเลือก


เลือกภาษาเว็บที่คุณชื่นชอบ


   
   
   

Checkboxes (ช่องทำเครื่องหมาย)

ช่องทำเครื่องหมาย ช่วยให้ผู้ใช้เลือกตัวเลือก โดยการคลิกที่กล่องทำเครื่องหมาย <input type=”checkbox”>

ตัวอย่าง

แบบฟอร์มที่มีช่องทำเครื่องหมาย:

<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>ใช้ <strong>input type="checkbox"</strong> ในการกำหนด checkbox</p>

<form action="action_page.php">
  <input type="checkbox" id="eat" name="eat" value="eat">
  <label for="eat">ฉันชอบกิน</label><br>
  <input type="checkbox" id="travel" name="travel" value="travel">
  <label for="vehicle2">ฉันชอบเที่ยว</label><br>
  <input type="checkbox" id="sleep" name="sleep" value="sleep">
  <label for="sleep">ฉันชอบนอน</label><br><br>
  <input type="submit" value="ส่ง">
</form> 

</body>
</html>
ลองดูสิ ❱

Checkboxes


ใช้ input type=”checkbox” ในการกำหนด checkbox:






ปุ่มส่ง

กำหนด <input type=”submit”> ปุ่มสำหรับการส่งข้อมูลแบบฟอร์มไปยังตัวจัดการแบบฟอร์ม

โดยทั่วไปตัวจัดการฟอร์มคือไฟล์บนเซิร์ฟเวอร์ที่มีสคริปต์สำหรับประมวลผลข้อมูลอินพุต

ตัวจัดการแบบฟอร์มระบุไว้ใน Attribute action ของแบบฟอร์ม

ตัวอย่าง

แบบฟอร์มที่มีปุ่มส่ง:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>
<br>
<form action="action_page.php">
  <label for="fname">ชื่อจริง:</label><br>
  <input type="text" id="fname" name="fname" value="เด่น"><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="ดี"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>หากคุณคลิกปุ่ม "ส่ง" ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ"action_page.php".</p>

</body>
</html>
ลองดูสิ ❱

HTML Forms








หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ”/action_page.php”.

Name Attribute สำหรับ <input>

สังเกตว่าช่องป้อนข้อมูลแต่ละช่องต้องมี Attribute name ที่จะส่ง

ถ้า Attribute name ถูกละไว้ ค่าของฟิลด์อินพุตก็จะไม่ถูกส่งเลย

ตัวอย่าง

ตัวอย่างนี้จะไม่ส่งค่าของฟิลด์อินพุต “ชื่อ”:

<!DOCTYPE html>
<html>
<body>

<h2>The name Attribute</h2>

<form action="action_page.php">
  <label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" value="เด่น"><br><br>
  <input type="submit" value="ส่ง">
</form> 

<p>หากคุณคลิกปุ่ม "ส่ง" ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ "action_page.php"</p>

<p>สังเกตว่าจะไม่ส่งค่าของฟิลด์ "ชื่อ" เนื่องจากองค์ประกอบอินพุตไม่มี Attribute name</p>

</body>
</html>
ลองดูสิ ❱

The name Attribute






หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ “action_page.php”

สังเกตว่าจะไม่ส่งค่าของฟิลด์ “ชื่อ” เนื่องจากองค์ประกอบอินพุตไม่มี Attribute name

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯