html5 custom form_motor โหนด Java College Finishing

มีกล่องอินพุตและปุ่มที่แตกต่างกันใน HTML5 และแอตทริบิวต์

Type เป็นข้อความที่องค์ประกอบอินพุตเป็นกล่องข้อความเดียวซึ่งเป็นการรวมตัวเริ่มต้นขององค์ประกอบอินพุต กล่องอินพุตข้อความเดียวที่รองรับการตั้งค่าแอตทริบิวต์ต่อไปนี้

แอตทริบิวต์ MaxLength ตั้งค่าจำนวนอักขระสูงสุดที่ผู้ใช้สามารถป้อนได้

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <อินพุต maxlenth = 10 id = name name = name/> </p> </p> p > <label for = city> city: <อินพุตขนาด = 10 id = ชื่อเมือง = เมือง/> </p> <p> <label for = fave> ผลไม้: <อินพุตขนาด = 10 maxlenth = 10 10 id = ชื่อ fave = fave/> </label> </p> <button type = ส่ง> ส่งโหวต </button> </form>

แอตทริบิวต์ค่าสามารถระบุค่าเริ่มต้นสำหรับกล่องอินพุต;

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <อินพุต placeholder = ชื่อชื่อของคุณ = ชื่อชื่อ/> </p> <p> <p> <label for = city> city: <อินพุต placeholder = ที่ที่คุณอยู่ id = ชื่อเมือง = เมือง/> </p> <p> <label for = fave> fave> <ค่าอินพุต = Apple ID = ชื่อ fave = fave/ > </label> </p> <button type = ส่ง> ส่งโหวต </button> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

เมื่อรีเซ็ตแบบฟอร์มด้วยองค์ประกอบปุ่มเบราว์เซอร์จะกู้คืนพรอมต์ตำแหน่งและค่าเริ่มต้นในกล่องข้อความ

แอตทริบิวต์รายการสามารถตั้งค่าเป็นค่าแอตทริบิวต์ ID ขององค์ประกอบข้อมูลเพื่อให้ผู้ใช้สามารถเลือกในรายการที่ระบุโดยองค์ประกอบข้อมูล องค์ประกอบ Datalist ถูกเพิ่มเข้ามาใหม่ใน HTML5 เพื่อให้ชุดของค่าเพื่อช่วยให้ผู้ใช้ป้อนข้อมูลที่ต้องการ

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <อินพุต placeholder = ชื่อชื่อของคุณ = ชื่อชื่อ/> </p> <p> <p> <label for = city> city: <อินพุต placeholder = ที่ที่คุณอยู่ id = ชื่อเมือง = เมือง/> </p> <p> <label for = fave> st id = fave name = fave/> </lable> </label> /p> <button type = ส่ง> ส่งโหวต </button> </porm> <datalist id = fruitlist> <ค่าตัวเลือก = แอปเปิ้ล label = น่ารัก A PPLES/> <ตัวเลือกค่า = ส้ม> ส้มรีเฟรช </ตัวเลือก> < ค่าตัวเลือก = เชอร์รี่/> </tatalist>

แต่ละตัวเลือกในองค์ประกอบ Datalist แสดงถึงค่าที่ผู้ใช้สามารถเลือกได้

แอตทริบิวต์แบบอ่านอย่างเดียวบ่งชี้ว่ากล่องข้อความนั้นอ่านได้เท่านั้นแอตทริบิวต์ที่ปิดการใช้งานระบุว่าไม่สามารถแก้ไขได้และมีความแตกต่างในประสิทธิภาพการปรากฏตัว

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <p> <label for = city> city: <ค่าอินพุต = boston readonly id = ชื่อเมือง = เมือง/> </p> <p> <label for = fave> ผลไม้: <ค่าอินพุต = apple id = ชื่อ fave = fave/> </label> </p> <button type = ส่ง> ส่งโหวต </button> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

ฟอร์มที่มีคุณสมบัติปิดใช้งานถูกตั้งค่าเป็นสีเทา กล่อง แต่มันไม่ส่งผลกระทบต่อผลกระทบที่ปรากฏและเนื้อหาจะถูกส่งไปยังเซิร์ฟเวอร์

