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

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

<form>
.
form elements
.
</form>

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

<input> Element

<input>เป็นองค์ประกอบรูปแบบที่ใช้มากที่สุด สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ 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>ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกพื้นที่ขนาดเล็กมาก (เช่น ปุ่มตัวเลือก/ช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายในองค์ประกอบ องค์ประกอบดังกล่าวจะสลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย

แอตทริบิวต์ for ของแท็ก <label> ควรจะเท่ากับ 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="slepp">
  <label for="sleep"> ฉันชอบนอน</label><br><br>
  <input type="submit" value="ส่ง">
</form> 

</body>
</html>

Checkboxes


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






ปุ่มส่ง

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

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

ตัวจัดการแบบฟอร์มระบุไว้ใน 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”.

ชื่อแอตทริบิวต์สำหรับ <input>

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

ถ้า 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>สังเกตว่าจะไม่ส่งค่าของฟิลด์ "ชื่อ" เนื่องจากองค์ประกอบอินพุตไม่มีแอตทริบิวต์ชื่อ</p>

</body>
</html>

The name Attribute






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

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

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