วิชาการ พัฒนางานบน เว็บ (Web Programming)

วิชาการพัฒนางานบนเว็บ(Web Programming) การสร้างฟอร์ม การสร้างปุ่มแบบต่างๆ

คำสั่งที่ใช้ในการสร้างฟอร์มคำสั่งที่ใช้ในการสร้างฟอร์ม • < FORM >….</FORM> คำสั่งสร้างฟอร์ม • <INPUT> คำสั่งสร้างฟอร์มแบบรับข้อมูล • <TEXTAREA>…</ TEXTAREA > คำสั่งสร้างฟอร์มชนิดกรอกข้อมูล • <SELECT>…</ SELECT > คำสั่งสร้างฟอร์มแบบรายการ • <BUTTON>…</BUTTON> คำสั่งสร้างปุ่ม

คำสั่งการสร้างฟอร์มด้วย <TEXTAREA> • name=“…” , ตั้งชื่อฟอร์ม • rows=“…” , กำหนดจำนวนแถว หน่วยเป็นตัวอักษร • cols=“…” , กำหนดจำนวนคอลัมน์ หน่วยเป็นตัวอักษร • wrap=“…”, ใช้สำหรับตัดคำ (physical, virtual)

ตัวอย่างการสร้างฟอร์มด้วย <TEXTAREA> <html> <head><title>TEXTAREA</title></head> <body> <form> Enter your comment.<br> <textarea name=“comment” rows=“10” cols=“50”> </textarea> </form> </body></html> EX4-1

คำสั่งการสร้างรายการด้วย <SELECT> • < SELECT >….</SELECT> คำสั่งสร้างรายการ • <OPTION>…</OPTION> คำสั่งสร้างตัวเลือก • <OPTGROUP>…</OPTGROUP> คำสั่งสร้างกลุ่มตัวเลือก • name=“…” , ตั้งชื่อฟอร์ม (ภายในคำสั่ง <SELECT>) • value=“…” , การตั้งค่าตัวเลือก (ภายในคำสั่ง <OPTION>) • selected , กำหนดตัวเลือกเริ่มต้น • size=“…”, กำหนดบรรทัดที่ให้แสดงตัวเลือก หน่วยเป็นบรรทัด • label=“…”, ชื่อกลุ่มใช้เมื่อมีคำสั่ง <OPTGROUP> • multiple, สามารถเลือกได้หลายตัวเลือก

ตัวอย่างการสร้างรายการด้วย <SELECT> (1) <html> <head><title>SELECT</title></head> <body> <form> Select your Faculty. <select name=“faculty”> <option>Account</option> <option>Business</option> <option>Science</option> <option>Engineer</option> </select> </form> </body></html> EX4-2

ตัวอย่างการสร้างรายการด้วย <SELECT> (2) <html> <head><title>SELECT</title></head> <body> <form> Select your Major. <select name=“major”> <optgroup label=“Science”> <option>Computer</option> <option>Math</option> </optgroup> </select> </form> </body></html> EX4-3

การจัดแบ่งฟอร์ม • < FIELDSET>….</FIELDSET> กลุ่มของข้อมูลที่ต้องแบ่ง • <LEGEND>…</LEGEND> ชื่อกลุ่มข้อมูล • <LABEL>…</LABEL> ชื่อชุดข้อมูล

ตัวอย่างการแบ่งฟอร์ม <form> <fieldset> <legend>Profile</legend> <label>Name:<input type=“text”></label> <label>Surname:<input type=“text”></label> <label>Sex:Male<input type=“radio” name=“sex”> Female<input type=“radio” name=“sex”> </label> <label>Address:<br><textarea cols=“50” rows=“20”></textarea></label> </fieldset> </form> EX4-4

คำสั่งการสร้างเส้นกรอบจากคำสั่ง FILEDSET • <fieldset style="border:10px ridge #00ffff;padding:20;"> • border:10px ขนาดของขอบ • ridge ลักษณะเส้น (ex:ridge, solid, inset, etc.) • #00ffff; รหัสสี • padding:20; ขนาดความห่างกับขอบ

ตัวอย่างการแบ่งฟอร์ม <html> <body bgcolor="gray" text="black"> <form> <fieldset style="border:10px ridge #00ffff;padding:20;">ridge</fieldset><br> <fieldset style="border:10px solid #00ffff; padding:20;">solid</fieldset><br> </form> </body> </html> EX4-5

การสร้างปุ่มด้วยคำสั่ง <INPUT> • type=“button” , กำหนดให้เป็นแบบปุ่ม • value=“…”, กำหนดชื่อปุ่ม • ใส่คำสั่ง script • ตัวอย่างคำสั่ง onclick=“alert(‘Hello, How are you?’)”

ตัวอย่างการสร้างปุ่มด้วยคำสั่ง <INPUT> <html> <head><title>SELECT</title></head> <body> <form> Click a button!! <input type=“button” value=“Click me” onclick=“alert(‘Hello, How r u’)”> </form> </body></html> EX4-6

การสร้างปุ่มด้วยรูปภาพการสร้างปุ่มด้วยรูปภาพ • ใช้คำสั่ง < INPUT> • type=“image” • ระบุตำแหน่งที่จัดเก็บภาพด้วยคำสั่ง src=“…” • ใส่คำสั่งควบคุมให้รูปภาพคลิกได้และทำงานเหมือนปุ่ม submit ,reset • onclick=“alert(‘Click cancel button’)” • เขียนคำสั่งได้ดังนี้ • <input type=“image” src=“bt1.jpg” onclick=“alert(‘Click cancel button’)” >

ตัวอย่างการสร้างปุ่มด้วยรูปภาพตัวอย่างการสร้างปุ่มด้วยรูปภาพ <form> Name:<input type=“text” name=“name” size=“20”><br> Lastname:<input type=“text” name=“last” size=“20”><br> <input type=“image” src=“bt1.jpg” onclick=“alert(‘Click submit button’)” > <input type=“image” src=“bt2.jpg” onclick=“alert(‘Click cancel button’)” > </form> EX4-6

การสร้างปุ่มแบบ Rollover • เป็นการเปลี่ยนรูปปุ่มให้มีการตอบสนองมากขึ้น • โดยการสลับภาพปุ่มที่ต่างกันสองสถานะ • จะต้องกำหนดลงในคำสั่ง <a>…</a> • ใช้คำสั่ง onmouseover • กำหนด id ให้กับรูปเพื่ออ้างอิงถึง • ตัวอย่างคำสั่ง <a href=“www.rc.th” onmouseover=“bt.src=‘bt2.jpg’”> <img src=“bt1.jpg” id=“bt”> </a>

ตัวอย่างการสร้างปุ่มแบบ Rollover <html> <head><title>Button</title></head> <body> <a href=“www.rc.th” onmouseover=“bt.src=‘bt2.jpg’”> <imgsrc=“bt1.jpg” id=“bt”> </a> </body></html> EX4-6

แบบฝึกหัดการแบ่งฟอร์มแบบฝึกหัดการแบ่งฟอร์ม • ให้นำฟอร์มสมัครสมาชิกจากคราวที่แล้ว หรือสร้างขึ้นใหม่ • นำจัดแบ่งเป็นส่วนตามความเหมาะสม เพื่อความสวยงาม • ดังตัวอย่างนี้

วิชาการ พัฒนางานบน เว็บ (Web Programming)