Thaimisc.com : เริ่มเรียนรู้พื้นฐานการเขียน HTML ตอนที่ 3
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : HTML It's EASY Print Article Only Print Aticle With Comment
เริ่มเรียนรู้พื้นฐานการเขียน HTML ตอนที่ 3
เขียนโดย thaimisc , 05-01-2002
ตอนที่สาม จะเป็นการเขียน Form เพื่อติดต่อไปยังส่วนของโปรแกรมต่าง ๆ อย่างง่ายนะครับ

* การใช้ form และการเขียน form เพื่อนติดต่อกับโปรแกรมอื่น หรือส่งเมลล์

  • การกำหนด ฟอร์ม และการวาง ฟอร์ม ทำได้ดังนั้น
    <form method="post หรือ get"action="จุดที่ต้องการให้โปรแกรมฟอร์มส่งไป">
    .
    .
    .
    </form>
  • Tag ต่างๆที่จำเป็นในการใช้ร่วมกับ form มัดังนี้
    <input type="text" name="textfield">
    .... type = ตัวประการว่า แทกนั้นๆรับข้อมูลประเภทไหน
    .... name= เป็นตัวกำหนดชื่อของแทกนั้นๆ หรือ ชื่อตัวแปลที่จะต้องส่ง
    <input type="radio" name="radiobutton" value="radiobutton" checked>
    .... type = ตัวประการว่า แทกนั้นๆรับข้อมูลประเภทไหน
    .... name= เป็นตัวกำหนดชื่อของแทกนั้นๆ หรือ ชื่อตัวแปลที่จะต้องส่ง
    ....value=ค่าที่ต้องการให้ส่งออกไป ส่วนใหญ่แล้วจะทำเป็นคู่ๆ เพื่อนที่ให้เป็นตัวเลือก เช่น
    ....checked=คือกำหนดว่าเป็นตัวเลือกตัวแรก ที่เราต้องการให้เค้าเลือก
    ชาย หญิง
    จากตัวอย่างข้างล่างจะเขียนได้ดังนี้
<form method="post" action="">* เรายังไม่ได้กำหนดเป้าหมาย แต่เป็นเพียงตัวอย่างเท่านั้น
<input type="radio" name="sex" value="m"> ชาย
<input type="radio" name="sex" value="f" checked > หญิง
</form>
  • <input type="checkbox" name="checkbox" value="checkbox" checked>
    .... type = ตัวประการว่า แทกนั้นๆรับข้อมูลประเภทไหน
    ....name= เป็นตัวกำหนดชื่อของแทกนั้นๆ หรือ ชื่อตัวแปลที่จะต้องส่ง
    ....value=ค่าที่ต้องการให้ส่งออกไป ส่วนใหญ่แล้วจะทำเป็นคู่ๆ เพื่อนที่ให้เป็นตัวเลือก
    ....checked=คือกำหนดว่าเป็นตัวเลือกตัวแรก ที่เราต้องการให้เค้าเลือก * สามารถกำหนดในหลายๆตัวได้
    1 2 3
<form method="post" action="">* เรายังไม่ได้กำหนดเป้าหมาย แต่เป็นเพียงตัวอย่างเท่านั้น
<input type="checkbox" name="checkbox" value="1" checked> 1
<input type="checkbox" name="checkbox2" value="2" checked > 2
<input type="checkbox" name="checkbox3" value="3"> 3
</form>
  • <select name="select"> .......... </select>
    ....name= เป็นตัวกำหนดชื่อของแทกนั้นๆ หรือ ชื่อตัวแปลที่จะต้องส่ง
<form method="post" action="">* เรายังไม่ได้กำหนดเป้าหมาย แต่เป็นเพียงตัวอย่างเท่านั้น
***คำสั่ง select นั้นจะมีส่วนย่อยเข้ามาดังนี้ เรียก Option
<option value="1" selected>ข้อความที่ 1</option> * คือ ข้อความในลิส ลำดับที่ 1
<option value="2">ข้อความที่ 2</option>
* คือ ข้อความในลิส ลำดับที่ 2
<option value="3">ข้อความที่ 3</option>
* คือ ข้อความในลิส ลำดับที่ 3
</form>
  • คำสั่งที่คุณมองไม่เห็นภายในฟอร์ม
    <input type="hidden" name="hiddenField">
    .... type = ตัวประการว่า แทกนั้นๆรับข้อมูลประเภทไหน
    ....name= เป็นตัวกำหนดชื่อของแทกนั้นๆ หรือ ชื่อตัวแปลที่จะต้องส่ง

  • ปุม ทำการส่งข้อความ หรือลบข้อความ
    <input type="submit" name="Submit" value="Submit">
    <input type="reset" name="Reset" value="Reset">
    .... type = ตัวประการว่า แทกนั้นๆรับข้อมูลประเภทไหน
    ....name= เป็นตัวกำหนดชื่อของแทกนั้นๆ หรือ ชื่อตัวแปลที่จะต้องส่ง

    ....value= สำหรับ ค่านี้จะต่างออกไปจากทุกๆคำสั่ง คือ value จากแทกนี้จะกำหนดข้อความที่แสดงออกมาทางปุ่ม

จากที่กล่าวมาทั้งหมด เราสามารถนำมารวมกันเพื่อจัดทำเป็น form ได้ดังนี้

ชื่อ
ข้อวาม

<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com