องค์ประกอบอินพุตของแอตทริบิวต์ประเภทคือรหัสผ่านใช้เพื่อป้อนรหัสผ่าน องค์ประกอบอินพุตของแอตทริบิวต์นี้รองรับคุณลักษณะต่อไปนี้:

1) MaxLength: จำนวนอักขระสูงสุดที่ผู้ใช้สามารถป้อนในกล่องรหัสผ่าน;

2) รูปแบบ: ใช้เพื่อป้อนการแสดงออกปกติของการตรวจสอบ;

3) ตัวยึด: แจ้งให้ทราบถึงประเภทข้อมูลที่ต้องการ

4) READENLY: ตั้งค่ากล่องรหัสผ่านเพื่ออ่านเท่านั้น

5) จำเป็น: ผู้ใช้จะต้องป้อนค่ามิฉะนั้นจะไม่สามารถผ่านการตรวจสอบอินพุตได้

6) ขนาด: ตั้งค่าความกว้างผ่านจำนวนอักขระที่มองเห็นได้ในกล่องรหัสผ่านที่ระบุ

7) ค่า: ตั้งค่ารหัสผ่านเริ่มต้น

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/</p> <p> <p> <label = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/ </label> </p> <button type = ส่ง> ส่งโหวต </button> </form>

อักขระที่ป้อนโดยผู้ใช้จะแสดงเป็น*ในกล่องรหัสผ่าน แต่ควรสังเกตว่าเมื่อส่งแบบฟอร์มเซิร์ฟเวอร์จะได้รับรหัสผ่านที่ชัดเจน พิจารณาการใช้ SSL/HTTPS ไปยังเบราว์เซอร์และเนื้อหาการสื่อสารระหว่างเซิร์ฟเวอร์จะถูกเข้ารหัส

คุณสมบัติประเภทถูกตั้งค่าให้ส่งรีเซ็ตและปุ่มเพื่อสร้างปุ่มเช่นองค์ประกอบปุ่ม

1) ส่ง: สร้างปุ่มสำหรับการส่งแบบฟอร์ม, แอตทริบิวต์สนับสนุน: formaction, formenctype, formmethod, formtarget และ formnovalidate

2) รีเซ็ต: สร้างปุ่มของแบบฟอร์มคงที่;

3) ปุ่ม: สร้างปุ่มธรรมดาโดยไม่ต้องดำเนินการใด ๆ

ข้อความคำอธิบายของปุ่มใน 3 ถูกระบุผ่านแอตทริบิวต์ค่า

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/</p> <p> <p> <label = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/ </label> </p> <input type = submit value = ส่งคะแนนโหวต/> <อินพุต type = reset value = resype = b value = button/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

ความแตกต่างระหว่างปุ่มสร้างและการใช้องค์ประกอบปุ่มกับองค์ประกอบ anput คือหลังสามารถใช้เพื่อแสดงข้อความที่มีข้อความ อย่างไรก็ตามเนื่องจากเบราว์เซอร์แต่ละตัวมีวิธีการประมวลผลแบบเดียวกันขององค์ประกอบอินพุตและเบราว์เซอร์รุ่นเก่า (เช่น IE6) ไม่สามารถจัดการองค์ประกอบปุ่มได้อย่างถูกต้องเว็บไซต์จำนวนมากมีแนวโน้มที่จะใช้องค์ประกอบอินพุตมากขึ้น

องค์ประกอบอินพุตของแอตทริบิวต์ประเภทยอมรับค่าเท่านั้น คุณลักษณะการสนับสนุน ได้แก่ :

1) รายการ: ระบุองค์ประกอบข้อมูลที่ให้ค่าที่แนะนำในกล่องข้อความและค่าของมันคือค่า id ขององค์ประกอบข้อมูล

2) ขั้นต่ำ: ตั้งค่าขั้นต่ำ;

3) สูงสุด: ตั้งค่าสูงสุด;

4) อ่านอย่างเดียว: อ่านเท่านั้น;

5) จำเป็น: หมายความว่าผู้ใช้จะต้องป้อนค่า;

6) ขั้นตอน: ขั้นตอนของการปรับค่าขึ้นและลง;

