วันเสาร์, ธันวาคม 5

5-5 การตกแต่งแบบฟอร์ม

สวัสดีครับ
ในหัวข้อนี้นะครับ
จะเป็นการปรับ
แต่งรูปแบบของฟอร์มที่เราสร้างขึ้นมานะครับ
ซึ่งเป็นหัวข้อสุดท้ายของการปรับ
แต่งส่วนแสดงผลด้วยภาษา CSS3 นะครับ
ซึ่งในการตก
แต่งฟอร์มนะครับ
เราก็สามารถตก
แต่งได้หลายรูปแบบนะครับ
ซึ่งนักศึกษาจะได้เรียนรู้และฝึกปฎิบัติกัน
ถ้านักศึกษาพร้อมแล้วเข้าโปรแกรมใน NetBeans กันได้เลยนะครับ
เมื่อเข้ามาในโปรแกรม NetBeans แล้วนะครับ
เราก็จะมาลองสร้างฟอร์มตัวอย่างขึ้นมานะครับ
อันดับแรกก่อนนะครับ
ในลักษณะของการสร้างแบบฟอร์มก็คือจะเกี่ยวข้องกับ Tag ฟอร์มที่เราสร้างขึ้นมา
ดังนั้น
ถ้าเราต้องการเปลี่ยนสีพื้นหรือแม้
แต่ใส่รูปพื้นหลังให้กับตัวแบบฟอร์มนะครับ
เราก็สามารถทำได้ โดยเรียกใช้ CSS ของตัวอ้างอิง Tag ฟอร์มขึ้นมาก่อนนะครับ
จากนั้น เช่นอาจารย์ต้องการใส่สีพื้นอาจารย์ก็เรีบกใช้คำสั่ง Background-color นะครับ
สมมุติให้เป็นสีชมพูนะครับ
เราก็กำหนดไป จากนั้นต้องการให้แบบฟอร์มของเรานะครับ
มีความกว้างตามที่เราต้องการ เราก็จะใส่คำสั่ง Width เข้าไป สมมุติว่าอาจารย์ต้องการให้กว้างแค่ 30% ของความละเอียดหน้าจอจากนั้น Save แล้วลองรันโปรแกรม นักศึกษาก็จะเห็นว่านะครับ
แบบฟอร์มที่เราสร้างขึ้นมาก็จะมาพื้นที่อยู่แค่ 30% ตามที่เรากำหนดความกว้าง และมีสีพื้นเป็นสีชมพู ในคำสังที่เราใส่ลงไปนะครับ
คราวนี้เรามาลองกำหนดรายละเอียดปรับ
แต่งใน
แต่ละส่วนดูบ้าง เอาส่วนแรกก่อนนะครับ
ก็คือข้อความที่อยู่ในแบบฟอร์มนะครับ
นักศึกษาจะเห็นว่าข้อความที่อยู่ในแบบฟอร์มจะอยู่ ภายใต้ text label นะครับ
ซึ่งเวลาเราต้องการปรับ
แต่งเราก็จะอ้างถึง text label ตัวนี้นะครับ
ต้องการเปลี่ยนสีข้อความเราก็จะใช้คำสั่ง color สมมุติต้องการเป็นสีน้ำเงินเราก็ใช้เป็น blue เราต้องการรูปแบบตัวอักษร ก็ใช้เป็น font-family นะครับ
เป็น sans-serif ขนาดนะครับ
ก็เป็น font-Size สมมุติเอาสัก 20px นะครับ
แล้วก็ลองรันโปรแกรมดู นักศึกษาก็จะได้ข้อความที่เป็นสีน้ำเงินขึ้นมานะครับ
แล้วก็มีรูปแบบฟอร์นขนาดตามที่เราปรับ
แต่งไปเมื่อกี้นะครับ
จากนั้น
ถ้าต้องการปรับ
แต่งตัว input บ้างนะครับ
ที่เราสร้างขึ้นมา เราก็สามารถปรับ
แต่งได้เช่นกันนะครับ
โดยเวลาต้องการปรับ
แต่งตัว input นะครับ
เราก็จะอ้างถึงตัว text input ต้องการให้ input ของเรามีความกว้างเท่ากันนะครับ
เราก็เลือกเป็น Width เท่ากับสมมุติอาจารย์เอาเป็น 250px ความสูงอาจารย์เอาสัก 30px นะครับ
แล้วก็ปรับรัศมีความโค้งนะครับ
เป็น border-radius สมมุติเอาเป็น 5px นะครับ
จากนั้นก็ลองรันโปรแกรมดูก็จะเห็นว่าตัว input ของเรามีการปรับมีความกว้างความสูง แล้วก็มีการปรับตัวใน
แต่ละมุมตาม border-radius ได้แล้วนะครับ
เหลือตัวสุดท้ายนะครับ
ก็คือความคิดเห็น
ถ้าต้องการปรับช่องของการป้อนข้อมูลในความคิดเห็นนะครับ
จะเป็นการใช้ text Area นะครับ
แล้วก็พิมพ์ text Area เข้าไป เหมือนเดิมนะครับ
ความกว้างอาจารย์ต้องการให้มีความกว้างที่เท่ากัน คือ 250px นะครับ
ความสูงอาจารย์ต้องการ ให้สูงสักประมาณ 400px นะครับ
ความมนก็เหมือนเดิมนะครับ
border-radius 5px แล้วก็ลองรันโปรแกรมดู ก็จะเห็นว่าตัว text Area ถูกปรับมาแล้ว
แต่พอเราปรับ text Area แล้วเราจะเห็นว่าตัวข้างล่างตัวปุ่มบันทึกกับปุ่มยกเลิก ถูกปรับตามเพราะเป็น input เหมือนกันนะครับ

