|
1
.Form
2. Button submit
3. Button reset
4. Text Filed
5. Textarea Filed
6. Check Box
7. Radio Button
8. List Menu
9 .Hidden Filed
1.Form
กำหนดกรอบของ Form ที่จะมีการส่งข้อมูล การแทรก
Element ของ Form อื่น ๆ ที่ต้องการส่งข้อมูลต้องกำหนดในช่วงกรอบนี้
รูปแบบ
<form
name="[form-name]" method="[post/get]"
action="[fike-name]">
Code
</form>
ตัวอย่าง
<form name="form1"
method="post" action="sample.php">
<input type="text" name="name">
<input type="text" name="email">
</form>
2.Button
submit
กำหนดส่งค่าจากส่วนประกอบต่างๆ ใน Form (Element)
ไปยัง Web Server เพื่อทำการประมวลผล
เราจะใช้งานร่วมกับ Form
รูปแบบ
<input
type="submit" value="[comment]">
ตัวอย่าง
<form
name="form1" method="post"
action="sample.asp">
<input type="text" name="name">
<input type="text" name="email">
<input type="submit"
value="submit">
</form>
เพิ่มเติมครับการสร้างปุ่ม
Submit แบบรูปภาพ
<input
type="image" name="submit"
value="submit" src="image-name">
3.Button reset
กำหนด
Clear ส่วนข้อมูลที่ได้ทำการใส่เข้าไปใน Textbox
โดยจะทำการ Clear ข้อความใดๆ
รูปแบบ
<input
type="reset" value="[comment]">
ตัวอย่าง
<form name="form1"
method="post" action="sample.php">
<input type="text" name="name">
<input type="text" name="email">
<br>
<input type="submit"
value="Submit">
<input type="reset" value="Reset">
</form>
เพิ่มเติมครับการสร้างปุ่ม
Reset แบบรูปภาพ
<input
type="image" name="reset"
value="reset" src="image-name">
4.Text
Filed
กำหนดช่องรับข้อมูลจะทำงานร่วมกับ Form โดยจะต้องแทรกใว้ในกรอบของ
Form
การอ่านค่าจาก
Element ของ Text Filed
<?
$var-name
echo"$var-name";
? >
รูปแบบ
<input
type="text" name="var-name">
เช่น
<form
name="form1" method="post"
action="sample.php">
<input type="text"
name="name">
<input type="text" name="email">
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
ตัวอย่าง
sample1.php
<html>
<head>
<form name="form1" method="post"
action="sample2.php">
ชื่อ
<input type="text"
name="name">
<br>
นามสกุล
<input type="text"
name="surname">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset"value="Reset">
</form>
</body>
</html>
Out
Put
sample2.php
<html>
<body>
ชื่อ <? echo"$name" ?>
<br>
นามสกุล <? echo "$surname"
?>
</body>
</html>
Out
Put
5.
Textarea Filed
เป็นเหมือนกับ Text Filed แต่จะมีช่องกรอกข้อมูลที่ใหญ่ขึ้น
การแทรกจะแทรกใว้ในกรอบของ Form เหมือนกับ
Text Filed
การอ่านค่าจาก Element ของ Text Filed
<?
$var-name
echo"$var-name";
? >
รูปแบบ
<textarea
name="var-name" cols="50"
rows="3"></textarea>
เมื่อ
Cols=จำนวน ความกว้างของช่องกรอกข้อมูล
Roes = จำนวนความสูงของช่องกรอกข้อมูล
ตัวอย่าง
sample1.php
<html>
<body>
<form name="form1" method="post"
action="sample2.php">
กรอกข้อมูล<br>
<textarea name="comment"
cols="50" rows="3"></textarea>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Out
Put
sample2.php
<html>
<body>
ข้อความคือ : <? echo"$comment";
?>
</body>
</html>
Out
Put
6.
Check Box
ใช้กำหนดว่ามีการเลือกหรือไม่
รูปแบบ
กำหนดได้ 2 วิธีคือ
1.ให้ค่าว่างเปล่าโดยยังไม่มีการเลือก
<input
type="checkbox" name="var-name"
value="[value]">
2.ให้ค่ามีการเลือกใว้แล้ว
<input
type="checkbox" name="var-name"
value="[value]" checked>
ทำความเข้าใจก่อนครับ
การตรวจสอบว่ามีการเลือกหร่อไม่ สามารถทำได้ง่าย
ๆ ครับ คือ กำหนดค่า on ให้กับ checkbox
การอ่านค่าจาก
Check Box
$var-name
หากมีการคลิกเลือก
จะมีค่าเป็น on และแสดงค่า value ออกมา
หากไม่มีการคลิอกเลือก จะมีค่าเป็น off และไม่แสดงค่า
value
หากไม่เข้าใจลองมาดูซักตัวอย่างหนึ่งครับ
sample1.php
<html>
<body>
<form name="form1" method="post"
action="sample2.php">
<input type="checkbox"
name="check" value="on">
<br>
<input type="submit" name="Submit"
value="Submit">
</form>
</body>
</html>
Out
Put
sample2.php
<html>
<body>
<?
if ($check=="no")
{
echo "คุณได้ทำการเลือก";
}
?>
</body>
</html>
Out
Put
หากคุณไม่ได้ทำการคลิกเลือก
Out
Put จะได้เป็นค่าว่างเปล่า
7.
Radio Button
ใช้กำหนด ให้มีการเลือกอย่างใดอย่างหนึ่ง
การอ่านค่าจาก Element
ของ Radio button
<%
$var-name
echo"$var-name";
%>
รูปแบบ
กำหนดได้ 2 แบบ
1.ให้ค่าว่างเปล่ายังไม่มีการเลือก
<input
type="radio" name="var-name"
value="[value]">
2.ให้เลือกใว้แล้ว
<input
type="radio" name="var-name"
value="[value]" checked>
ตัวอย่าง
sample1.php
<html>
<body>
<form name="form1" method="post"
action="sample2.php">
<p>เลือกอายุ</p>
<p>
<input type="radio" name="old"
value="1-5">
1-5<br>
<input type="radio"
name="old" value="6-20">
6-10<br>
<input type="radio"
name="old" value="11-15">
11-15 <br>
<input type="radio"
name="old" value="16-20">
16-20 <br>
<input type="radio"
name="old" value="21 ขึ้นไป">
21 ขึ้นไป<br>
<br>
<input type="submit" name="Submit"
value="Submit">
</p>
</form>
</body>
</html>
Out
Put
sample2.php
<html>
<body>
<?
echo "$old";
?>
</body>
</html>
Out
Put
ตัวอย่างการใช้
Radio button ด้วย
Swich Case
sample1.php
<html>
<body>
<form name="form1" method="post"
action="sample2.php">
<p>เลือกอายุ</p>
<p>
<input type="radio"
name="old" value="1">
1-5<br>
<input type="radio"
name="old" value="2">
6-10<br>
<input type="radio"
name="old" value="3">
11-15 <br>
<input type="radio"
name="old" value="4">
16-20 <br>
<input type="radio"
name="old" value="5">
21 ขึ้นไป<br>
<br>
<input type="submit" name="Submit"
value="Submit">
</p>
</form>
</body>
</html>
Out
Put
sample2.php
<html>
<body>
<?
Switch ($old)
{
case 1 : echo "1-5";
break;
case 2 : echo "6-10";
break;
case 3 : echo "11-15";
break;
case 4 : echo "16-20";
break;
case 5 : echo "21 ขึ้นไป";
break;
}
?>
</body>
</html>
Out
Put
8.List
Menu
ใช้กำหนดให้มีการเลือกอย่างใดอย่างหนึ่ง เหมือนกับ
Radio Button ที่จะดูเรียบง่าย และประหยัดเนื้อที่มากกว่า
Radio Button
การอ่านค่าจาก
Element ของ List Menu
<?
$var-name
echo "$var-name";
? >
รูปแบบ
<select
name="var-name">
<option value="value1">ข้อความ1</option>
<option value="value2">ข้อความ2</option>
<option value="value3">ข้อความ3</option>
.
.
.
.
<option value="valueสุดท้าย">ข้อความสุดท้าย</option>
</select>
ตัวอย่าง
sample1.php
<html>
<body>
<form name="form1" method="post"
action="sample2.php">
<select name="old">
<option value="1-5">1-5</option>
<option value="6-10">6-10</option>
<option value="11-15">11-15</option>
<option value="16-20">16-20</option>
<option value="21 ขึ้นไป">21
ขึ้นไป</option>
</select>
<br>
<br>
<input type="submit" name="Submit"
value="Submit">
</form>
</body>
</html>
Out Put
sample2.php
<html>
<body>
<?
echo"$old";
? >
</body>
</html>
Out
Put
ตัวอย่างการใช้
List
Menu
ด้วย Swich Case
sample1.php
<html>
<body>
<form name="form1" method="post"
action="sample2.php">
<select name="old">
<option value="1">1-5</option>
<option value="2">6-10</option>
<option value="3">11-15</option>
<option value="4">16-20</option>
<option value="5">21 ขึ้นไป</option>
</select>
<br>
<br>
<input type="submit" name="Submit"
value="Submit">
</form>
</body>
</html>
Out
Put
sample2.php
<html>
<body>
<?
Switch ($old)
{
case 1 : echo "1-5";
break;
case 2 : echo "6-10";
break;
case 3 : echo "11-15";
break;
case 4 : echo "16-20";
break;
case 5 : echo "21 ขึ้นไป";
break;
}
?>
</body>
</html>
Out
Put
9.Hidden Filed
เป็นการนำค่ากำหนดโดยการซ่อนค่าและตัวแปร
การอ่านค่าจาก
Element ของ Hidden Filed
<?
$var-name
echo "$var-name";
? >
รูปแบบ
<input
type="hidden" name="var-name"
value="[value]">
ตัวอย่าง
sample1.php
<html>
<body>
<form name="form1" method="post"
action="sample2.php">
<input type="hidden"
name="name" value="นายวีระชัย
นุกิจรัมย์">
<br>
<br>
<input type="submit" name="Submit"
value="Submit">
</form>
</body>
</html>
Out
Put
sample2.php
<html>
<body>
<?
echo"$name";
? >
</body>
</html>
Out
Put
เพิ่มเติมครับ
การนำค่า
Hidden Filed จากค่าตัวแปร ก็สามารถทำได้แบบง่าย
ๆ ครับ
<?
$name="นายวีระชัย นุกิจรัมย์"
? >
<input type="hidden" name="name"
value="<?echo"$name";?>">
ส่วน
Object อื่น ๆ ก้เหมือนกันครับ สามารถกำหนดค่าได้ที่
value ครับ
|