7) ค่า: ค่าเริ่มต้นขององค์ประกอบที่ระบุ

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/</p> <p> <p> <label = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/ > </label> </p> <p> <label for = price> $ ต่อหน่วยในพื้นที่ของคุณ: <ประเภทอินพุต = number step = 1 min = 0 max = 100 value = 1 id = ชื่อราคา = ราคา/> </label> </p> <อินพุต type = submit value = ส่งคะแนนโหวต/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

การใช้องค์ประกอบอินพุตกับแอตทริบิวต์ประเภทเป็นช่วงผู้ใช้สามารถใช้เพื่อเลือกค่าตัวเลขภายในขอบเขตที่ระบุไว้ก่อน

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/</p> <p> <p> <label = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/ </label> </p> <p> <label for = price> $ ต่อหน่วยในพื้นที่ของคุณ: 1 <ประเภทอินพุต = ช่วง step = 1 นาที = 0 สูงสุด = 100 value = 1 id = ชื่อราคา = ราคา/100 </label> </p> <อินพุต type = submit value = ส่งคะแนนโหวต/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

แอตทริบิวต์ประเภทคือช่องทำเครื่องหมายเพื่อแสดงช่องทำเครื่องหมาย

1) ตรวจสอบ: จะเลือกตามค่าเริ่มต้นหรือไม่

2) จำเป็น: ระบุว่าผู้ใช้ต้องทำเครื่องหมายในช่อง

3) ค่า: ตั้งค่าข้อมูลที่ส่งไปยังเซิร์ฟเวอร์ค่าเริ่มต้น

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/</p> <p> <p> <label = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/ </label> </p> <p> <label for = veggie> คุณเป็นมังสวิรัติ: <อินพุตประเภท = ช่องทำเครื่องหมาย = veggie = veggie/> veg etarian </label> </p> <อินพุตประเภท = submit value = ส่งโหวต/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

โปรดทราบว่าเมื่อใช้ช่องทำเครื่องหมายช่องทำเครื่องหมายจะถูกส่งไปยังเซิร์ฟเวอร์เฉพาะเมื่อส่งช่องทำเครื่องหมาย

องค์ประกอบอินพุตของแอตทริบิวต์ประเภทสามารถใช้เพื่อสร้างชุดของปุ่ม -Choice เดี่ยว วิทยุแต่ละรายการแสดงถึงตัวเลือกและกลุ่มวิทยุเดียวกันใช้ชื่อเดียวกัน กลุ่มปุ่มเลือกเดียวเหมาะสำหรับฉากที่มีตัวเลือกน้อยลง

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/> </p> <p> d> โหวตสำหรับผลไม้ที่คุณชื่นชอบ </Legend> <label for = apples> <input type = ค่าตรวจสอบคลื่นวิทยุ = แอปเปิ้ล id = แอปเปิ้ลชื่อ = fave/> แอปเปิ้ล </label> <label for = ulange> <input type = radio value = Oranges id = unange name = fave/> orange </label> <label for = เชอร์รี่ > <อินพุตประเภท = ค่าคลื่นวิทยุ = เชอร์รี่ id = เชอร์รี่ชื่อ = fave/> </label> </fieldset> </p> <อินพุตประเภท = ส่งค่า = ส่งโหวต/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

พิมพ์อีเมลค่า TEL และ URL สอดคล้องกับที่อยู่อีเมลหมายเลขโทรศัพท์และ URL ตามลำดับ

1) รายการ: ระบุองค์ประกอบข้อมูลที่ให้ค่าที่แนะนำในกล่องข้อความและค่าของมันคือค่า id ขององค์ประกอบข้อมูล

2) MaxLength: จำนวนสูงสุดของอักขระอินพุต;

3) รูปแบบ: ระบุนิพจน์ทั่วไปสำหรับการตรวจสอบอินพุต

4) ตัวยึดตำแหน่ง: ระบุพรอมต์เกี่ยวกับประเภทข้อมูลที่ต้องการ

5) อ่านอย่างเดียว: อ่านกล่องข้อความและอ่านเท่านั้น

6) จำเป็น: ระบุว่าผู้ใช้จะต้องป้อนค่า;

7) ขนาด: จำนวนอักขระที่มองเห็นได้;

8) ค่า: ค่าเริ่มต้นขององค์ประกอบที่ระบุ

