ฟอร์ม (Form)

wave

ฟอร์ม (Form)

มานพ กองอุ่น 10 เม.ย. 2016, 12:38:47 17,602

ฟอร์ม (Form) เป็นรูปแบบของการกรอกข้อมูลเพื่อส่งข้อมูลเข้าไปประมวลผลในฝั่ง Server โดยอาศัยภาษาที่ทำงานในฝั่ง Server เป็นตัวประมวลผลจากฟอร์ม ก่อนอื่นมาทำความรู้จักกับ Tag ของฟอร์มกันก่อนครับ

<form id= “Id” name= “Name” method= “Method” action= “Action”>
.....
</form>

 

Id คือ Identify ของฟอร์ม
Name คือ ชื่อของฟอร์ม
Method คือ วิธีการส่งข้อมูล มี 2 แบบ คือ post กับ get
Action คือ ไฟล์ที่รับข้อมูลจากฟอร์มเพื่อไปประมวลผลที่ฝั่ง Server เช่น testProcess.php

 
   โดยทั่วไปแล้วฟอร์มจะมีอ็อบเจ็คต่างๆ สำหรับรับข้อมูล ซึ่งจะแตกต่างกันไปตามประเภทของข้อมูล เช่น ข้อมูลที่เป็นข้อความยาวๆ ข้อมูลที่เป็นข้อความสั้น เป็นปุ่มกด เป็นต้น ดังนั้นการเรียนรู้อ็อบเจ็คต่างๆ จึงมีความสำคัญก่อนการออกแบบฟอร์มสำหรับกรอกข้อมูลโดยมี 
อ็อบเจ็คพร้อมกับแอททริบิวพื้นฐานที่สำคัญ ดังนี้

กล่องข้อความ (Text Field)

<input type= “text” name= “Name” id= “Id” size= “Size”>
Name คือ ชื่อของ Text Field
Id คือ Identify ของ Text Field
Size คือ ขนาด ให้ระบุเป็นตัวเลข เป็นความยาวของ Text Field


ตัวอย่าง ex21.html

<html>
<head>
    <title>Form</title>
</head>
<body>
    <form id= “test” name= “testForm” method= “post” action= “testProcess.php”>
    <input type= “text” name= “fullname” id= “fullname” size= “20”>
    </form>
</body>
</html>

 

ผลลัพธ์

******************************************************************************************

 

ตัวรับข้อมูลแบบซ่อน (Hidden Field)

<input type= “hidden” name= “Name” id= “Id”>

 

Name คือ ชื่อของ Hidden Field
Id คือ Identify ของ Hidden Field


ตัวอย่าง ex22.html

<html>
<head>
    <title>Form</title>
</head>
<body>
<form id= “test” name= “testForm” method= “post” action= “testProcess.php”>
<input type= “hidden” name= “memberId” id= “memberId” size= “20” value= “5”>
</form>
</body>
</html>

ผลลัพธ์ จะเห็นได้ว่า input แบบ hidden จะไม่แสดงให้เราเห็นใน Browser

********************************************************************************************

 

กล่องรับข้อมูลจำนวนมาก (Text Area)

<input type= “textarea” name= “Name” id= “Id” cols= “Cols” rows= “Rows”></textarea>
Name คือ ชื่อของ Text Area
Id คือ Identify ของ Text Area
Cols คือ จำนวนตัวอักษรในแนวนอน หรือขนาดความกว้างของ Text Area นั่นเอง
Rows คือ จำนวนแถวของอักษร หรือขนาดความสูงของ Text Area


ตัวอย่าง ex23.html

<html>
<head>
<title>Form</title>
</head>
<body>
<form id= “test” name= “testForm” method= “post” action= “testProcess.php”>
<textarea name= “detail” id= “detail” cols= “45” rows= “5”></textarea>
</form>
</body>
</html>


ผลลัพธ์

ตัวเลือกแบบเลือกได้หลายข้อ (Checkbox)

<input type= “checkbox” name= “Name” id= “Id” checked= “checked”>
 

 

Name คือ ชื่อของ Checkbox
Id คือ Identify ของ Checkbox
checked คือ กำหนดให้มีการเลือกไว้ก่อน


ตัวอย่าง ex24.html

