การสร้างเว็บไซต์ด้วย Dreamweaver(3) : การสร้างข้อความแบบตัวเลือก(list Box)

สำหรับผู้ที่ เริ่มต้น Programming - PHP มีอะไร แนะนำ หรือข้อสงสัยต้องบอร์ด นี้ คนที่มีความรู้ แบ่งปันคนอื่นบ้างนะ ปัญหาการเขียนโปรแกรม แบบ OOP Session Cookies php network

Moderator: mindphp, ผู้ดูแลกระดาน

dawthana
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 604
ลงทะเบียนเมื่อ: 07/12/2016 10:55 am

การสร้างเว็บไซต์ด้วย Dreamweaver(3) : การสร้างข้อความแบบตัวเลือก(list Box)

โพสต์โดย dawthana » 08/12/2016 5:22 pm

สร้างข้อความแบบตัวเลือกlist Box(ลิส บล็อค)
การวร้างเว็บไซต์ด้วย Dreamweaver (ดรีมเวฟเวอร์) สามารถสร้างข้อความแบบตัวเลือกเป็นการป้องกันเพื่อไม่ให้ข้อมูลที่ได้รับออกนอกประเด็นหรือเป็นการทำให้คำตอบแคบลง และช่วยให้ร่นเวลาในการตอบ เช่น การตอบคำถามต่างๆ

การสร้าง site สามารถดูเพิ่มเติม ได้ที่นี่
การดักข้อมูลที่มีค่าว่างด้วยคำสั่ง Javascript ได้ที่นี่

การสร้างเพจ
File(ไฟล์) > New(นิว)
2-1.png
2-1.png (28.28 KiB) เปิดดู 54 ครั้ง

Blank Page (แบล้งเพจ) > PHP (พีเอชพี) > Create (ครีเอท)
2-2.png
2-2.png (30.55 KiB) เปิดดู 54 ครั้ง

ทำการเซฟไฟล์
File > save as (เซฟ แอด)
2-3.png
2-3.png (27.75 KiB) เปิดดู 54 ครั้ง

ในตัวอย่างสร้างไฟล์ชื่อ index.php (อินเด็กดอทพีเอชพี) ที่โฟลเดอร์ชื่อ test (เทส)
3-4.png
3-4.png (22.97 KiB) เปิดดู 54 ครั้ง

การสร้างฟอร์ม
Insert(อินเสริด) > form(ฟอร์ม) > form
2-5.png
2-5.png (41.03 KiB) เปิดดู 54 ครั้ง

การสร้างตารางควรสร้างภายใต้ฟอร์มที่สร้างไว้
Insert > Table(เทเบิล)
2-6.png
2-6.png (28.92 KiB) เปิดดู 54 ครั้ง

ในที่นี้จะสร้างตาราง 1 แถว 2คอลัมน์ ขนาด 500 Pixel(พิกเซล)
3-7.png
3-7.png (36.99 KiB) เปิดดู 54 ครั้ง

เมื่อได้ตารางแล้วให้คลิกคลุมทั้งตารางแล้วเลือก Align (อะราย) > Center(เซ็นเตอร์)
3-6.png
3-6.png (37.93 KiB) เปิดดู 54 ครั้ง

พิมข้อความ แล้วเลือก Align Center
3-8.png
3-8.png (133.06 KiB) เปิดดู 54 ครั้ง

แล้วนำเม้าส์ไปวางในส่วนที่ต้องการให้มีข้อความแบบตัวเลือก
3-10.png
3-10.png (20.17 KiB) เปิดดู 54 ครั้ง

แล้วไปในส่วนของหน้า Code (โค้ด) นำโค้ดไปวาง
3-12.png
3-12.png (22.92 KiB) เปิดดู 54 ครั้ง

ตัวอย่างโค้ดในการสร้างข้อความแบบตัวเลือก(list Box)

โค้ด: เลือกทั้งหมด

<select name="Gender">
            <option value="" >--Select--</option>
            <option value=" M "> Male </option>
            <option value=" F "> Female </option>
</select>

แล้วกลับมาในส่วนของหน้า Design (ดีไซน์) จะได้ดังตัวอย่าง
3-11.png
3-11.png (129.81 KiB) เปิดดู 54 ครั้ง

เมื่อรันดู File > Preview > Google Chrome
3-14 copy.png
3-14 copy.png (10.82 KiB) เปิดดู 54 ครั้ง

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 18 และ บุคคลทั่วไป 0 ท่าน