<input> มีรูปแบบที่ดีโดยไม่มี <form> หรือไม่

225

มันถูกต้องหรือ<input>ไม่หากไม่มีมันอยู่ใน a <form>?

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

html forms input

— เกร็ก Domjan
แหล่งที่มา

@Adriano - ความคิดของฉันอย่างแน่นอน เพียงแค่เรียกใช้ผ่านและดู!

— Gabriel Hurley

1

แน่นอนว่าตัวตรวจสอบ w3cฉันควรเพิ่มไว้จริง ๆ ว่าคำอธิบายที่ว่าทำไมจะดี

— Greg Domjan

ฉันหมายถึงว่ามันอาจจะใช้ได้กับ html บางเวอร์ชัน แต่ไม่ใช่สำหรับคนอื่นและในกรณีนั้น validator นั้นเร็วกว่าการอ่านมาตรฐานมาก

— Adriano Varoli Piazza

3

ดูเพิ่มเติม: มีอันตรายหรือไม่ที่จะใช้ฟิลด์อินพุตภายนอก / ไม่มีแบบฟอร์มในหน้า HTML / Javascript?

— unor

200

<input>ไม่<form> ปรากฏว่าใช้ได้ใช่ (อย่างน้อยสำหรับ html 4.01 ให้ดูที่ส่วนท้ายของ 17.2.1):

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

— ChristopheD
แหล่งที่มา

7

เพื่อให้สามารถส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์ (Ajax กัน)

— Ludovic Kuty

5

@PhilipSmith ฉันรู้ว่าความคิดเห็นของคุณถูกเขียนมานานแล้ว แต่ทำไมคุณคิดว่าสิ่งนี้แปลกหรือไม่มีจุดหมาย เหตุใดฉันจึงต้องการสร้างแบบฟอร์มหากตัวควบคุมไม่ได้สื่อสารกับเซิร์ฟเวอร์

— adam-beck

18

"การควบคุมที่ประสบความสำเร็จ" คืออะไร?

— AlikElzin-kilaka

22

เมื่อมีการส่งแบบฟอร์มสำหรับการประมวลผลตัวควบคุมบางตัวมีชื่อของพวกเขาจับคู่กับค่าปัจจุบันของพวกเขาและคู่เหล่านี้จะถูกส่งกับแบบฟอร์ม ตัวควบคุมที่ส่งชื่อคู่ / ค่าถูกเรียกว่าตัวควบคุมที่ประสบความสำเร็จ w3c

— SantiBailors

3

@ adam-beck ตัวอย่างเช่นเว็บไซต์ AngularJS บางแห่งจัดการอินพุตดำเนินการข้อมูลและส่งไปยัง api เทมเพลต HTML สำหรับแบบฟอร์มอาจเขียนได้โดยไม่มีแท็กแบบฟอร์มใด ๆ และพวกมันสื่อสารกับเซิร์ฟเวอร์ได้ดี

— sr9yar

75

ฉันตรวจสอบสิ่งต่อไปนี้ด้วยตัวตรวจสอบความถูกต้องW3Cและมันยืนยันว่าถูกต้อง

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
</head>
<body>
  <input type='text' />
</body>
</html>

— Wai Yip Tung
แหล่งที่มา

6

อ้างอิงถึงข้อมูลจำเพาะที่เป็นปัจจุบันมากขึ้น:

HTML 5.2 - คำแนะนำ W3C (14 ธันวาคม 2560)

องค์ประกอบที่เกี่ยวข้องกับฟอร์มสามารถมีความสัมพันธ์กับ<form>องค์ประกอบซึ่งเรียกว่าเจ้าของแบบฟอร์มขององค์ประกอบ หากองค์ประกอบที่เกี่ยวข้องกับแบบฟอร์มไม่ได้เชื่อมโยงกับ<form>องค์ประกอบเจ้าของแบบฟอร์มจะกล่าวว่าเป็นโมฆะ

— เดวิด
แหล่งที่มา

4

ตาม MDN เป็นไปได้:

โปรดทราบว่าเป็นไปได้เสมอที่จะใช้วิดเจ็ตฟอร์มนอกองค์ประกอบ แต่ถ้าคุณทำเช่นนั้นวิดเจ็ตฟอร์มนั้นไม่มีส่วนเกี่ยวข้องกับฟอร์มใด ๆ วิดเจ็ตดังกล่าวสามารถใช้นอกฟอร์มได้ แต่จากนั้นคุณควรมีแผนพิเศษสำหรับวิดเจ็ตดังกล่าวเนื่องจากจะไม่ทำอะไรด้วยตนเอง คุณจะต้องปรับแต่งพฤติกรรมของพวกเขาด้วย JavaScript

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

— Adnan Faradhi
แหล่งที่มา

2

ฉันรู้ว่าคำถามนี้ค่อนข้างเก่า แต่ฉันได้สร้างหน้าการป้อนข้อมูลที่ซับซ้อนจำนวนมากโดยไม่มีแท็กฟอร์ม แม้ว่ามันจะไม่ถือว่าเป็น "มาตรฐาน" <form>โดยมากมันไม่ได้เป็นที่ไม่เหมาะสมที่จะใช้ปัจจัยการผลิตโดยไม่ต้อง โปรเจ็กต์ของฉันคืออินสแตนซ์ที่ฉันต้องการการควบคุมอย่างสมบูรณ์ในการทำงานของเพจ สามารถทำการตรวจสอบระดับหน้าและฟิลด์ (โดยใช้ JS) และ "ส่ง" ข้อมูลด้วยการโทร Ajax ฯลฯ ... อันที่จริงนี่เป็นวิธีที่ฉันต้องการในวันนี้

จำเป็นต้องใช้ JS จำนวนมาก แต่ก็ไม่ได้ยากและทำได้อย่างง่ายดายเหมือนรหัสที่ใช้ซ้ำได้

นอกจากนี้ยังมีอินสแตนซ์อื่น ๆ ที่ฉันไม่ได้ใช้แบบฟอร์มกับอินพุตเช่นหน้าเข้าสู่ระบบ

หวังว่าข้อความรับรองนี้ช่วยใครซักคน

— G-Man
แหล่งที่มา

1

ใช่คุณสามารถมีอินพุตที่ถูกต้องโดยไม่มีแบบฟอร์ม

— ไฮเซนเบิร์ก
แหล่งที่มา

14

คุณสามารถเพิ่มหลักฐานบางอย่างไว้ข้างหลัง 'ใช่' หรือการชี้แจงว่าเวอร์ชันของ HTML นี้เป็นจริงหรือไม่ ถึงกระนั้นฉันจะไม่อดใจคุณ

— Adriano Varoli Piazza

9

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

— Mattygabe

-10

แน่นอนว่าใช้

document.getElementById('your_input_id').validity.valid

เพื่อตรวจสอบความถูกต้องของฟิลด์แบบไดนามิก

— Taran
แหล่งที่มา

31

ที่มีอะไรจะทำอย่างไรกับความถูกต้องมาร์กอัปแทนมันสำหรับการตรวจสอบข้อ จำกัด API คำตอบนี้ได้อย่างไร 8 upvotes นั้นเกินกว่าฉัน

— user247702