ดังนั้น
ถ้าเราต้องการปรับเฉพาะปุ่มบันทึกกับปุ่มยกเลิกนะครับ
เราก็มาเขียนคำสั่ง CSS เพิ่ม เพื่อระบุลงไปให้ชัดเจนว่าเราต้องการปรับ
แต่ input ตัวไหนเราก็พิมพ์ text input เข้าไป จากนั้นพิมพ์ type=submit นะครับ
ต้องการให้มีความกว้างแค่ 100 นะครับ
เอาสัก 120px ความสูงอาจารย์เอาสัก 40px นะครับ
จากนั้นลองใส่ border เข้าไปด้วยนะครับ
borderเป็น 3px นะครับ
สี blue เอาเป็นสี blue แล้วกันนะครับ
soild แล้วก็ลองรันโปรแกรมดูนะครับ
ก็จะเห็นว่าปุ่มบันทึกของเรา submit ถูกปรับแล้วนะครับ
คราวนี้เราก็จะไปปรับปุ่มยกเลิกกันบ้างนะครับ
ก็Copy เลย นะครับ
แล้วก็เปลี่ยนตัว type เป็น reset นะครับ
ก็จะได้ปุ่มหน้าตาที่เหมือนกัน หรือต้องการใส่สีพื้นให้กับตัวปุ่มนะครับ
เราก็ใส่เป็น Background-color นะครับ
สมมุติอาจารย์เอาเป็นสีเหลือง นะครับ
เหลืองเขียวเราก็ใส่ให้เหมือนกัน ก็จะเห็นว่าปุ่มของเราทั้งปุ่มบันทึกและยกเลิกถูกเปลี่ยนสีพื้นไปแล้วคราวนี่
ถ้าต้องการปรับระยะห่างระหว่างแบบฟอร์มนะครับ
จะเห็นว่าตอนนี้แบบฟอร์มของเรามีระยะห่างที่ติกกัน เราก็สามารถปรับ
แต่งได้โดยตัวแรกระยะห่างระหว่าง input นะครับ
เวลาเราดูระยะห่างนะครับ
เราจะใช้คำส่ง margin ในการสร้างระยะห่างระหว่างแบบฟอร์มขึ้นมา ซึ่งในการสร้าง margin ก็อยู่ที่เราสร้างระยะห่างด้านซ้ายด้านขวาด้านบนหรือด้านล่างนะครับ

ถ้าต้องการ 4 ด้านเราก็ใส่แค่ margin นะครับ

แต่…

ถ้าต้องการเฉพาะด้านเราก็จะระบุลงไป ในที่นี้อาจารย์ต้องการใส่ความห่างแค่ด้านล่างของ
แต่ละ input เราก็เลือกเป็น margin – bottom สมมุติอาจารย์เอา 3px นะครับ
แล้วเราก็ลองรันโปรเเกรม จากนั้นนักศึกษาก็จะเห็นว่ามีระยะห่างโผล่ขึ้นมาแล้วนะครับ
ใน
แต่ละ input
ถ้าต้องการระยะห่างของตัว text Area นะครับ
เราก็ใส่ได้เช่นกันก็เป็น margin – bottom นะครับ
แล้วก็ลองรันโปรแกรมดู ก็จะเห็นว่ามีระยะห่างเกิดขึ้นมาแล้ว
ถ้าต้องการปรับ
แต่งจะเห็นว่าตอนนี้ข้อความ ความคิดเห็นมันตกมาอยู่ข้างล่าง
ดังนั้น
ถ้าเราต้องการปรับ
แต่งตัวข้อความนะครับ
เราก็กลับไปที่ text label เหมือนเดิมนะครับ
ต้องการปรับตำแหน่งตามแนวตั้ง เราก็ใช้เป็น vertical-align ให้มันขึ้นไปอยู๋ข้างบนก็คือ top แล้วก็ลองรันโปรแกรมนะครับ
ก็จะเห็นว่าข้อความกลับมาอยู่ข้างบนแล้วนะครับ
เป็นยังไงกับบ้างครับ
รู้จักกับคำส่งที่ใช้ในการปรับ
แต่งการแสดงผลกันแล้วใช่มั้ยครับ
ในหัวข้อถัดไปนะครับ
จะเป็นการใช้ CSS3 ในการจัด Layout ของเนื้อหากันบ้างนะครับ
ว่าเราสามารถจัดว่างเนื้อหาโดยใช้ CSS3 ในการทำงานได้ยังไงบ้าง
ถ้านักศึกษาพร้อมแล้วคลิ้กที่หัวข้อถัดไปได้เลยนะครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *