HTML Input Object สร้างฟอร์ม เพื่อส่งค่าให้ PHP Input object แต่ละประเภท
Moderator: mindphp, ผู้ดูแลกระดาน
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
HTML Input Object สร้างฟอร์ม เพื่อส่งค่าให้ PHP Input object แต่ละประเภท
สิ่งสำคัญที่ควรมีใน 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
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
รูปแบบการสร้าง input แบบ text นั้นเป็น ดังต่อไปนี้ครับ
โค้ด: เลือกทั้งหมด
<input type="text" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>
โค้ด: เลือกทั้งหมด
ชื่อ : <input type="text" name="fristname" id="firstname" value="อมรฤทธ์"/>
นามสกุล : <input type="text" name="lastname" id="lastname" value="อยู่เป็นสุข"/>
- แนบไฟล์
-
- ผลลัพธ์
- แบบที่ 1 text.png (2.45 KiB) Viewed 33333 times
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
รูปแบบการสร้าง input แบบ checkbox นั้นเป็น ดังต่อไปนี้ครับ
โค้ด: เลือกทั้งหมด
<input type="checkbox" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>
โค้ด: เลือกทั้งหมด
<input name="checkbox1" type="checkbox" id="checkbox1" value="กรุงเทพฯ" />กรุงเทพมหานคร
<input name="checkbox2" type="checkbox" id="checkbox2" value="อยุธยา" />พระนครศรีอยุทธยา
ถ้าคุณต้องการ ให้มีการ ติ๊ก ข้อความไว้ก่อนเลย หรือ มีผู้ใช้เคยติ๊กไว้แล้ว และกลับมาแก้ไข ข้อมูลใหม่ ให้ทำการติ๊กไว้อัตโนมัติ โดยไม่ต้องมานั่งเสียเวลาติ๊กอีกให้เพิ่ม checked="checked" เข้าไปครับ
โค้ด: เลือกทั้งหมด
<input name="checkbox1" type="checkbox" id="checkbox" value="กรุงเทพฯ" checked="checked"/>กรุงเทพมหานคร
<input name="checkbox2" type="checkbox" id="checkbox" value="อยุธยา" />พระนครศรีอยุทธยา
ถ้าคุณต้องการติ๊กหลายช่องพร้อมกันแล้วส่งข้อมูลไปทีเดียวเลย ให้เพิ่ม [] ไว้หลัง name ครับ ซึ่งตรงนี้ มันจะคิดค่าเป็น Array
โค้ด: เลือกทั้งหมด
<input name="checkbox[]" type="checkbox" id="checkbox" value="กรุงเทพฯ" checked="checked"/>กรุงเทพมหานคร
<input name="checkbox[]" type="checkbox" id="checkbox" value="อยุธยา" checked="checked"/>พระนครศรีอยุทธยา
- แนบไฟล์
-
- แบบที่ 2 checkbox.png (8.94 KiB) Viewed 33331 times
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
รูปแบบการสร้าง input แบบ radioนั้นเป็น ดังต่อไปนี้ครับ
******โดยปกติแล้ว ถ้าใช้ radio จะต้องเลือกได้ ข้อใดข้อหนึ่ง ซึ่งเราต้อง เซทตรง name ด้วยนะครับ ให้เป็นชื่อเดียวกันในกลุ่มเดียวกัน เช่น เพศ ก็เซทเป็น Gender ทั้ง สองปุ่มเลยครับ
โค้ด: เลือกทั้งหมด
<input type="radio" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>
โค้ด: เลือกทั้งหมด
<input name= "Gender" type="radio" id="radio" value="male" />ชาย<br />
<input name= "Gender" type="radio" id="radio" value="female" />หญิง
เป็นเหมือนกัน checkbox ครับ ถ้าผู้ใช้มีการติ๊กข้อความนี้ไว้ก่อนหน้าแล้ว และต้องการกลับมาแก้ไขใหม่ โดยปกติข้อมูลใน From เราต้องติ๊กให้ อัตโนมัติว่า ผู้ใช้เคยติ๊กข้อมูลไหนลงไป ให้เราเพิ่ม checked="checked" เข้าไปเหมือน checkbox เลยครับ
โค้ด: เลือกทั้งหมด
<input name= "Gender" type="radio" id="radio2" value="male" checked="checked" />ชาย<br />
<input name= "Gender" type="radio" id="radio2" value="female" />หญิง
- แนบไฟล์
-
- แบบที่ 3 radio.png (3.81 KiB) Viewed 33331 times
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
รูปแบบการสร้าง input แบบ select นั้นเป็น ดังต่อไปนี้ครับ
**การใช้ select นั้นมีการเปิด tag ที่ไม่เหมือน input ทั่วไป คือ เริ่มต้นเปิดด้วย <select> แล้วปิดด้วย </select> และมีการใส่รายการข้างในลงไป ด้วยการเปิด tag <option> และปิดด้วย</option>
โค้ด: เลือกทั้งหมด
<select name="ชื่อของ select input" id="ไอดี select input">
<option value="ค่าของตัวเลือก">ตัวเลือกที่ผู้ใช้มองเห็น</option>
</select>
โค้ด: เลือกทั้งหมด
<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
โค้ด: เลือกทั้งหมด
<select name="prov2" id="prov2">
<option value="กรุงเทพฯ" selected="selected">กรุงเทพมหานคร</option>
<option value="อยุธยา">พระนครศรีอยุธยา</option>
<option value="อ่างทอง">อ่างทอง</option>
<option value="สมุทรปราการ">สมุทรปราการ</option>
</select>
- แนบไฟล์
-
- แบบที่ 4 select.png (7.42 KiB) Viewed 33328 times
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
**multiple นั้นเป็น select ชนิดหนึ่งที่สามารถเลือกได้หลาย ข้อมูลในเวลาเดียวกัน
รูปแบบการสร้าง input แบบ multiple นั้นเป็น ดังต่อไปนี้ครับ
โค้ด: เลือกทั้งหมด
<select name="ชื่อของ select input[]" size="จำนวนแถวที่จะโชว์" multiple="MULTIPLE" id="ไอดี select input">
<option value="ค่าของตัวเลือก1">ตัวเลือกที่ผู้ใช้มองเห็น</option>
<option value="ค่าของตัวเลือก2">ตัวเลือกที่ผู้ใช้มองเห็น</option>
</select>
ซึ่ง ตัว size เป็นตัวกำหนดว่าจะโชว์กี่แถว ส่วน multiple เป็นตัวทำให้เราสามารถเลือกได้หลายข้อมูลพร้อมๆกัน ส่วน [] หลัง name นั้นเป็นการทำให้ค่าที่เราส่งไปเป็น Array
ตัวอย่างที่ 1
โค้ด: เลือกทั้งหมด
<select name="prov" size="4" multiple="MULTIPLE" id="prov">
<option value="กรุงเทพฯ">กรุงเทพมหานคร</option>
<option value="อยุธยา">พระนครศรีอยุธยา</option>
<option value="อ่างทอง">อ่างทอง</option>
<option value="สมุทรปราการ">สมุทรปราการ</option>
</select>
เหมือนกับตัวอย่างของ select เลย คือ เลือกไว้อัตโนมัติว่า ผู้ใช้ระบบเคยเลือกจังหวัดอะไรไว้
โค้ด: เลือกทั้งหมด
<select name="prov2" size="4" multiple="multiple" id="prov2">
<option value="กรุงเทพฯ" selected="selected">กรุงเทพมหานคร</option>
<option value="อยุธยา">พระนครศรีอยุธยา</option>
<option value="อ่างทอง">อ่างทอง</option>
<option value="สมุทรปราการ">สมุทรปราการ</option>
</select>
- แนบไฟล์
-
- แบบที่ 5 multiple.png (9.37 KiB) Viewed 33328 times
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
รูปแบบการสร้าง input แบบ submit นั้นเป็น ดังต่อไปนี้ครับ
โค้ด: เลือกทั้งหมด
<input name="ชื่อของปุ่ม" id="ไอดีปุ่ม" type="submit" value="ค่าของปุ่ม" />
โค้ด: เลือกทั้งหมด
<input name="register" id="register" type="submit" value="สมัครสมาชิก" />
- แนบไฟล์
-
- แบบที่ 6 summit.png (1.12 KiB) Viewed 33329 times
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
รูปแบบการสร้าง input แบบ image นั้นเป็น ดังต่อไปนี้ครับ
โค้ด: เลือกทั้งหมด
<input type="image" name="ชื่อปุ่มภาพ" id="ไอดีปุ่มภาพ" src="ไฟล์ภาพที่ต้องการจะแสดงเป็นปุ่ม" />
โค้ด: เลือกทั้งหมด
<input type="image" name="imageField" id="imageField" src="image/2.gif" />
- แนบไฟล์
-
- แบบที่ 7 image.png (3.4 KiB) Viewed 33329 times
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
รูปแบบการสร้าง input แบบ hidden นั้นเป็น ดังต่อไปนี้ครับ
โค้ด: เลือกทั้งหมด
<input type="hidden" name="ชื่อของ hidden" id="ไอดีของ hidden" value="ค่าต่างๆที่เราต้องการส่งไปหน้า Page อื่นๆ" />
โค้ด: เลือกทั้งหมด
<input type="hidden" name="type" id="type" value="Car" />
- samsonnaze3
- PHP Hero Member
- โพสต์: 190
- ลงทะเบียนเมื่อ: 04/03/2012 1:06 am
Re: Input Object ในการเขียน PHP แต่ละประเภท
**input ตัวนี้เอาไว้สำหรับ upload file ต่างๆลง server นะครับ
รูปแบบการสร้าง input แบบ file นั้นเป็น ดังต่อไปนี้ครับ
โค้ด: เลือกทั้งหมด
<input type="file" name="ชื่อไฟล์" id="ไอดีไฟล์" />
โค้ด: เลือกทั้งหมด
<input type="file" name="fileField" id="fileField" />
- แนบไฟล์
-
- แบบที่ 9 file.png (1.19 KiB) Viewed 4255 times
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การเขียน class object ของ python และให้ return เรียกใช้ บน html รูปแบบเป็นแบบไหนคะ
โดย MBMoo » 12/06/2020 1:07 pm » ใน Programming - C/C++ & java & Python - 5 ตอบกลับ
- 1691 แสดง
-
โพสต์ล่าสุด โดย MBMoo
13/06/2020 10:34 am
-
-
-
โพสต์ใหม่ การ console.log ค่า เพื่อดูชื่อไฟล์ และ ประเภทของไฟล์ที่เราทำการ Input ผ่าน ฟอร์ม HTML
โดย fonfonn » 30/08/2022 5:14 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 512 แสดง
-
โพสต์ล่าสุด โดย fonfonn
30/08/2022 5:14 pm
-
-
- 1 ตอบกลับ
- 1481 แสดง
-
โพสต์ล่าสุด โดย mindphp
17/06/2021 4:36 pm
-
-
โพสต์ใหม่ ปัญหาไม่สามารถแสดงผลได้ทางหน้าจอ ขึ้น Object not found!
โดย birdkritsna » 17/09/2019 12:11 pm » ใน Programming - PHP - 5 ตอบกลับ
- 2059 แสดง
-
โพสต์ล่าสุด โดย LEG
26/12/2019 8:50 am
-
-
-
โพสต์ใหม่ การปรับเปลี่ยนข้อมูลของ object โดยใช้ javascript
โดย Ittichai_chupol » 20/11/2019 3:34 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 1435 แสดง
-
โพสต์ล่าสุด โดย Ittichai_chupol
20/11/2019 3:34 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 94