<html>
<head>
<title>Form</title>
</head>
<body>
<form id= “test” name= “testForm” method= “post” action= “testProcess.php”>
ชอบดนตรี  <input name= “music" type= “checkbox" id= “music" checked= “checked" /><br>
ชอบกีฬา <input name= “sport" type= “checkbox" id= “sport" /></form>
</body>
</html>

ผลลัพธ์

 

************************************************************************************

 

ตัวเลือกแบบเลือกได้ข้อเดียวในแต่ละกลุ่ม (Radio Button)

<input type= “radio” name= “Name” id= “Id” checked= “checked”>
Name คือ ชื่อของ Radio Button
Id คือ Identify ของ Radio Button
checked คือ กำหนดให้มีการเลือกไว้ก่อน


ตัวอย่าง ex25.html

<html>
<head>
<title>Form</title>
</head>
<body>
<form id= “test” name= “testForm” method= “post” action= “testProcess.php”>
ชอบดนตรี  <input name= “gender" type= “radio" id= “gender" checked= “checked" /><br>
ชอบกีฬา <input name= “gender" type= “radio" id= “gender" />
</form>
</body>
</html>

ผลลัพธ์

 

******************************************************************************

รายการ (List/Menu)

<select name= “Name” id= “Id”>
<option value= “Value1" selected>Label1</option>
     	<option value= “Value2">Label2</option>
</select>
Name คือ ชื่อของ List/Menu
Id คือ Identify ของ List/Menu
Value1 คือ ค่าที่ต้องการเมื่อถูกส่งข้อมูลไป
Label1 คือ ค่าที่ต้องการให้เห็นใน List

 

ตัวอย่าง ex26.html

<html>
<head>
<title>Form</title>
</head>
<body>
<form id= “test" name= “testForm" method= “post" action= “testProcess.php">
<select name= “mylike">
	<option value= “sport">ชอบกีฬา</option>
	<option value= “sport">ชอบดนตรี</option>
</select>
</form>
</body>
</html>

ผลลัพธ์

******************************************************************************

 

ปุ่ม (Button)

<input type= “Type” name= “Name” id= “Id”>

 

Name คือ ชื่อของ Button
Id คือ Identify ของ Button
Type คือ ประเภทของ Button โดยกำหนดดังนี้ button/submit (แบบส่งข้อมูล) /reset (แบบลบข้อมูล)
 


ตัวอย่าง ex27.html

<html>
<head>
<title>Form</title>
</head>
<body>
<form id= “test” name= “testForm” method= “post” action= “testProcess.php”>
<input name= “button0" type= “button" id= “ button0" value= “Button”/><br>
<input name= “button1" type= “submit" id= “ button1" value= “Submit”/><br>
<input name= “ button2" type= “reset" id= “ button2" value= “Reset”/>
</form>
</body>
</html>

ผลลัพธ์

**************************************************************************

ตัวอย่าง ex28.html

<html>
<head>
<title>Form</title>
</head>
<body>
<h2>กรุณากรอกข้อมูลให้ครบถ้วน</h2>
<form id= “form1" name= “form1" method= “post" action= “testProcess.php">
  <label>ชื่อ-นามสกุล
  <input type= “text" name= “fullname" id= “fullname" />
  </label>
  <p>
    <label>
    <input type= “radio" name= “gender" id= “radio" value= “ชาย" />
    ชาย</label>
    <br />
    <label>
    <input type= “radio" name= “gender" id= “radio2" value= “หญิง" />
    หญิง</label>
  </p>
  <p>
    <label>
    <input name= “sport" type= “checkbox" id= “sport" value= “ชอบเล่นกีฬา" />
    <i>ชอบเล่นกีฬา</i></label>
    <br />
    <label>
    <input name= “music" type= “checkbox" id= “music" value= “ชอบเล่นดนตรี" />
    ชอบเล่นดนตรี</label>
  </p>
  <p>
    <label>รายละเอียด
    <textarea name= “detail" id= “detail" cols= “45" rows= “5"></textarea>
    </label>
  </p>
  <p>
    <input type= “submit" name= “button" id= “button" value= “ส่งข้อมูล" />
    <input type= “reset" name= “button2" id= “button2" value= “ยกเลิก" />
  </p>
</form>

</body>
</html>


ผลลัพธ์


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com