ข้อใดถูกต้องในการสร้างช่องรับข้อมูลประเภท password

แบบทดสอบก่อนเรียน หลังเรียนเรื่องการสร้างฟอร์ม (Form)

1. การสร้างเว็บเพจที่มีการแลกเปลี่ยนข้อมูลระหว่างผู้สร้างและผู้ใช้เว็บเพจได้นั้น ต้องมีการกำหนดอะไรในการรับส่งข้อมูล

ก. การใช้เฟรม ( Frame )

ข. แบบฟอร์ม ( Form )

ค. การสร้าง List

ง. การสร้าง Background

2. คำสั่ง <Input type=”text”> เป็นการกำหนดช่องรับข้อมูลประเภทใด

ก. Password

ข. Hidden

ค. File

ง. Text

3. ถ้าต้องการปรับขนาดของช่องรับข้อมูลในเว็บเพจต้องกำหนดด้วยแอตทริบิวต์ใด

ก. Size

ข. Value

ค. Input

ง. Type

4. ข้อใดถูกต้องในการสร้างช่องรับข้อมูลประเภท Password

ก. <Input type=”text”>

ข. <Input type=”submit”>

ค.<Input type=”password”>

ง.<Input type=”reset”>

5. ถ้าต้องการกำหนดให้ช่องรับรหัสผ่านขึ้นบรรทัดใหม่ ต้องใช้แท็กใดต่อจากช่องรับข้อมูล

ประเภท Text

ก. <P>

ข. <B>

ค. <BR>

ง. <center>

6. คำสั่งแอตทริบิวต์ใดเป็นการนำรูปภาพมาใช้แทนปุ่ม Submit

ก. SRC

ข. IMAGE

ค. VALUE

ง. NAME

7. ข้อใดถูกต้องในการสร้างปุ่มสำหรับลบข้อมูล

ก. <Input type=”image “src=”button.gif”>

ข. <Input type=”button “value=”<back”>

ค. <Input type=”button “ value=”del”>

ง. <Input type=”submit “><input type=”reset”>

8. ช่องรับข้อมูลประเภท checkbox ถ้าต้องการให้ปรากฏเครื่องหมายถูกหน้าช่องโดยที่ผู้ใช้ไม่ต้องคลิกเลือก เราต้องเพิ่มแอตทริบิวต์ใด

ก. checkbox

ข. checked

ค. textarea

ง.gender

9. ถ้าต้องการปรับขนาดของช่องรับข้อมูลประเภท text area ต้องใช้คำสั่งแอตทริบิวต์ใด

ก. cols

ข. rows

ค.cols และ rows

ง. wrap

10. การแบ่งแบบฟอร์มออกเป็นส่วน ๆ ซึ่งจะมีผลทำให้เกิดกรอบสี่เหลี่ยมรอบช่องรับข้อมูล เกิดจากการใช้แท็กใด

บทที่ 7 การสร้าง Form

จุดประสงค์
1. สามารถใช้คำสั่งการสร้าง Form ได้ถูกต้อง
2. สามารถใช้คำสั่ง Form เพื่อรับข้อมูลแบบต่าง ๆ ได้

การสร้าง Form
Form หรือแบบฟอร์มเป็นรูปแบบการรับข้อมูลบนหน้าเว็บเพจที่เราคุ้นเคยกันดีไม่ว่าจะเป็น การค้นหาข้อมูลจาก Internet การ Vote แสดงความคิดเห็น การกรอกข้อมูลในการสมัคร E-mail การซื้อสินค้า Online การ Post กระทู้ ตลอดจนการกรอกแบบสอบถามต่าง ๆ ล้วนแต่เป็นการรับข้อมูลโดยการกรอกข้อมูลผ่าน Form ทั้งสิ้น เพียงแต่หน้าตาของ Form แต่ละ Form ของแต่ละ Web Site จะแตกต่างกันไปตามแต่จุดประสงค์และการออกแบบของแต่ละคน การสร้าง Form ใน HTML นั้นจะสร้างในส่วนของ Tag</BODY>
ในบทนี้จะกล่าวถึงการสร้าง Form ดังต่อไปนี้
1. การสร้างช่องรับข้อมูลชนิด Text Box
2. การสร้างช่องรับข้อมูลชนิด Password
3. การสร้างช่องรับข้อมูลชนิด Text Area
4. การสร้างช่องรับข้อมูลชนิด Check Box
5. การสร้างช่องรับข้อมูลชนิด Radio Button
6. การสร้างช่องรับข้อมูลชนิด Selection Box

7.1 การสร้างช่องรับข้อมูลชนิด Text Box

จุดประสงค์
1. สามารถใช้คำสั่งการสร้าง Form ได้ถูกต้อง
2. สามารถใช้คำสั่ง Form เพื่อการสร้างช่องรับข้อมูลชนิด Text Box ได้การสร้างช่องรับข้อมูลชนิด Text Box
ช่องรับข้อมูลชนิด Text Box คือช่องรับข้อมูลทั่ว ๆ ไปที่เราเห็นกันเป็นประจำ เช่น การรับข้อมูล ชื่อ – นามสกุล หรือข้อมูลส่วนตัวอื่น ๆ โดยจะต้องสร้างอยู่ภายใน TAG <FORM>

รูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลประเภท Text Box

ตัวอย่าง การสร้าง Form เพื่อรับข้อมูลชนิด Text Box

<HTML>
<HEAD>
<TITLE>การสร้าง Form</TITLE>
</head>
<BODY>
<H3>การสร้างช่องรับข้อมูลแบบ Text Box</H3>
<FORM NAME=”INPUT”>
ชื่อ : <INPUT TYPE=”TEXT” NAME=”fname” size=25 maxlenght=25><br>
นามสกุล : <input type=”text” name=”lname” size=30 maxlenght=25><br>
โทรศัพท์ : <input type=”text” name=”telephone” size=10 maxlenght=8><br>
</form>
</BODY>
</HTME>

ผลลัพธ์ที่ได้

7.2 การสร้างช่องรับข้อมูลชนิด Password

จุดประสงค์
1. สามารถใช้คำสั่งการสร้าง Form ได้ถูกต้อง
2. สามารถใช้คำสั่ง Form เพื่อการสร้างช่องรับข้อมูลชนิด Password ได้การสร้างช่องรับข้อมูลชนิด Password
เราจะเห็นว่าช่องรับข้อมูลชนิด Password ได้จากเวลาที่ Log in เข้า E-mail หรือเข้าระบบต่าง ๆ
โดยช่องกำหนดให้เป็นช่องรับข้อมูลชนิด Password เมื่อคีย์ข้อมูลเข้าไปในช่องแล้ว เราจะมองเห็นเป็นเครื่องหมาย *
จะไม่สามารถมองเห็นข้อมูลจริง ๆ ที่เราคีย์เข้าไปได้
รูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Password

ตัวอย่างโปรแกรม การสร้าง Form เพื่อรับข้อมูลชนิด Password
<HTML>
<HEAD><TITLE>การสร้าง Form</TITLE></HEAD>
<BODY>
<H3>การสร้างช่องรับข้อมูลแบบ Pass Word</H3>
<FORM NAME=”INPUT”>
รหัสผู้ใช้ : <INPUT TYPE=”TEXT” NAME=”fname” size=20 maxlenght=8><br>
รหัสผ่าน : <INPUT TYPE =”Password” name=”lname” size=10 maxlenght=8><br>
</form>
</BODY>
</HTML>
ผลลัพธ์ที่ได้

7.3 การสร้างช่องรับข้อมูลประเภท Text Area

จุดประสงค์
1. สามารถใช้คำสั่งการสร้าง Form ได้ถูกต้อง
2. สามารถใช้คำสั่ง Form เพื่อการสร้างช่องรับข้อมูลประเภท Text Areaการสร้างช่องรับข้อมูลชนิด Text Area
ช่องรับข้อมูลชนิด Text Area เป็นการรับข้อมูลที่มีความยาวมาก ๆ ส่วนใหญ่จะใช้กับข้อมูลที่เป็นการแสดงความคิดเห็น (Comment)
หรือจะเห็นได้บ่อย ๆ ในการับข้อมูลจากกระดานถาม – ตอบหรือกระทู้ต่าง ๆ

รูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Text Area

<TEXTAREA NAME =”ชื่อของ Text Area”
COLS=”จำนวนตัวอักษรในแต่ละแถว”
ROW=”จำนวนแถว”>ข้อความ
</TEXTAREA>

ตัวอย่างโปรแกรม การสร้าง Form เพื่อรับข้อมูลชนิด Text Area

<HTML>
<HEAD><TITLE>การสร้าง Form</TITLE></HEAD>
<BODY>
<H3>การสร้างช่องรับข้อมูลแบบ Text Area </H3>
<FORM NAME=”INPUT”>กรอกความคิดเห็น : <p>
<textarea name=”comment” cols=40 row=10></textarea>
</form>
</BODY>
</HTML>

ผลลัพธ์ที่ได้

7.4 การสร้างช่องรับข้อมูลประเภท Check Box

จุดประสงค์
1. สามารถใช้คำสั่งการสร้าง Form ได้ถูกต้อง
2. สามารถใช้คำสั่ง Form เพื่อการสร้างช่องรับข้อมูลประเภท Check Boxการสร้างช่องรับข้อมูลชนิด Check Box
Check box เป็นการรับข้อมูลจากการให้คลิกเลือกข้อมูลที่กำหนดมาให้ โดยสามารถเลือกได้มากกว่าหนึ่งหัวข้อ check box จะนิยมนำมาใช้กับการรับข้อมูลชนิดที่สามารถเลือกได้หลายข้อ เช่น เลือกโปรแกรมที่นักเรียนต้องการเรียน อาหารที่ชอบ
วิชาที่ชอบเรียนมากที่สุด เป็นต้น

รูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Check Box

