HTML Input Object สร้างฟอร์ม เพื่อส่งค่าให้ PHP Input object แต่ละประเภท

[samsonnaze3]

ในการใช้งาน PHP การส่งค่าด้วย Input ต่างๆนั้นสำคัญอย่างยิ่ง ผมจะมาแนะนำ การใช้ Input แต่ละแบบให้ได้ทราบกันครับผม

connection-contemporary-data-html-input.jpg (51.86 KiB) Viewed 996 times

สิ่งสำคัญที่ควรมีใน 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]

Input Object แบบที่ 1 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="อยู่เป็นสุข"/>

[samsonnaze3]

Input Object แบบที่ 2 checkbox

รูปแบบการสร้าง input แบบ checkbox นั้นเป็น ดังต่อไปนี้ครับ

Code: Select all

<input type="checkbox" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>

ตัวอย่างที่ 1

Code: Select all

<input name="checkbox1" type="checkbox" id="checkbox1" value="กรุงเทพฯ" />กรุงเทพมหานคร
<input name="checkbox2" type="checkbox" id="checkbox2" value="อยุธยา" />พระนครศรีอยุทธยา

ตัวอย่างที่ 2
ถ้าคุณต้องการ ให้มีการ ติ๊ก ข้อความไว้ก่อนเลย หรือ มีผู้ใช้เคยติ๊กไว้แล้ว และกลับมาแก้ไข ข้อมูลใหม่ ให้ทำการติ๊กไว้อัตโนมัติ โดยไม่ต้องมานั่งเสียเวลาติ๊กอีกให้เพิ่ม checked="checked" เข้าไปครับ

Code: Select all

<input name="checkbox1" type="checkbox" id="checkbox" value="กรุงเทพฯ" checked="checked"/>กรุงเทพมหานคร
<input name="checkbox2" type="checkbox" id="checkbox" value="อยุธยา" />พระนครศรีอยุทธยา

ตัวอย่างที่ 3
ถ้าคุณต้องการติ๊กหลายช่องพร้อมกันแล้วส่งข้อมูลไปทีเดียวเลย ให้เพิ่ม [] ไว้หลัง 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"/>พระนครศรีอยุทธยา

[samsonnaze3]

Input Object แบบที่ 3 radio

รูปแบบการสร้าง input แบบ radioนั้นเป็น ดังต่อไปนี้ครับ
******โดยปกติแล้ว ถ้าใช้ radio จะต้องเลือกได้ ข้อใดข้อหนึ่ง ซึ่งเราต้อง เซทตรง name ด้วยนะครับ ให้เป็นชื่อเดียวกันในกลุ่มเดียวกัน เช่น เพศ ก็เซทเป็น Gender ทั้ง สองปุ่มเลยครับ

Code: Select all

<input type="radio" name="ชื่อของ Input" id="ไอดีของ Input" value="ค่าเริ่มต้นของข้อความนี้"/>

ตัวอย่างที่ 1

Code: Select all

 <input name= "Gender" type="radio" id="radio" value="male" />ชาย<br />
 <input name= "Gender" type="radio" id="radio" value="female" />หญิง

ตัวอย่างที่ 2
เป็นเหมือนกัน 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" />หญิง

[samsonnaze3]

Input Object แบบที่ 4 select

รูปแบบการสร้าง input แบบ select นั้นเป็น ดังต่อไปนี้ครับ
**การใช้ select นั้นมีการเปิด tag ที่ไม่เหมือน input ทั่วไป คือ เริ่มต้นเปิดด้วย <select> แล้วปิดด้วย </select> และมีการใส่รายการข้างในลงไป ด้วยการเปิด tag <option> และปิดด้วย</option>

Code: Select all

<select name="ชื่อของ select input" id="ไอดี select input">
   <option value="ค่าของตัวเลือก">ตัวเลือกที่ผู้ใช้มองเห็น</option>
   </select>

ตัวอย่างที่ 1

Code: Select all

<select name="prov" id="prov">
   <option value="กรุงเทพฯ">กรุงเทพมหานคร</option>
   <option value="อยุธยา">พระนครศรีอยุธยา</option>
   <option value="อ่างทอง">อ่างทอง</option>
   <option value="สมุทรปราการ">สมุทรปราการ</option>
   </select>

ตัวอย่างที่ 2
เหมือนกับ 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>

[samsonnaze3]

Input Object แบบที่ 5 multiple

**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="MULTIPLE" และ [] หลังชื่อ จาก 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>

ตัวอย่างที่ 2
เหมือนกับตัวอย่างของ 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>

[samsonnaze3]

Input Object แบบที่ 6 submit

รูปแบบการสร้าง input แบบ submit นั้นเป็น ดังต่อไปนี้ครับ

Code: Select all

<input name="ชื่อของปุ่ม"  id="ไอดีปุ่ม" type="submit" value="ค่าของปุ่ม" />

ตัวอย่าง

Code: Select all

<input name="register"  id="register" type="submit" value="สมัครสมาชิก" />

[samsonnaze3]

Input Object แบบที่ 7 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" />