จากรูปภาพต้องการที่จะเลือกรายวิชาใน List Menu แล้วโชว์ข้อมูล รหัววิชา และ รหัสครูผู้สอนโชว์ใน TextBox แต่ติดปัญหาที่ว่าโชว์ได้แค่รหัสวิชา โค้ดมีดังต่อไปนี้ <script language="JavaScript"> function showData(Data) { frmMain.subjectCode.value = Data.split("|")[0]; frmMain.teacherID.value = Data.split("|")[3]; } </script>
<?php $q="select * from subject,teacher where subject.teacherID=teacher.teacherID "; $qr=mysql_query($q); while($rs=mysql_fetch_array($qr)){ ?> <option value="<?=$rs['subjectCode']?>"><?=$rs['subjectCode']?> - <?=$rs['subjectName']?> -- <?=$rs['teacherID']?> - ครู<?=$rs['firstname']?> </option> <?php } ?> </select> <input name="subjectCode" type="text" size="5" readonly> <input name="teacherID" type="text" size="5" readonly>
แต่ถ้าใส่โค้ด เพื่อโชว์รหัสครูผู้สอน มันจะแสดงใน TextBox ช่องเดียวกัน
พอจะมีวิธีแก้ไขยังไงได้บ้างคะ ให้สามารถโชว์รหัสวิชา และ รหัสครูผู้สอนได้คนละช่องค่ะ ขอบคุณค่ะ
ใช้ระบุรายการของตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับ ผู้ใช้จะเห็นรายการแบบหล่นลงของตัวเลือกที่กำหนดไว้ล่วงหน้าเมื่อพวกเขาป้อนข้อมูลแอตทริบิวต์listขององค์ประกอบต้องอ้างถึง idแอตทริบิวต์ของ
ในบทความนี้จะแสดงวิธีการสร้าง input แบบขั้นพื้นฐาน โดยเรามาเริ่มสร้างฟอร์มด้วยแท็ก <form> จากนั้นก็กำหนดรูปแบบของ input ต่าง ๆ ที่ต้องมาใช้งาน ตัวอย่างเช่น text area, text field, password และอื่น ๆ ซึ่ง input ใน html เหล่านี้เป็น input แบบมาตรฐานของ html
ทำแบบฟอร์ม
ในปัจจุบันเว็บไซต์มักจะให้ผู้ใช้งานสมัครสมาชิก ก่อนที่จะได้รับข้อมูล หรือการบริการต่าง ๆ เมื่อผู้ใช้งานได้ทำการกรอกข้อมูลในแบบฟอร์ม ข้อมูลต่าง ๆ ก็จะส่งไปในยังเว็บไซต์ของเรา และถูกเก็บไว้เพื่อใช้งานในครั้งต่อไป
เราก็มาเริ่มแบบฟอร์มกันก่อน สร้างในเว็บเพจของเรา โดยจะใช้แท็ก <form>...</form> ภายในแท็กจะประกอบไปด้วย input ต่าง ๆ ซึ่งจะมีรูปแบบดังนี้ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="#" method="post" name="myform"> <!--input ต่าง ๆ ที่ใส่ภายใน form--> </form> </body> </html>
จากตัวอย่างรูปแบบข้างต้นจะมีแอตทริบิวต์สำคัญในตัวแท็ก form คือ
- method เอวไว้ส่งข้อมูล ซึ่งการส่งข้อมูลจะมี 2 แบบ ได้แก่ post และ get
- action คือเอาไว้ใช้สำหรับส่งข้อมูลไปยังไฟล์ใดไฟล์หนึ่ง
- name คือใช้กำหนดชื่อของฟอร์มนั้น ๆ
รับข้อความด้วย Text Fields
ตัวของฟอร์มนั้น จะต้องมีตัว input เพื่อที่จะรับข้อมูลจากผู้ใช้งาน ซึ่งในตัว input ที่ใช้งานมากที่สุดคือ กล่องข้อความ หรือ Text Fieds เป็น input พื้นฐานสำคัญที่ใช้ในการรับข้อมูลที่เป็นข้อความ เช่น username, password เป็นต้น
การกำหนด Text Fields ลงในแบบฟอร์มจะใช้แท็ก <input> โดยระบุด้วย type คือ type="text" ตามตัวอย่างต่อไปนี้ <form action="#" method="post" name="myform"> ชื่อผู้ใช้งาน :<input type="text" name="Firsname" id=""> <br> นามสกุล :<input type="text" name="Lastname" id=""> </form>
ผลลัพธ์ที่ได้
อธิบายภายในแท็ก <input> แอตทริบิวต์คืออะไร
- type คือใช้บอกประเภทของตัว input นั้น ๆ
- name คือการกำหนดชื่อของ input ซึ่งเป็นสิ่งที่สำคัญมาก ๆ เพราะเราต้องใช้ชื่อนี้เป็นตัวแปรส่งไปยังของเซิร์ฟเวอร์
สิ่งที่ควรรู้คือแท็ก <input> จะต้องอยู่ภายในแท็ก <fotm>...</form> เสมอ
การรับค่ารหัสผ่าน Password Field
การกรอกข้อมูลที่เป็นรหัสผ่าน เวลากรอกรหัส จะไม่เห็นข้อความหรือตัวอักษรที่เรากรอกลงไปจะเห็นแค่เพียงเครื่องหมาย * เท่านั้น เพื่อป้องกันไม่ให้คนอื่น ๆ มาแอบดูรหัสผ่านของเราได้
การกรอกรหัสผ่านใช้ Type="password" ดังตัวอย่างต่อไปนี้ <form action="#" method="post" name="myform"> ชื่อผู้ใช้งาน : <input type="text" name="username" id=""><br> กรอกรหัสผ่าน : <input type="password" name="password" id=""> </form>
ผลลัพธ์ที่ได้
การรับข้อความยาว ๆ Text Area
input type="text" จะรับข้อความได้ข้อความสั้น ๆ เช่น ชื่อ นามสกุล ถ้าตัวข้อความที่กรอกมีหลายบรรทัด หรือข้อความยาว ๆ เราจะใช้ input แบบ Text Area แทน โดยใช้แท็ก <textarea>...</textarea>
ตัวอย่าง <form action="#" method="post" name="myform"> ชื่อผู้ใช้งาน : <input type="text" name="username" id=""><br> กรอกรหัสผ่าน : <input type="password" name="password" id=""><br> ที่อยู่: <br> <textarea name="address" id="" cols="30" rows="10"></textarea> </form>
ผลลัพธ์ที่ได้
เลือกอย่างใดอย่างหนึ่ง Radio buttons
ถ้าเรามีการเลือกหลายทางเลือก แต่เลือกได้เพียงอย่างเดียว เราจะใช้ Radio Buttons เช่น การเลือกเพศ จัต้องเลือกเพศชายหรือเพศหญิง สำหรับการทำ Radio buttons จะใช้แท็ก <input type="radio"> ดังตัวอย่างต่อไปนี้ <form action="#" method="post" name="myform"> เพศ : <br> <input type="radio" name="sex" id="" value="male"> ชาย <br> <input type="radio" name="sex" id="" value="female"> หญิง </form>
ผลลัพธ์ที่ได้
เลือกหลาย ๆ อย่าง Checkboxes
ถ้าเรามีการเลือกหลายทางเลือก ซึ่งเราสามารถเลือกได้หลายคำตอบ เราจะใช้ Checkboxes ตัวอย่างเช่น เราเลือกใช้รถยนต์ประเภทอะไร เป็นต้น
สำหรับการใช้ Checkboxes เราจะใช้แท็ก <input type="checkbox"> ดังตัวอย่างต่อไปนี้ <form action="#" method="post" name="myform"> รถยนต์ที่ใช้อยู่ในปัจจุบัน : <br> <input type="checkbox" name="ride0" id="" value="car"> รถยนต์ <br> <input type="checkbox" name="ridee1" id="" value="bike"> มอเตอร์ไซต์ <br> <input type="checkbox" name="ridee2" id="" value="bicycle"> จักรยาน </form>
ผลลัพธ์ที่ได้
เลือกทำรายการต่าง ๆ Dropdown List
Dropdown List เป็น input อีกแบบหนึ่ง ใช้สำหรับเลือกสิ่งที่ต้องการจากรายการที่ได้กำหนดเอาไว้ เช่น เลือกชื่อจังหวัดในรายการ เลือกหมวดสินค้าจากรายการ เป็นต้น
การกำหนด Dropdown List จะใช้แท็ก <select>...</select> โดยภายในแท็กนั้นจะต้องกำหนดแท็ก <option>...</option> เพื่อกำหนดรายการต่าง ๆ ได้ ดังตัวอย่างต่อไป <form action="#" method="post" name="myform"> รถยนต์ที่ใช้อยู่ในปัจจุบัน : <select name="ride" id=""> <option value="car">รถยนต์</option> <option value="bike">มอเตอร์ไซต์</option> <option value="bicycle">จักรยาน</option> </select> </form>
ผลลัพธ์ที่ได้
สรุป การใช้งาน html ในการสร้างแบบฟอร์มนั้นจะมี input ให้เราอย่างมากมาย ตัวอย่าง input ที่รับข้อความ, input password, input ที่รับข้อความยาว ๆ เป็นต้น และตัวฟอร์มเองสามารถส่งข้อมูลได้ 2 แบบ คือ post กับ get ซึ่ง 2 ตัวนี้ต่างกันที่การเอาไปการรักษาข้อมูลด้านปลอดภัย get ส่งข้อมูลไปเราจะเห็นข้อมูลที่ URL ส่วน post นั้นจะไม่แสดงข้อมูลที่ URL ซึ่งมีความปลอดภัยกว่า แต่แลกมาด้วยทำงานช็ากว่าส่งแบบ get
อ้างอิง :
HTML type Attribute ,[ออนไลน์], เข้าถึงได้จาก //www.w3bai.com/th/tags/att_input_type.html