อีเมลยังรองรับคุณลักษณะหลายอย่างซึ่งระบุว่าสามารถยอมรับที่อยู่อีเมลหลายที่สามารถยอมรับได้

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/> </p> <p> <label = อีเมล = อีเมล> อีเมล: <อินพุตประเภท = อีเมล [email protected] id = ชื่ออีเมล = อีเมล/> </p> <p> <p> <label for = tel> โทรศัพท์: <ประเภทอินพุต = tel placeholder = (xxx) -xxx- xxxx id = tel name = tel/> </> </> Label> </p> <p> <label for = url> หน้าแรกของคุณ: <อินพุต type = url id = url name = url/> </p> <อินพุตประเภท = ส่งค่า = ส่งโหวต/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

วันที่และเวลาบางประเภทจะถูกเพิ่มลงใน HTML5 รวมถึง:

1) DateTime: รับวันที่และเวลาของโลกรวมถึงข้อมูลโซนเวลา

2) DateTime-Local: รับวันที่และเวลาในท้องถิ่นไม่รวมข้อมูลโซนเวลา

3) วันที่: รับวันที่ท้องถิ่นโดยไม่มีข้อมูลเขตเวลาและเวลา

4) เดือน: รับข้อมูลประจำปีและรายเดือนโดยไม่มีข้อมูลวันเวลาและเขตเวลา

5) เวลา: รับเวลา;

6) สัปดาห์: รับสัปดาห์ปัจจุบัน

แอตทริบิวต์เพิ่มเติมที่รองรับโดยองค์ประกอบวันที่และเวลาอินพุตรวมถึง:

1) รายการ: ระบุองค์ประกอบข้อมูลที่ให้ค่าที่แนะนำในกล่องข้อความและค่าของมันคือค่า id ขององค์ประกอบข้อมูล

2) ขั้นต่ำ: ตั้งค่าขั้นต่ำ;

3) สูงสุด: ตั้งค่าสูงสุด;

4) อ่านอย่างเดียว: อ่านเท่านั้น;

5) จำเป็น: ผู้ใช้จะต้องป้อนค่ามิฉะนั้นจะไม่สามารถผ่านการตรวจสอบอินพุตได้

6) ขั้นตอน: ขั้นตอนของการปรับค่าขึ้นและลง;

7) ค่า: ค่าเริ่มต้นขององค์ประกอบที่ระบุ

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/</p> <p> <p> <label = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/ > </label> </p> <p> <label for = lastBuy> เมื่อไหร่ที่คุณซื้อล่าสุด: <อินพุตประเภท = วันที่ id = ชื่อ lastBuy = lastBuy/> </label> </p> <อินพุตประเภท = ส่ง ค่า = ส่งโหวต/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

ในปัจจุบันกล่องอินพุตวันที่และเวลาไม่ได้รับการสนับสนุนอย่างดีในเบราว์เซอร์ส่วนใหญ่

แอตทริบิวต์ประเภทคือตัวเลือกสีและค่าสีจะแสดงในรูปแบบของอักขระ 7 ตัว: เริ่มต้นด้วย#และความก้าวหน้าสองสองสิบหกถัดไปซึ่งแสดงถึงค่าของสามสีหลักของสีแดงสีเขียวและสีน้ำเงิน เช่นค่าของสีแดงสีเขียวและสีน้ำเงินเช่นค่าของสามสีหลักของสีแดงสีเขียวและสีน้ำเงินเช่น #FF1234

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดการใช้งาน id = ชื่อ/> </p> <p> <label for สำหรับ = รหัสผ่าน> รหัสผ่าน: <อินพุตประเภท = password placeholder = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/</p> <p> <p> <label = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/ </label> </p> <p> <label for = color> สี: <อินพุตประเภท = ชื่อสี = สี/> </p> </p /แบบฟอร์ม>

ผลกระทบในโครเมี่ยมมีดังนี้:

โปรดทราบว่าเบราว์เซอร์ส่วนใหญ่ไม่ได้ให้การสนับสนุนพิเศษสำหรับองค์ประกอบอินพุตนี้

