แบบฟอร์ม HTML ใช้เพื่อรับอินพุตผู้ใช้ประเภทต่าง ๆ
2. กลไกการทำงานของแบบฟอร์ม 3. คำจำกัดความของฟอร์ม (<form> </form> แท็ก)แบบฟอร์ม HTML เป็นพื้นที่ที่มีองค์ประกอบหน่วยหน่วย แบบฟอร์มอาจรวมถึงองค์ประกอบอินพุตเช่นฟิลด์ข้อความกล่องกาเครื่องหมายกล่องเลือกเดียวปุ่มส่งและอื่น ๆ แบบฟอร์มยังสามารถมีเมนู, textarea, fieldset, องค์ประกอบตำนานและฉลาก โปรดทราบว่าองค์ประกอบ <form> เป็นองค์ประกอบระดับบล็อกซึ่งจะสร้างส่วนลดก่อนและหลัง
<form action = login.do method = post> <!-องค์ประกอบฟอร์มที่นี่-> </form>4. แอตทริบิวต์แบบฟอร์ม
การดำเนินการ: ดูที่ข้อมูลแบบฟอร์มถูกส่งเมื่อส่งแบบฟอร์ม การกระทำคือ: ขั้นแรก URL (URL แบบสัมบูรณ์/URL) โดยทั่วไปชี้ไปที่โปรแกรมที่เซิร์ฟเวอร์โปรแกรมจะได้รับข้อมูล (เช่นค่าองค์ประกอบของหน่วยตาราง) ที่ส่งโดยแบบฟอร์มสำหรับการประมวลผลที่สอดคล้องกัน ตัวอย่างเช่น <form action = http://www.xxx.com/login.do> เมื่อผู้ใช้ส่งแบบฟอร์มนี้เซิร์ฟเวอร์จะดำเนินการเว็บไซต์ทั่วไป http://www.xxx.com/ โปรแกรมกระบวนการทั่วไป ประการที่สองใช้ที่อยู่ URL ของ Mailto Protocol เพื่อส่งเนื้อหาแบบฟอร์มในรูปแบบของอีเมล สถานการณ์นี้หายากเพราะต้องการให้ผู้เข้าชมติดตั้งและตั้งค่าโปรแกรมการส่งจดหมายอย่างถูกต้องบนคอมพิวเตอร์ของคอมพิวเตอร์ ประการที่สามค่าที่ว่างเปล่าหากการกระทำว่างเปล่าหรือไม่ได้เขียนมันหมายถึงส่งไปยังหน้าปัจจุบัน
วิธีการ: แอตทริบิวต์นี้กำหนดวิธีที่เบราว์เซอร์ส่งข้อมูลในแบบฟอร์มไปยังโปรแกรมการประมวลผลเซิร์ฟเวอร์ เกี่ยวกับค่าของวิธีการที่ใช้กันมากที่สุดคือรับและโพสต์ ขั้นแรกให้ส่งข้อมูลแบบฟอร์มด้วยโหมด GET จำนวนข้อมูลที่ส่งโดย GET โดยทั่วไปจะถูก จำกัด ต่ำกว่า 1KB ประการที่สองการใช้วิธีการโพสต์เบราว์เซอร์จะส่งข้อมูลแบบฟอร์มเป็นส่วนหนึ่งของตัวขอ HTTP ไปยังเซิร์ฟเวอร์ โดยทั่วไปข้อมูลที่ส่งโดยวิธีการโพสต์มากกว่าจำนวนข้อมูลที่ส่งโดยวิธี GET; รับเมธอด (เช่นแบบสอบถาม) ควรใช้ ประการที่สามวิธีอื่น ๆ (หัว, ใส่, ลบ, ติดตามหรือตัวเลือก ฯลฯ ) ในความเป็นจริงมาตรฐาน HTTP เริ่มต้นระบุวิธีการที่สอดคล้องกันสำหรับการดำเนินการต่าง ๆ แต่หลายคนไม่ได้สังเกตในภายหลัง
เป้าหมาย: แอตทริบิวต์นี้ระบุผลลัพธ์ของ URL ที่ส่งคืนโดย URL ที่ระบุไว้ในแอตทริบิวต์การกระทำ ค่าคือ _blank (เปิดในหน้าต่างใหม่), _ sel (เปิดในเฟรมเวิร์กเดียวกัน, ค่าเริ่มต้น), _parent (เปิดในเฟรมหลัก), _ top (เปิดในหน้าต่างทั้งหมด) และ framename (ในที่ระบุ กรอบกรอบเปิดในประเทศจีน)
ชื่อเรื่อง: ตั้งค่าข้อความที่แสดงโดยทุ่นเล็ก ๆ เมื่อเมาส์ของผู้เข้าชมเว็บไซต์ถูกวางไว้ในตำแหน่งใด ๆ ในแบบฟอร์ม
Enctype: ระบุวิธีเข้ารหัสข้อมูลฟอร์มก่อนส่งไปยังเซิร์ฟเวอร์ ค่า: ค่าเริ่มต้นคือแอปพลิเคชัน/x-www-form-urlencoded -data: ไม่มีรหัสอักขระ เมื่อใช้แบบฟอร์มที่มีการควบคุมการอัปโหลดไฟล์จะต้องใช้ค่านี้
ชื่อ: ชื่อของแบบฟอร์ม โปรดทราบว่าความแตกต่างระหว่างแอตทริบิวต์ ID: ชื่อชื่อคือชื่อที่ใช้ในระหว่างการสื่อสารกับเซิร์ฟเวอร์ .
2. องค์ประกอบหน่วยตาราง 1. กล่องข้อความเดียว <อินพุตประเภท = ข้อความ/> (ค่าเริ่มต้นของคุณสมบัติประเภทของอินพุตคือข้อความ)<ประเภทอินพุต = ชื่อข้อความ = ชื่อ/>
ต่อไปนี้เป็นคุณลักษณะหลักของกล่องข้อความเดียว:
<ประเภทอินพุต = ชื่อรหัสผ่าน = ชื่อ/>3. ปุ่มเดี่ยว <อินพุตประเภท = วิทยุ/>
วิธีการใช้: ใช้ปุ่มเลือกเดียวที่มีชื่อเดียวกัน ค่าองค์ประกอบของปุ่มตัวเลือกถูกตั้งค่าอย่างชัดเจนโดยแอตทริบิวต์ค่า
<ประเภทอินพุต = ชื่อวิทยุ = ค่าเพศ = ชาย/> <อินพุตประเภท = ชื่อวิทยุ = ค่าเพศ = หญิง/>4. ช่องทำเครื่องหมาย <ประเภทอินพุต = ช่องทำเครื่องหมาย/>>>
ใช้กลุ่มปุ่มตรวจสอบนั่นคือชุดเช็คชุดเดียวกันที่มีชื่อเดียวกันค่าองค์ประกอบขององค์ประกอบของหน่วยตรวจสอบตารางตารางถูกตั้งค่าอย่างชัดเจนโดยแอตทริบิวต์ค่า และชื่อถูกบรรจุและส่งไปยังค่า复选框的ตรวจสอบ属性表示是否被选中， <ประเภทอินพุต = ช่องทำเครื่องหมายตรวจสอบ /> 或者 <ประเภทอินพุต = ช่องทำเครื่องหมายตรวจสอบ = ตรวจสอบ /> (推荐) ตรวจสอบ、 อ่านอย่างเดียว等这种一个可选值的属性都可以省略属性值แก่นแท้
<ประเภทอินพุต = ชื่อช่องทำเครื่องหมาย = ค่าภาษา = java/> <อินพุตประเภท = ชื่อช่องชื่อ = laanguage value = c/> <อินพุตประเภท = ชื่อช่องทำเครื่องหมาย = laanguage va lue = c#/>5. โดเมนที่ซ่อนอยู่ <ประเภทอินพุต = ซ่อน/>
โดเมนที่ซ่อนอยู่มักจะใช้เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ที่ไม่จำเป็นต้องแสดงต่อผู้ใช้
<ประเภทอินพุต = ชื่อที่ซ่อน = โดเมนที่ซ่อนอยู่/>>>6. การอัปโหลดไฟล์ <อินพุตประเภท = ไฟล์/>
ด้วยไฟล์ enctype ของฟอร์มจะต้องตั้งค่าเป็น multipart/form-data และแอตทริบิวต์วิธีการคือโพสต์
<ชื่ออินพุต = uploadedFile id = uploadedFile type = ขนาดไฟล์ = 60 accept = text/*/>7. กล่องดึง <Select> แท็ก
<Select> ฉลากสร้างกล่องรายการ <POCIL> ฉลากเพื่อสร้างรายการ <SELECT> ใช้ NESTED <POCITH> เพื่อร่วมกันจัดเตรียมชุดของตัวเลือกในชุดตัวเลือก
ตั้งค่าตัวเลือกที่จะเลือก: <ตัวเลือกที่เลือก> ปักกิ่ง </opovie> หรือ <ตัวเลือก select = selectd> Beijing </petion> (วิธีการแนะนำ) สามารถตั้งค่าเป็นรายการเลือก วิธีการไม่ให้เลือกไม่ให้เพิ่ม <ตัวเลือกค่า = -1>-ไม่เลือก-<potion> จากนั้นเขียนโปรแกรมค่าที่เลือกที่เลือกโดย SELECT IF-1 จะไม่ถูกเลือก
ตัวเลือกกลุ่มที่เลือกสามารถใช้ OptGroup เพื่อจัดกลุ่มข้อมูล
<Select> เครื่องหมายและหลายแอตทริบิวต์สามารถอนุญาตให้เลือกได้ (กดปุ่ม CTRL)
<select name = country size = 10> <optgroup label = Africa> <ตัวเลือกค่า = Gam> Gambia </petion> <ตัวเลือกค่า = Madagascar </petion> <pontion> e = nam> namibia </potion> > <optGroup label = Europe> <OPTION VALUE = FRA> FRANCE </opovie> <ตัวเลือกค่า = รัสเซีย </optup> <ตัวเลือกค่า = สหราชอาณาจักร> สหราชอาณาจักร> สหราชอาณาจักร> สหราชอาณาจักร </petion> tgroup> <optGroup label = North America> < ค่าตัวเลือก = CAN> CANADA </opovie> <ตัวเลือกค่า = mex> mexico </opovie> <ตัวเลือกค่า = USA> USA </opovie> </plct>8. ข้อความหลายบรรทัด <Textarea> </celeaa>
ข้อความหลายบรรทัด <TextArea> สร้างกล่องข้อความที่สามารถป้อนข้อความหลายบรรทัด <Textarea> ไม่มีแอตทริบิวต์ค่า <textarea> ข้อความ </textarea>, cols = 50, rows = 15 แอตทริบิวต์ระบุจำนวนแถวและคอลัมน์ ไม่ได้ระบุเบราว์เซอร์จะใช้การแสดงผลเริ่มต้น
<textarea name = textareacontent rows = 20 color = 50> เนื้อหาการแสดงผลเริ่มต้นของกล่องข้อความ multi -line </ceplarea>9. <lable> </lable> ฉลาก
คุณสามารถเขียนข้อความธรรมดาเพื่อแก้ไขก่อน <อินพุต type = text> แต่เมื่อคุณคลิกข้อความตัวดัดแปลงอินพุตจะไม่ได้รับโฟกัส แต่คุณสามารถใช้ป้ายกำกับได้ คุณ (เข้าใจ) accessKey = u คุณลักษณะอื่นของฉลาก หมายเหตุ: ในการตั้งค่า ID ที่ไม่ซ้ำกันสำหรับการควบคุมที่แก้ไข ฉันคิดว่าสองป้ายกำกับของ <label> </lable> มีประโยชน์มากสำหรับ <อินพุตประเภท = วิทยุ/> และ <อินพุตประเภท = ช่องทำเครื่องหมาย/>
<อินพุตประเภท = ชื่อวิทยุ = เพศ = ค่าชาย = 0 ตรวจสอบ = ตรวจสอบ /> <label for = male> male </aw> <ประเภทอินพุต = ชื่อวิทยุ = ค่า fmale = 1 /> <label for = fmale> หญิง </label> <อินพุตประเภท = ชื่อวิทยุ = sex id = ค่าความลับ = 2/> <label for = secret> เป็นความลับ </label>10. <FieldSet> </fieldset> ป้ายกำกับ
แท็ก FieldSet แบ่งการควบคุมในพื้นที่และดูปกติมากขึ้น
<<delgend> งานอดิเรก </legend> <อินพุตประเภท = ค่าช่องทำเครื่องหมาย = บาสเก็ตบอล/> <อินพุตประเภท = ค่ากล่องทำเครื่องหมาย = การปีนเขาบนภูเขา/<ประเภทอินพุต = ค่าช่องทำเครื่องหมาย = การอ่าน/> </f ildset>11. ปุ่มส่ง <ประเภทอินพุต = ส่ง/>
เมื่อผู้ใช้คลิกโปรแกรมการประมวลผลเซิร์ฟเวอร์ที่ระบุโดย <อินพุต Type = Submit/> ข้อมูลฟอร์มจะถูกส่งไปยังโปรแกรมการประมวลผลเซิร์ฟเวอร์ที่ระบุโดยแอตทริบิวต์การกระทำของฉลาก <Form> ข้อความปุ่มเริ่มต้นภายใต้ภาษาจีน IE คือข้อความแสดงผลของปุ่มการปรับเปลี่ยนคุณสมบัติค่า
<ประเภทอินพุต = ส่งค่า = ส่ง/>12. ปุ่มรีเซ็ต <อินพุตประเภท = รีเซ็ต/>
เมื่อผู้ใช้คลิกปุ่ม <อินพุตประเภท = รีเซ็ต/> ค่าค่าในแบบฟอร์มจะถูกรีเซ็ตเป็นค่าเริ่มต้น เมื่อผู้ใช้ส่งแบบฟอร์มชื่อและค่าของปุ่มรีเซ็ตจะไม่ถูกส่งไปยังเซิร์ฟเวอร์
<อินพุตประเภท = รีเซ็ตค่า = ปุ่มรีเซ็ต/>>>>13. ปุ่มธรรมดา <อินพุตประเภท = ปุ่ม/>
ปุ่มสามัญมักจะใช้เพื่อคลิกเพื่อเรียกใช้รหัสสคริปต์
<อินพุตประเภท = ค่าปุ่ม = ปุ่มธรรมดา/>>>>14. ปุ่มรูปภาพ <อินพุตประเภท = image/>
แอตทริบิวต์ SRC ของปุ่มรูปภาพระบุไฟล์แหล่งที่มาของภาพซึ่งไม่มีแอตทริบิวต์ค่า ปุ่มภาพสามารถแทนที่ <อินพุตประเภท = ส่ง/> และตอนนี้ยังสามารถตั้งค่าลักษณะที่ปรากฏของปุ่ม <อินพุต = ส่ง/> ไปยังรูปภาพโดยตรง
<ประเภทอินพุต = image src = bg.jpg />ประการที่สามตัวอย่างแบบฟอร์ม
ตัวอย่างนี้เป็นหน้าการลงทะเบียนอย่างง่ายที่ใช้โดยใช้แบบฟอร์มเพื่อใช้เค้าโครงแบบฟอร์ม
<html public- // w3c // dtd html 01 transitional // en http: // wwwwworg/tr/html4/loos > ตาราง {ความกว้าง: 450px; } </style> </head> <body style = พื้นหลังสี: block; โพสต์> <table align = center cellspacing = 0 cellpadding = 0> <td> ชื่อผู้ใช้: </td> <อินพุต type = text/</tr> </tr> <tr> <td> รหัสผ่าน: </td> td> <อินพุตประเภท = รหัสผ่าน/> </td> </tr> <tr>/</td> </tr> <l> <td> โปรดเลือกตลาด: </td> <d> <elect> <ptgroup label = China> <pontion> จังหวัดกานซู </petion> <pontion> มณฑลเหอหนานมณฑลเหอหนาน </petion> <petion> เซี่ยงไฮ้ </opovie> </petgroup> ตัวเลือก> <pontion> Chicago </opovie> <pontion> ข่าวเกี่ยวกับ> </optgroup> </select> </td> </tr> <td> โปรดเลือกเพศ: </td> <td> <อินพุต type = ชื่อวิทยุ = Sex ID = ค่าชาย = 0 ตรวจสอบ = ตรวจสอบ/>> <label for = male> male </lable> <อินพุตประเภท = ชื่อวิทยุ = sex id = 1/> <label for = fmale> หญิง </label > <อินพุตประเภท = ชื่อวิทยุ = Sex ID = Secret VA Lue = 2/> <label for = Secret> การรักษาความลับ </label> </td> </tr> <td> โปรดเลือกอาชีพ: </td> <อินพุต Type = Radio ID = ชื่อนักเรียน = อาชีพ /> <label for = student> นักเรียน < /label> <input type = Radio ID = ชื่อครู = อาชีพ /> <label for = teacher> ครู> <อินพุต type = Radio ID = ชื่ออื่น ๆ = อาชีพ/> <label for = อื่น ๆ > อื่น ๆ </label> </td> </tr> <td> โปรดเลือกงานอดิเรก: </td> <fieldset> <gelend> งานอดิเรกของคุณ </gend> <อินพุต type = ชื่อช่องชื่อ = Hobby ID = basketboll checkd = ตรวจสอบ /> <label for = basketboll> เล่นบาสเก็ตบอล < /label> <อินพุต type = ชื่อช่องทำเครื่องหมาย = hobb y id = run /> <label for = run> run < /label > <อินพุต type = ชื่อช่องทำเครื่องหมาย = hobby id = อ่าน /> <label for = read> อ่าน < /label> <ประเภทอินพุต = ชื่อช่องทำเครื่องหมาย = hobby id = surfing /> <label for = for fing> การเข้าถึงอินเทอร์เน็ต < /label > </fieldset> </td> </tr> <l> <td> หมายเหตุ: </td> <textarea color = 30> นี่คือเนื้อหาหมายเหตุ </textarea> </td> </tr> tr> <td> & nbsp; html>