HTML Input Object สร้างฟอร์ม เพื่อส่งค่าให้ PHP Input object แต่ละประเภท
Moderators: mindphp, ผู้ดูแลกระดาน
- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
HTML Input Object สร้างฟอร์ม เพื่อส่งค่าให้ PHP Input object แต่ละประเภท
ในการใช้งาน PHP การส่งค่าด้วย Input ต่างๆนั้นสำคัญอย่างยิ่ง ผมจะมาแนะนำ การใช้ Input แต่ละแบบให้ได้ทราบกันครับผม
สิ่งสำคัญที่ควรมีใน input คือ
1.type ที่ใช้บ่อยๆมีทั้งหมด 11 แบบครับ
- textเป็น ช่องให้กรอกข้อความธรรมดา
- checkbox เป็นช่องสี่เหลี่ยมๆ เอาไว้ติ๊กใส่ เช่น คุณรู้จักภาษาอะไรบ้าง PHP JAVA C# VB ถ้าคุณรู้จักทั้งหมด คุณก็ติ๊กถูกในช่องสี่เหลี่ยมหน้าชื่อได้ทั้ง 4 ภาษาเลย
- radio เป็นช่องกลมๆ เอาไวิต๊กใส่เหมือนกัน แต่ส่วนมากจะใช้เลือกข้อใดข้อหนึ่งเท่านั้น เช่น คุณเป็นเพศอะไร ชาย หญิง ซึ่งตามความเป็นจริงคุณควรจะมีเพศเดียวเท่านั้น
- select เป็น list รายการให้เราเลือก โดยมีปุ่มให้เราคลิ๊ก เมื่อคลิ๊กแล้วจะมีรายการมาหลายๆรายการ ให้เราเลือก ว่าจะใช้ข้อมูลไหน เช่น กรุณาเลือกจังหวัด กรุงเทพฯ,อยุทธยา,อ่างทอง,สมุทรปราการ เป็นต้น
- multiple เป็น select อีกแบบหนึ่งแต่สามารถเลือกได้หลายรายการ
- submit เป็นปุ่ม Button เอาไว้ส่งค่าที่เรากรอกทั้งหมด ไปที่ Page ใด Page หนึ่ง
- image เป็นเหมือนปุ่ม submit เลยแต่จะแตกต่างตรงที่ สามารถกำหนดเป็นรูปภาพได้ ว่าจะใช้ภาพไหนแทนปุ่ม submit
- hidden เป็นการสร้าง ตัวเอาไว้มารับค่า เพื่อส่งไปอีก From หนึ่ง โดยที่ผู้ใช้จะมองไม่เห็นว่า มันมีอยู่
- file เป็นการสร้างตัว upload ไฟล์ต่างๆเข้าสู่ Server ของเรา
- reset เป็นการล้างข้อมูลที่เราเคยกรอกไว้ใน From นั้นๆให้หายไป
- password เป็นการสร้างช่องกรอกพาสเวิด ซึ่งจะมองไม่เห็นตัวอักษรที่เรากรอกไป
2.name ในการเขียน PHP คุณควรจะตั้งชื่อ name แต่ละ Input เอาไว้ เพื่อเวลาการส่งค่าไปหน้า From อื่นๆ จะสามารถ อ้างอิงถึง Input ต่างๆที่เรากรอกไว้ได้
3.id ก็คล้ายๆกับ name แต่จะมีความสำคัญกับการอ้างอิงตำแหน่งต่างๆ ใน TAG นั้นๆ มีประโยชน์ในการเอาไปใช้ร่วมกับ Java Script และ CSS
4.value เป็นค่าต่างๆที่เราจะกำหนดขึ้นมาเองก็ได้เป็นค่าเริ่มต้น หรือ เป็นค่าที่รอผู้ใช้มากรอกใส่เข้าไปก็ได้
เมื่ออ่านจบ กระทู้ สองหน้านี้แล้ว แนะนำให้ อ่านต่อ
https://www.mindphp.com/forums/viewtopic ... 29&t=11771
บทเรียน HTML 5 : https://www.mindphp.com/%E0%B8%9A%E0%B8% ... html5.html
สิ่งสำคัญที่ควรมีใน input คือ
1.type ที่ใช้บ่อยๆมีทั้งหมด 11 แบบครับ
- textเป็น ช่องให้กรอกข้อความธรรมดา
- checkbox เป็นช่องสี่เหลี่ยมๆ เอาไว้ติ๊กใส่ เช่น คุณรู้จักภาษาอะไรบ้าง PHP JAVA C# VB ถ้าคุณรู้จักทั้งหมด คุณก็ติ๊กถูกในช่องสี่เหลี่ยมหน้าชื่อได้ทั้ง 4 ภาษาเลย
- radio เป็นช่องกลมๆ เอาไวิต๊กใส่เหมือนกัน แต่ส่วนมากจะใช้เลือกข้อใดข้อหนึ่งเท่านั้น เช่น คุณเป็นเพศอะไร ชาย หญิง ซึ่งตามความเป็นจริงคุณควรจะมีเพศเดียวเท่านั้น
- select เป็น list รายการให้เราเลือก โดยมีปุ่มให้เราคลิ๊ก เมื่อคลิ๊กแล้วจะมีรายการมาหลายๆรายการ ให้เราเลือก ว่าจะใช้ข้อมูลไหน เช่น กรุณาเลือกจังหวัด กรุงเทพฯ,อยุทธยา,อ่างทอง,สมุทรปราการ เป็นต้น
- multiple เป็น select อีกแบบหนึ่งแต่สามารถเลือกได้หลายรายการ
- submit เป็นปุ่ม Button เอาไว้ส่งค่าที่เรากรอกทั้งหมด ไปที่ Page ใด Page หนึ่ง
- image เป็นเหมือนปุ่ม submit เลยแต่จะแตกต่างตรงที่ สามารถกำหนดเป็นรูปภาพได้ ว่าจะใช้ภาพไหนแทนปุ่ม submit
- hidden เป็นการสร้าง ตัวเอาไว้มารับค่า เพื่อส่งไปอีก From หนึ่ง โดยที่ผู้ใช้จะมองไม่เห็นว่า มันมีอยู่
- file เป็นการสร้างตัว upload ไฟล์ต่างๆเข้าสู่ Server ของเรา
- reset เป็นการล้างข้อมูลที่เราเคยกรอกไว้ใน From นั้นๆให้หายไป
- password เป็นการสร้างช่องกรอกพาสเวิด ซึ่งจะมองไม่เห็นตัวอักษรที่เรากรอกไป
2.name ในการเขียน PHP คุณควรจะตั้งชื่อ name แต่ละ Input เอาไว้ เพื่อเวลาการส่งค่าไปหน้า From อื่นๆ จะสามารถ อ้างอิงถึง Input ต่างๆที่เรากรอกไว้ได้
3.id ก็คล้ายๆกับ name แต่จะมีความสำคัญกับการอ้างอิงตำแหน่งต่างๆ ใน TAG นั้นๆ มีประโยชน์ในการเอาไปใช้ร่วมกับ Java Script และ CSS
4.value เป็นค่าต่างๆที่เราจะกำหนดขึ้นมาเองก็ได้เป็นค่าเริ่มต้น หรือ เป็นค่าที่รอผู้ใช้มากรอกใส่เข้าไปก็ได้
เมื่ออ่านจบ กระทู้ สองหน้านี้แล้ว แนะนำให้ อ่านต่อ
https://www.mindphp.com/forums/viewtopic ... 29&t=11771
บทเรียน HTML 5 : https://www.mindphp.com/%E0%B8%9A%E0%B8% ... html5.html
Last edited by samsonnaze3 on 21/03/2012 6:12 pm, edited 6 times in total.

- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
Input Object แบบที่ 1 text
รูปแบบการสร้าง input แบบ text นั้นเป็น ดังต่อไปนี้ครับ
ตัวอย่าง
รูปแบบการสร้าง input แบบ text นั้นเป็น ดังต่อไปนี้ครับ
Code: Select all
<input type="text" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>
Code: Select all
ชื่อ : <input type="text" name="fristname" id="firstname" value="อมรฤทธ์"/>
นามสกุล : <input type="text" name="lastname" id="lastname" value="อยู่เป็นสุข"/>
- Attachments
-
- ผลลัพธ์
- แบบที่ 1 text.png (2.45 KiB) Viewed 31145 times
Last edited by samsonnaze3 on 21/03/2012 5:21 pm, edited 1 time in total.

- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
Input Object แบบที่ 2 checkbox
รูปแบบการสร้าง input แบบ checkbox นั้นเป็น ดังต่อไปนี้ครับ
ตัวอย่างที่ 1
ตัวอย่างที่ 2
ถ้าคุณต้องการ ให้มีการ ติ๊ก ข้อความไว้ก่อนเลย หรือ มีผู้ใช้เคยติ๊กไว้แล้ว และกลับมาแก้ไข ข้อมูลใหม่ ให้ทำการติ๊กไว้อัตโนมัติ โดยไม่ต้องมานั่งเสียเวลาติ๊กอีกให้เพิ่ม checked="checked" เข้าไปครับ
ตัวอย่างที่ 3
ถ้าคุณต้องการติ๊กหลายช่องพร้อมกันแล้วส่งข้อมูลไปทีเดียวเลย ให้เพิ่ม [] ไว้หลัง name ครับ ซึ่งตรงนี้ มันจะคิดค่าเป็น Array
รูปแบบการสร้าง input แบบ checkbox นั้นเป็น ดังต่อไปนี้ครับ
Code: Select all
<input type="checkbox" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>
Code: Select all
<input name="checkbox1" type="checkbox" id="checkbox1" value="กรุงเทพฯ" />กรุงเทพมหานคร
<input name="checkbox2" type="checkbox" id="checkbox2" value="อยุธยา" />พระนครศรีอยุทธยา
ถ้าคุณต้องการ ให้มีการ ติ๊ก ข้อความไว้ก่อนเลย หรือ มีผู้ใช้เคยติ๊กไว้แล้ว และกลับมาแก้ไข ข้อมูลใหม่ ให้ทำการติ๊กไว้อัตโนมัติ โดยไม่ต้องมานั่งเสียเวลาติ๊กอีกให้เพิ่ม checked="checked" เข้าไปครับ
Code: Select all
<input name="checkbox1" type="checkbox" id="checkbox" value="กรุงเทพฯ" checked="checked"/>กรุงเทพมหานคร
<input name="checkbox2" type="checkbox" id="checkbox" value="อยุธยา" />พระนครศรีอยุทธยา
ถ้าคุณต้องการติ๊กหลายช่องพร้อมกันแล้วส่งข้อมูลไปทีเดียวเลย ให้เพิ่ม [] ไว้หลัง name ครับ ซึ่งตรงนี้ มันจะคิดค่าเป็น Array
Code: Select all
<input name="checkbox[]" type="checkbox" id="checkbox" value="กรุงเทพฯ" checked="checked"/>กรุงเทพมหานคร
<input name="checkbox[]" type="checkbox" id="checkbox" value="อยุธยา" checked="checked"/>พระนครศรีอยุทธยา
- Attachments
-
- แบบที่ 2 checkbox.png (8.94 KiB) Viewed 31143 times
Last edited by samsonnaze3 on 21/03/2012 5:21 pm, edited 2 times in total.

- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
Input Object แบบที่ 3 radio
รูปแบบการสร้าง input แบบ radioนั้นเป็น ดังต่อไปนี้ครับ
******โดยปกติแล้ว ถ้าใช้ radio จะต้องเลือกได้ ข้อใดข้อหนึ่ง ซึ่งเราต้อง เซทตรง name ด้วยนะครับ ให้เป็นชื่อเดียวกันในกลุ่มเดียวกัน เช่น เพศ ก็เซทเป็น Gender ทั้ง สองปุ่มเลยครับ
ตัวอย่างที่ 1
ตัวอย่างที่ 2
เป็นเหมือนกัน checkbox ครับ ถ้าผู้ใช้มีการติ๊กข้อความนี้ไว้ก่อนหน้าแล้ว และต้องการกลับมาแก้ไขใหม่ โดยปกติข้อมูลใน From เราต้องติ๊กให้ อัตโนมัติว่า ผู้ใช้เคยติ๊กข้อมูลไหนลงไป ให้เราเพิ่ม checked="checked" เข้าไปเหมือน checkbox เลยครับ
รูปแบบการสร้าง input แบบ radioนั้นเป็น ดังต่อไปนี้ครับ
******โดยปกติแล้ว ถ้าใช้ radio จะต้องเลือกได้ ข้อใดข้อหนึ่ง ซึ่งเราต้อง เซทตรง name ด้วยนะครับ ให้เป็นชื่อเดียวกันในกลุ่มเดียวกัน เช่น เพศ ก็เซทเป็น Gender ทั้ง สองปุ่มเลยครับ
Code: Select all
<input type="radio" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>
Code: Select all
<input name= "Gender" type="radio" id="radio" value="male" />ชาย<br />
<input name= "Gender" type="radio" id="radio" value="female" />หญิง
เป็นเหมือนกัน checkbox ครับ ถ้าผู้ใช้มีการติ๊กข้อความนี้ไว้ก่อนหน้าแล้ว และต้องการกลับมาแก้ไขใหม่ โดยปกติข้อมูลใน From เราต้องติ๊กให้ อัตโนมัติว่า ผู้ใช้เคยติ๊กข้อมูลไหนลงไป ให้เราเพิ่ม checked="checked" เข้าไปเหมือน checkbox เลยครับ
Code: Select all
<input name= "Gender" type="radio" id="radio2" value="male" checked="checked" />ชาย<br />
<input name= "Gender" type="radio" id="radio2" value="female" />หญิง
- Attachments
-
- แบบที่ 3 radio.png (3.81 KiB) Viewed 31143 times
Last edited by samsonnaze3 on 21/03/2012 5:49 pm, edited 3 times in total.

- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
Input Object แบบที่ 4 select
รูปแบบการสร้าง input แบบ select นั้นเป็น ดังต่อไปนี้ครับ
**การใช้ select นั้นมีการเปิด tag ที่ไม่เหมือน input ทั่วไป คือ เริ่มต้นเปิดด้วย <select> แล้วปิดด้วย </select> และมีการใส่รายการข้างในลงไป ด้วยการเปิด tag <option> และปิดด้วย</option>
ตัวอย่างที่ 1
ตัวอย่างที่ 2
เหมือนกับ checkbox และ radio อีกแล้ว ซึ่งเวลาผู้ใช้เคยเลือกจังหวัดไปแล้ว และต้องการกลับมาแก้ไขข้อมูล ระบบจะต้องเลือกจังหวัดที่ผู้ใช้เคยเลือกไว้แบบอัตโนมัติเลย แต่ ใน ส่วนของ select input นั้น เราจะเพิ่ม selected="selected" แทน ซึ่งต่างจาก checkbox และ radio ที่ใช้ checked
รูปแบบการสร้าง input แบบ select นั้นเป็น ดังต่อไปนี้ครับ
**การใช้ select นั้นมีการเปิด tag ที่ไม่เหมือน input ทั่วไป คือ เริ่มต้นเปิดด้วย <select> แล้วปิดด้วย </select> และมีการใส่รายการข้างในลงไป ด้วยการเปิด tag <option> และปิดด้วย</option>
Code: Select all
<select name="ชื่อของ select input" id="ไอดี select input">
<option value="ค่าของตัวเลือก">ตัวเลือกที่ผู้ใช้มองเห็น</option>
</select>
Code: Select all
<select name="prov" id="prov">
<option value="กรุงเทพฯ">กรุงเทพมหานคร</option>
<option value="อยุธยา">พระนครศรีอยุธยา</option>
<option value="อ่างทอง">อ่างทอง</option>
<option value="สมุทรปราการ">สมุทรปราการ</option>
</select>
เหมือนกับ checkbox และ radio อีกแล้ว ซึ่งเวลาผู้ใช้เคยเลือกจังหวัดไปแล้ว และต้องการกลับมาแก้ไขข้อมูล ระบบจะต้องเลือกจังหวัดที่ผู้ใช้เคยเลือกไว้แบบอัตโนมัติเลย แต่ ใน ส่วนของ select input นั้น เราจะเพิ่ม selected="selected" แทน ซึ่งต่างจาก checkbox และ radio ที่ใช้ checked
Code: Select all
<select name="prov2" id="prov2">
<option value="กรุงเทพฯ" selected="selected">กรุงเทพมหานคร</option>
<option value="อยุธยา">พระนครศรีอยุธยา</option>
<option value="อ่างทอง">อ่างทอง</option>
<option value="สมุทรปราการ">สมุทรปราการ</option>
</select>
- Attachments
-
- แบบที่ 4 select.png (7.42 KiB) Viewed 31140 times

- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
Input Object แบบที่ 5 multiple
**multiple นั้นเป็น select ชนิดหนึ่งที่สามารถเลือกได้หลาย ข้อมูลในเวลาเดียวกัน
รูปแบบการสร้าง input แบบ multiple นั้นเป็น ดังต่อไปนี้ครับ
มีการเพิ่ม size="" multiple="MULTIPLE" และ [] หลังชื่อ จาก select เดิมครับ
ซึ่ง ตัว size เป็นตัวกำหนดว่าจะโชว์กี่แถว ส่วน multiple เป็นตัวทำให้เราสามารถเลือกได้หลายข้อมูลพร้อมๆกัน ส่วน [] หลัง name นั้นเป็นการทำให้ค่าที่เราส่งไปเป็น Array
ตัวอย่างที่ 1
ตัวอย่างที่ 2
เหมือนกับตัวอย่างของ select เลย คือ เลือกไว้อัตโนมัติว่า ผู้ใช้ระบบเคยเลือกจังหวัดอะไรไว้
**multiple นั้นเป็น select ชนิดหนึ่งที่สามารถเลือกได้หลาย ข้อมูลในเวลาเดียวกัน
รูปแบบการสร้าง input แบบ multiple นั้นเป็น ดังต่อไปนี้ครับ
Code: Select all
<select name="ชื่อของ select input[]" size="จำนวนแถวที่จะโชว์" multiple="MULTIPLE" id="ไอดี select input">
<option value="ค่าของตัวเลือก1">ตัวเลือกที่ผู้ใช้มองเห็น</option>
<option value="ค่าของตัวเลือก2">ตัวเลือกที่ผู้ใช้มองเห็น</option>
</select>
ซึ่ง ตัว size เป็นตัวกำหนดว่าจะโชว์กี่แถว ส่วน multiple เป็นตัวทำให้เราสามารถเลือกได้หลายข้อมูลพร้อมๆกัน ส่วน [] หลัง name นั้นเป็นการทำให้ค่าที่เราส่งไปเป็น Array
ตัวอย่างที่ 1
Code: Select all
<select name="prov" size="4" multiple="MULTIPLE" id="prov">
<option value="กรุงเทพฯ">กรุงเทพมหานคร</option>
<option value="อยุธยา">พระนครศรีอยุธยา</option>
<option value="อ่างทอง">อ่างทอง</option>
<option value="สมุทรปราการ">สมุทรปราการ</option>
</select>
เหมือนกับตัวอย่างของ select เลย คือ เลือกไว้อัตโนมัติว่า ผู้ใช้ระบบเคยเลือกจังหวัดอะไรไว้
Code: Select all
<select name="prov2" size="4" multiple="multiple" id="prov2">
<option value="กรุงเทพฯ" selected="selected">กรุงเทพมหานคร</option>
<option value="อยุธยา">พระนครศรีอยุธยา</option>
<option value="อ่างทอง">อ่างทอง</option>
<option value="สมุทรปราการ">สมุทรปราการ</option>
</select>
- Attachments
-
- แบบที่ 5 multiple.png (9.37 KiB) Viewed 31140 times

- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
Input Object แบบที่ 6 submit
รูปแบบการสร้าง input แบบ submit นั้นเป็น ดังต่อไปนี้ครับ
ตัวอย่าง
รูปแบบการสร้าง input แบบ submit นั้นเป็น ดังต่อไปนี้ครับ
Code: Select all
<input name="ชื่อของปุ่ม" id="ไอดีปุ่ม" type="submit" value="ค่าของปุ่ม" />
Code: Select all
<input name="register" id="register" type="submit" value="สมัครสมาชิก" />
- Attachments
-
- แบบที่ 6 summit.png (1.12 KiB) Viewed 31141 times
Last edited by samsonnaze3 on 21/03/2012 6:11 pm, edited 2 times in total.

- samsonnaze3
- PHP Hero Member
- Posts: 190
- Joined: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
Input Object แบบที่ 7 image
รูปแบบการสร้าง input แบบ image นั้นเป็น ดังต่อไปนี้ครับ
ตัวอย่าง
รูปแบบการสร้าง input แบบ image นั้นเป็น ดังต่อไปนี้ครับ
Code: Select all
<input type="image" name="ชื่อปุ่มภาพ" id="ไอดีปุ่มภาพ" src="ไฟล์ภาพที่ต้องการจะแสดงเป็นปุ่ม" />
Code: Select all
<input type="image" name="imageField" id="imageField" src="image/2.gif" />
- Attachments
-
- แบบที่ 7 image.png (3.4 KiB) Viewed 31141 times

-
- Similar Topics
- Replies
- Views
- Last post
-
-
การเขียน class object ของ python และให้ return เรียกใช้ บน html รูปแบบเป็นแบบไหนคะ
by bolue » 12/06/2020 1:07 pm » in Programming - C/C++ & java & Python - 5 Replies
- 552 Views
-
Last post by bolue
13/06/2020 10:34 am
-
-
-
Object not found! ทำฟรอมยืนยันการโอนเงินอะครับ
by mmm555mmm555 » 23/10/2012 11:36 pm » in ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM - 7 Replies
- 2283 Views
-
Last post by mmm555mmm555
24/10/2012 2:22 pm
-
-
-
การปรับเปลี่ยนข้อมูลของ object โดยใช้ javascript
by Ittichai_chupol » 20/11/2019 3:34 pm » in Jquery & Ajax Knowledge - 0 Replies
- 596 Views
-
Last post by Ittichai_chupol
20/11/2019 3:34 pm
-
-
-
ปัญหาไม่สามารถแสดงผลได้ทางหน้าจอ ขึ้น Object not found!
by birdkritsna » 17/09/2019 12:11 pm » in Programming - PHP - 5 Replies
- 1034 Views
-
Last post by LEG
26/12/2019 8:50 am
-
-
- 0 Replies
- 245 Views
-
Last post by champp
08/05/2020 12:17 pm
Who is online
Users browsing this forum: No registered users and 8 guests