ตัวอย่าง การสร้าง Form เพื่อรับข้อมูลชนิด Check Box
<HTML>
<HEAD><TITLE>การสร้าง Form</TITLE></HEAD>
<BODY>
<H3>การสร้างช่องรับข้อมูลแบบ Check Box </H3>
<FORM NAME=”INPUT”>กีฬาที่คุณชอบเล่นมากที่สุด (เลือกได้มากกว่า 1) : <p>
<input type =”checkbox” name=”sport” value=”1″>บาสเกตบอล<br>
<input type =”checkbox” name=”sport” value=”2″>วอลเล่บอล<br>
<input type =”checkbox” name=”sport” value=”3″>แฮนด์บอล<br>
<input type =”checkbox” name=”sport” value=”4″>ฟุตบอล<br>
<input type =”checkbox” name=”sport” value=”5″>ว่ายน้ำ<br>
<input type =”checkbox” name=”sport” value=”6″>วิ่ง<br>
<input type =”checkbox” name=”sport” value=”7″>แบดมินตัน<br>
<input type =”checkbox” name=”sport” value=”8″>กอล์ฟ<br>
</FORM>
</BODY>
</HTML>

ผลลัพธ์ที่ได้

7.5 การสร้างช่องรับข้อมูลประเภท Radio Button

จุดประสงค์
1. สามารถใช้คำสั่งการสร้าง Form ได้ถูกต้อง
2. สามารถใช้คำสั่ง Form เพื่อการสร้างช่องรับข้อมูลประเภท Radio Buttonการสร้างช่องรับข้อมูลชนิด Radio Button
การสร้างช่องรับข้อมูลชนิด Radio Button เป็นการรับข้อมูลจากหัวข้อที่กำหนดมาให้ โดยสามารถเลือกได้เพียงหัวข้อเดียวเท่านั้น จะใช้ข้อมูลประเภทให้เลือก เพศ ช่วงอายุ วุฒิการศึกษาสูงสุด เงินเดือน อาชีพ เป็นต้น
รูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Radio Button

ตัวอย่าง การสร้าง Form เพื่อรับข้อมูลชนิด Radio Button
<HTML>
<HEAD><TITLE>การสร้าง Form</TITLE></HEAD>
<BODY>
<H3>การสร้างช่องรับข้อมูลแบบ radio Button </H3>
<FORM NAME=”INPUT”>กีฬาที่คุณชอบเล่นมากที่่สุด (เลือกได้มากกว่า 1) : <p>
<input type = “radio” name=”arche” value=”1″>บาสเกตบอล<br>
<input type = “radio” name=”arche” value=”2″>ฟุตบอล<br>
<input type = “radio” name= “arche” value=”3″>แฮนด์บอล<br>
<input type = “radio” name= “arche” value=”4″>แชร์บอล<br>
<input type = “radio” name= “arche” value=”5″>ว่ายน้ำ<br>
<input type = “radio” name= “arche” value=”6″>วิ่ง<br>
</FORM>
</BODY>
</HTML>
ผลลัพธ์ที่ได้

7.6 การสร้างช่องรับข้อมูลประเภท Selection Box

จุดประสงค์
1. สามารถใช้คำสั่งการสร้าง Form ได้ถูกต้อง
2. สามารถใช้คำสั่ง Form เพื่อการสร้างช่องรับข้อมูลประเภท Selection Box ได้การสร้างช่องรับข้อมูลประเภท Selection Box
การสร้าง Selection Box หรือ Drop Down List หรือ List Box คือการรับข้อมูลจาก List รายการที่มีให้เลือกโดยสามารถเลือกได้เพียงแค่หนึ่งรายการ จะใช้กรณีที่มีรายการให้เลือกมาก ๆ เช่น ประเทศที่เกิด หรือจังหวัดที่เป็นภูมิลำเนาเป็นต้น ทั้งนี้เพื่อประหยัดเนื้อที่ในการแสดงข้อมูล เพราะเราสามารถกำหนดจำนวนบรรทัด ในการแสดง Selection Box ได้

รูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลประเภท Selection Box

<SELECT NAME =”Selection Box”
SIZE=”จำนวนรายการ”>
<OPTION VALUE=”ค่าของรายการที่ 1″>รายการที่ 1
</OPTION>
…
</SELECT>

ตัวอย่าง การสร้าง Form เพื่อรับข้อมูลชนิด Selection Box
<HTML>
<HEAD><TITLE>การสร้าง Form</TITLE></HEAD>
<BODY>
<H3>การสร้างช่องรับข้อมูลแบบ Selection Box</H3>
<FORM NAME=”INPUT”><b>เลือกคณะวิชาที่ต้องการศึกษาต่อ</b><br>
<select name=”list” size=”1″>
<option value=”1″>วิศวกรรมศาสตร์<br>
<option value=”2″>แพทย์ศาสตร์<br>
<option value=”3″>นิเทศศาสตร์<br>
<option value=”4″>บริหารธุรกิจ<br>
<option value=”5″>นิติศาสตร์<br>
<option value=”6″>ครุศาสตร์<br>
<option value=”7″>รัฐศาสตร์<br>
</select>
</FORM>
</BODY>
</HTML>

ผลลัพธ์ที่ได้