25
การสร้างแบบฟอร์ม การ ส่ง ค่า ตัว แปร

lesson1 JSP

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: lesson1 JSP

การสร้างแบบฟอร์ม

การ

ส่ง

ค่า

ตัว

แปร

Page 2: lesson1 JSP

การสร้างแบบฟอร์ม

Page 3: lesson1 JSP

การสร้างแบบฟอร์ม

รูปแบบพืน้ฐานการสร้าง Tag

ชื่อ Tag <form> ... </form>

ค าอธิบาย ใช้สร้างแบบฟอร์ม

ตัวอย่าง <form method="post" action="update.php">

<input type="text" name="panda" /> <input

type="submit" name="submit" /> </form>

Page 4: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <form method="value"> ... </form>

ค่าvalue get, post

ค าอธิบาย ใช้ก าหนดวิธีการส่งข้อมูล

ตัวอย่าง <form method="post"> ... </form>

รูปแบบพืน้ฐานการสร้าง Tag

Page 5: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <form action="value"> ... </form>

ค่าvalue ชื่อไฟล์ ( ประเภท CGI )

ค าอธิบาย ใช้ก าหนดไฟล์ที่จะรับข้อมูลไปประมวลผล

ตัวอย่าง <form action=“welcome.jsp"> ... </form>

รูปแบบพืน้ฐานการสร้าง Tag

Page 6: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input type="value" />

ค่าvalue text, password, hidden, submit, image,

reset, button, file, checkbox, radio

ค าอธิบาย ใช้ในการก าหนด ช่องรับข้อมูลประเภทต่างๆ

ตัวอย่าง <input type="text" name="panda" /> <input

type="submit" name="submit" />

รูปแบบพืน้ฐานการสร้าง Tag

Page 7: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input name="value" />

ค่าvalue ข้อความ

ค าอธิบาย ใช้ก าหนดชื่อให้กับ ช่องรับข้อมูล

ตัวอย่าง <input type="text" name="sex" /> <input

type="text" name="name" />

รูปแบบพืน้ฐานการสร้าง Tag

Page 8: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input id="value" />

ค่าvalue ข้อความ

ค าอธิบาย ใช้ก าหนด id ให้กับ ช่องรับข้อมูล

ตัวอย่าง <input type="text" name="sex" /> <input

type="text" name="name" />

รูปแบบพืน้ฐานการสร้าง Tag

Page 9: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input value="value" />

ค่าvalue ข้อความ

ค าอธิบาย ใช้ก าหนดค่าข้อมูล ให้กับช่องรับข้อมูล

ตัวอย่าง <input type="text" name="sex" value="man"

/> <input type="text" name="name"

value=“JSP" />

รูปแบบพืน้ฐานการสร้าง Tag

Page 10: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input maxlength="value" />

ค่าvalue ตัวเลข

ค าอธิบาย ใช้ก าหนดจ านวนสูงสุด ที่สามารถพิมพ์ลงไปได้

ตัวอย่าง <input type="text" name="sex"

maxlength="5" /> <input type="text"

name="name" maxlength="25" />

รูปแบบพืน้ฐานการสร้าง Tag

Page 11: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input size="value" />

ค่าvalue ตัวเลข

ค าอธิบาย ใช้ก าหนด ขนาด ของช่องรับข้อมูล

ตัวอย่าง <input type="text" name="sex" size="8" />

<input type="text" name="name" size="12"

/>

รูปแบบพืน้ฐานการสร้าง Tag

Page 12: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input src="value" />

ค่าvalue ชื่อไฟล์ภาพ

ค าอธิบาย ใช้ก าหนดรูปภาพ

ตัวอย่าง <input type="image" src="panda.gif" />

รูปแบบพืน้ฐานการสร้าง Tag

Page 13: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <input checked="value" />

ค่าvalue checked

ค าอธิบาย ใช้ก าหนดว่าให้ checkbox หรือ radio นั้น ถูกเลือก

อยู ่

ตัวอย่าง <input type="checkbox"

checked="checked" /> <input type="radio"

checked="checked" />

รูปแบบพืน้ฐานการสร้าง Tag

Page 14: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <textarea> ... </textarea>

ค าอธิบาย ใช้ในการก าหนด อุปกรณ์การรับข้อมูล แบบรับ

ข้อความได้หลายบรรทัด

ตัวอย่าง <textarea cols="30" rows="5"> ข้อความ

</textarea>

รูปแบบพืน้ฐานการสร้าง Tag

Page 15: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <select> ... </select>

ค าอธิบาย ใช้สร้างช่องรับข้อมูลแบบ dropdown

ตัวอย่าง <select name="country"> <option

value="1"> Thailand </option> <option

value="2"> England </option> </select>

รูปแบบพืน้ฐานการสร้าง Tag

Page 16: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <select name="value"> ... </select>

ค่าvalue ข้อความ

ค าอธิบาย ใช้ก าหนดชื่อช่องรับข้อมูล

ตัวอย่าง <select name="country"> ... </select>

รูปแบบพืน้ฐานการสร้าง Tag

Page 17: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <select size="value"> ... </select>

ค่าvalue ตัวเลข

ค าอธิบาย ใช้ก าหนดขนาดของ list ซึ่งเมื่อก าหนดมากกว่า 1 จะ

ท าให้ list นี้ กลายเป้น list box ( ปกติเป็นแบบ

dropdown list )

ตัวอย่าง <select size="5"> ... </select>

รูปแบบพืน้ฐานการสร้าง Tag

Page 18: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <option value="value"> ... </value>

ค่าvalue ข้อความ

ค าอธิบาย ใช้ก าหนด ค่าข้อมูล ของรายการ โดยค่าข้อมูลนี้จะ

ถูกส่งไป เมื่อมีการ submit form

ตัวอย่าง <option value="1"> Thailand </option>

<option value="2"> England </option>

รูปแบบพืน้ฐานการสร้าง Tag

Page 19: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <option selected="value"> ... </option>

ค่าvalue selected

ค าอธิบาย ใช้ก าหนดว่า รายการนั้น ถูกเลือกอยู่

ตัวอย่าง <option> Thailand </option> <option

selected="selected"> England </option>

<option> Australia </option>

รูปแบบพืน้ฐานการสร้าง Tag

Page 20: lesson1 JSP

การสร้างแบบฟอร์ม

ชื่อ Tag <label> ... </label>

ค่าvalue ใช้ก าหนด ป้ายชื่อ ให้กับ ช่องรับข้อมูล

ค าอธิบาย ใช้ก าหนด ป้ายชื่อ ให้กับ ช่องรับข้อมูล

ตัวอย่าง <label> ชื่อ : <input type="text" /> </label>

รูปแบบพืน้ฐานการสร้าง Tag

Page 21: lesson1 JSP

ตัวอย่างแบบฟอร์ม

ตัวอย่างการออกแบบ Web site

Page 22: lesson1 JSP

การส่งค่าตัวแปร

การส่งค่า Servlet

Page 23: lesson1 JSP

การส่งค่าตัวแปร

การรบัค่ามาแสดง

Page 24: lesson1 JSP

ตัวอย่างการส่งค่าตัวแปร

การรบัค่ามาแสดง

Page 25: lesson1 JSP

1. นายภาสกร อินทสิทธิ์ รหัส 5304101373

2. นางสาวกนกนวล อินขาน รหัส 5404101301

3. นายจักรกฤษณ์ โพธิ์แปลง รหัส 5404101313

4. นายประดิษฐิ์ นิลรัตน์ รหัส 5404101348

5. นายอนุสรณ์ สุนันตะ รหัส 5404101409

สาขาวิทยาการคอมพิวเตอร์ กลุ่มเรียนที่ 1

สมาชิกกลุ่ม