องค์ประกอบอินพุตประเภทที่ซ่อนอยู่สามารถใช้เพื่อซ่อนรายการข้อมูลและส่งไปยังเซิร์ฟเวอร์เมื่อส่งแบบฟอร์ม (โดยปกติจะใช้ฟังก์ชั่นนี้)

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // ไททัน: 8080/ฟอร์ม> <อินพุตประเภท = ชื่อที่ซ่อน = บันทึกค่า = 1234/<p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดใช้งาน ID = ชื่อ = ชื่อ/> </label> </p> <p> <label for = รหัสผ่าน> รหัสผ่าน: <อินพุต type = password placeholder = min 6 charals id = password = password/> </lab el> </p> < p> <p> <label for = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/> </p> </p> <ประเภทอินพุต = ส่งค่า = ส่งโหวต/> </form>

ปุ่มที่สร้างขึ้นโดยองค์ประกอบอินพุตประเภทภาพจะแสดงเป็นไอคอนและส่งแบบฟอร์มหลังจากคลิก คุณลักษณะการสนับสนุน ได้แก่ :

1) Alt: ระบุข้อความอธิบายองค์ประกอบซึ่งมีประโยชน์สำหรับผู้ใช้ที่ต้องการใช้เทคโนโลยีความช่วยเหลือที่ปิดใช้งาน

2) การสร้าง: องค์ประกอบปุ่มเดียวกัน;

3) Formeenctype: องค์ประกอบปุ่มเดียวกัน;

4) FormMethod: องค์ประกอบปุ่มเดียวกัน;

5) FormTarget: องค์ประกอบปุ่มเดียวกัน;

6) FormNovalidate: องค์ประกอบปุ่มเดียวกัน;

7) ความสูง: ตั้งค่าความสูงของภาพเป็นพิกเซล

8) SRC: ระบุ URL ของภาพที่จะแสดง;

9) ความกว้าง: ตั้งค่าความกว้างของภาพในพิกเซล

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // ไททัน: 8080/ฟอร์ม> <อินพุตประเภท = ชื่อที่ซ่อน = บันทึกค่า = 1234/<p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดใช้งาน ID = ชื่อ = ชื่อ/> </label> </p> <p> <label for = รหัสผ่าน> รหัสผ่าน: <อินพุต type = password placeholder = min 6 charals id = password = password/> </lab el> </p> < p> <p> <label for = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/> </p> </p> <อินพุตประเภท = image src = accept.png name = submit/> < /รูปร่าง "

คลิกที่ปุ่มรูปภาพเพื่อส่งแบบฟอร์ม

องค์ประกอบอินพุตประเภทไฟล์ใช้เพื่ออัปโหลดไฟล์และไฟล์สามารถอัปโหลดไปยังเซิร์ฟเวอร์เมื่อส่งแบบฟอร์ม คุณลักษณะการสนับสนุน ได้แก่ :

1) ยอมรับ: ระบุประเภทของการยอมรับ คำจำกัดความของประเภท MIME อ้างถึง RFC 2046 (http://tools.ies.org/html/rfc2046);

2) หลาย: ตั้งค่าแอตทริบิวต์นี้เพื่ออัปโหลดหลายไฟล์ในครั้งเดียว

3) จำเป็น: ผู้ใช้จะต้องป้อนค่า

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม enctype = multipart/form-data> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดใช้งาน ID = NAME ME = NAME/> </label> </p> <p> <label for = password> รหัสผ่าน: <อินพุตประเภท = password plants = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/> </p> <p> <lab el for = fave> ผลไม้: <ค่าอินพุต = แอปเปิ้ล id = ชื่อ fave = fave/> </p> <p> <ประเภทอินพุต = ชื่อไฟล์ = filedata/> </p> <อินพุตประเภท = ส่งค่า = ส่งโหวต/> </form >

โปรดทราบว่าสามารถอัปโหลดประเภทรหัสฟอร์มได้เมื่อสามารถอัปโหลดแบบหลายส่วน/ฟอร์ม-ข้อมูลได้ ผลกระทบในโครเมี่ยมมีดังนี้:

องค์ประกอบ SELET ใช้เพื่อสร้างรายการตัวเลือกซึ่งมีขนาดกะทัดรัดมากกว่าองค์ประกอบอินพุตประเภท RadiiiiObutton และเหมาะสำหรับสถานการณ์ที่มีตัวเลือกมากขึ้น แอตทริบิวต์ที่รองรับโดยองค์ประกอบนี้รวมถึง:

1) ชื่อ: ชื่อของรายการ;

2) ปิดใช้งาน: ปิดใช้งานรายการดรอปดาวน์;

3) แบบฟอร์ม: หนึ่งหรือมากกว่าหนึ่งรูปแบบที่เป็นของพื้นที่ข้อความ;

4) ออโต้โฟกัส: พื้นที่ข้อความจะได้รับโฟกัสโดยอัตโนมัติหลังจากโหลดหน้าเว็บ;

5) จำเป็น: ต้องกรอก;

6) ขนาด: จำนวนตัวเลือกสามารถเห็นได้ในรายการ drop -down;

7) หลาย: คุณสามารถเลือกหลายตัวเลือก

เลือกองค์ประกอบค่าเริ่มต้นคือรายการดรอปเลกต์เดี่ยว

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม enctype = multipart/form-data> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดใช้งาน ID = NAME ME = NAME/> </label> </p> <p> <label for = password> รหัสผ่าน: <อินพุตประเภท = password plants = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/> </p> <p> <lab el for = fave> ผลไม้ที่ชื่นชอบ: <เลือก id = name fave = fave> <ตัวเลือก Valu = แอปเปิ้ลที่เลือกป้ายกำกับ = แอปเปิ้ล> แอปเปิ้ล </optup> <ตัวเลือกค่า = Orange = Orange> Oranges </opovie> <ตัวเลือกค่า = Cherries label = เชอร์รี่> เชอร์รี่ </potion> <ค่าตัวเลือก = pears label = pears> pears> </opturf> </select> </p> <ประเภทอินพุต = ส่งค่า = ส่งโหวต/> m> m>

ผลกระทบในโครเมี่ยมมีดังนี้:

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

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม enctype = multipart/form-data> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดใช้งาน ID = NAME ME = NAME/> </label> </p> <p> <label for = password> รหัสผ่าน: <อินพุตประเภท = password plants = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/> </p> <p> <lab el for = fave> ผลไม้ที่ชื่นชอบ: <เลือก id = name fave = size fave = 5 multiple> <value optual = แอปเปิ้ล selectd label = แอปเปิ้ล> แอปเปิ้ล </optup> <ption> es label = unange> สีส้ม </opovie> = เชอร์รี่> เชอร์รี่ </opovie> <ตัวเลือกค่า = pears label = pears> pears </optup> </select> </p> <ประเภทอินพุต = ส่งค่า = ส่งโหวต/> </form>

กดปุ่ม CTRL เมื่อคุณคลิกตัวเลือกเพื่อเลือกหลายตัวเลือก ผลกระทบในโครเมี่ยมมีดังนี้:

องค์ประกอบ OptGroup สามารถใช้เพื่อสร้างโครงสร้างที่แน่นอนในเนื้อหาขององค์ประกอบที่เลือก

1) ฉลาก: มันถูกใช้เพื่อให้ชื่อเล็ก ๆ สำหรับชุดตัวเลือกทั้งหมด;

2) ปิดการใช้งาน: ตัวเลือกใด ๆ ในกลุ่มในกลุ่ม

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม enctype = multipart/form-data> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดใช้งาน ID = NAME ME = NAME/> </label> </p> <p> <label for = password> รหัสผ่าน: <อินพุตประเภท = password plants = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/> </p> <p> <lab el for = fave> ผลไม้ที่ชื่นชอบ: <เลือก id = name fave = fave> <optgroup label = ตัวเลือกด้านบน> <ตัวเลือก Valu = แอปเปิ้ลที่เลือกป้ายกำกับ = แอปเปิ้ล> แอปเปิ้ล </optup> ion valu = oranges label = Oranges> Orange </petion> </optgroup > <optGroup label = อื่น ๆ > <opption valu = Cherries label = เชอร์รี่> เชอร์รี่ </opovie> <ตัวเลือกค่า = pears label = pears> pears </petion> tgroup> </select> </label> </p> ประเภทอินพุต = ส่งค่า = ส่งโหวต/> </form>

ผลกระทบในโครเมี่ยมมีดังนี้:

องค์ประกอบ OptGroup มีบทบาทเฉพาะขององค์กรเท่านั้นและผู้ใช้ไม่สามารถเลือกเป็นตัวเลือกได้

องค์ประกอบ Textarea สร้างกล่องข้อความหลายบรรทัดและผู้ใช้สามารถป้อนข้อความหลายบรรทัดในนั้น รวมถึงคุณลักษณะรวมถึง:

1) ออโต้โฟกัส: พื้นที่ข้อความจะได้รับโฟกัสโดยอัตโนมัติหลังจากโหลดหน้าเว็บ;

2) Cols: ความกว้างที่มองเห็นได้, จำนวนเต็ม;

3) ปิดการใช้งาน: ปิดการใช้งานพื้นที่ข้อความนี้

4) แบบฟอร์ม: หนึ่งหรือมากกว่าหนึ่งรูปแบบที่เป็นของพื้นที่ข้อความ;

5) MaxLength: จำนวนอักขระสูงสุดในพื้นที่ข้อความ;

6) ชื่อ: ชื่อของพื้นที่ข้อความ;

7) ตัวยึด: การเตือนความจำสั้น ๆ เกี่ยวกับมูลค่าที่คาดหวังของพื้นที่ข้อความ

8) อ่านอย่างง่าย: พื้นที่ข้อความถูกอ่านเท่านั้น

9) จำเป็น: จำเป็นต้องมีพื้นที่ข้อความ

10) แถว: จำนวนเส้นที่มองเห็นได้ในพื้นที่ข้อความจำนวนเต็ม;

11) Wrap: วิธีการเปลี่ยนข้อความในพื้นที่ข้อความรวมถึง: Soft (ค่าเริ่มต้น) เมื่อส่งแบบฟอร์มข้อความในพื้นที่ข้อความจะไม่เปลี่ยนแปลง

 <รูปแบบวิธีการ = โพสต์การกระทำ = http: // titan: 8080/ฟอร์ม enctype = multipart/form-data> <p> <label for = name> ชื่อ: <ค่าอินพุต = Adam ปิดใช้งาน ID = NAME ME = NAME/> </label> </p> <p> <label for = password> รหัสผ่าน: <อินพุตประเภท = password plants = min 6 อักขระ = ชื่อรหัสผ่าน = รหัสผ่าน/> </p> <p> <lab el for = fave> ผลไม้ที่ชื่นชอบ: <เลือก id = name fave = fave> <optgroup label = ตัวเลือกด้านบน> <ตัวเลือก Valu = แอปเปิ้ลที่เลือกป้ายกำกับ = แอปเปิ้ล> แอปเปิ้ล </optup> ion valu = oranges label = Oranges> Orange </petion> </optgroup > <optGroup label = อื่น ๆ > <opption valu = Cherries label = เชอร์รี่> เชอร์รี่ </opovie> <ตัวเลือกค่า = pears label = pears> pears </petion> tgroup> </select> </label> </p> p> <textarea cols = 20 rows = 5 wrap = hard id = ชื่อเรื่อง = เรื่องราว> บอกเราว่าทำไมนี่จึงเป็นที่โปรดปรานของคุณ </textarea> </p> <ประเภทอินพุต = ส่ง va lue = ส่งโหวต/> </form >

ผลกระทบในโครเมี่ยมมีดังนี้:

องค์ประกอบเอาต์พุตแสดงถึงผลลัพธ์ของการคำนวณ คุณลักษณะการสนับสนุน ได้แก่ :

1) สำหรับ: องค์ประกอบอย่างน้อยหนึ่งอย่างที่เกี่ยวข้องกับโดเมนเอาต์พุตแยกออกจากกันในพื้นที่กลาง

2) แบบฟอร์ม: หนึ่งหรือมากกว่าหนึ่งรูปแบบของฟิลด์อินพุต;

3) ชื่อ: ชื่อของวัตถุเท่านั้น (ใช้เมื่อส่งแบบฟอร์ม)

 <form onsubmit = return false onput = res.value = quant.valueasnumber * price.valueasnumber> <fieldset> <galend> ราคาเครื่องคิดเลข </legend> t type = number placeholder = ปริมาณ id = quant name = quant/> <ประเภทอินพุต = หมายเลข placeholder = id ราคา = ชื่อราคา = ราคา/> = <เอาท์พุทสำหรับ = ชื่อชื่อชื่อ = res/> </form>

ระบบเวลาของ JavaScript ใช้เพื่อสร้างเครื่องคิดเลขอย่างง่าย

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้