मैं संपूर्ण HTML फॉर्म "आसानी से" कैसे बना सकता हूं?

Question

मेरे पास HTML फॉर्म वाले दो पेज हैं। पहले पृष्ठ में एक प्रस्तुत फ़ॉर्म है, और दूसरे पृष्ठ में एक पावती फ़ॉर्म है। पहला रूप कई नियंत्रणों का विकल्प प्रदान करता है, जबकि दूसरा पृष्ठ एक पुष्टिकरण संदेश के साथ फिर से प्रस्तुत प्रपत्र से डेटा प्रदर्शित करता है। इस दूसरे फ़ॉर्म पर सभी फ़ील्ड स्थिर होने चाहिए।

मैं जो देख सकता हूं, उससे कुछ फॉर्म कंट्रोल हो सकते हैं readonlyऔर सब कुछ हो सकता है disabled, अंतर यह है कि आप अभी भी एक रीडायोनी फील्ड में टैब कर सकते हैं।

इस क्षेत्र को फ़ील्ड में करने के बजाय पूरे फॉर्म को आसानी से / अक्षम / स्थिर के रूप में चिह्नित करने का कोई तरीका है जिससे उपयोगकर्ता किसी भी नियंत्रण को बदल नहीं सकता है?

Answer 1

इनपुट फ़ील्ड और अन्य सामान को एक में लपेटें <fieldset>और इसे disabled="disabled"विशेषता दें।

उदाहरण ( http://jsfiddle.net/7qGHN/ ):

<form>
    <fieldset disabled="disabled">
        <input type="text" name="something" placeholder="enter some text" />
        <select>
            <option value="0" disabled="disabled" selected="selected">select somethihng</option>
            <option value="1">woot</option>
            <option value="2">is</option>
            <option value="3">this</option>
        </select>
    </fieldset>
</form>

Comments

मेरे लिए सरल और बढ़िया समाधान। धन्यवाद

— डेमो

ग्राहक पक्ष के लिए सर्वश्रेष्ठ समाधान :) +1

— सिसिर

बहुत आसान है, यह अब तक का सबसे अच्छा ग्राहक पक्ष समाधान है।

— ब्रुनेकोल्हो

ध्यान दें: इसका रूप "साइड फ़ील्ड्स [वंश] के नियंत्रण को बनाने का साइड इफेक्ट है, इसके पहले वैकल्पिक <लीजेंड> तत्व के वंशज को छोड़कर ... [कोई भी] ब्राउजिंग क्लिक या फ़ोकस-संबंधी जैसे कोई भी ब्राउज़िंग ईवेंट प्राप्त नहीं करता है "( developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset )। तो किसी भी जे एस घटना श्रोताओं आप वंशज पर परिभाषित किया है हो सकता है कार्य नहीं करते।

— एरिक फ्रेश

@EricFreese केवल अक्षम स्थिति में है, जो कि आप 99% मामलों में चाहते हैं।

— होन्ज़ा कालफस ११'१us

Answer 2

readonlyउदाहरण के लिए सभी फॉर्म एलिमेंट सेट नहीं किए जा सकते हैं :

• चेक बॉक्स
• रेडियो बॉक्स
• फाइल अपलोड
• ...अधिक..

तब उचित समाधान सभी फॉर्म एलिमेंट की disabledविशेषताओं को सेट करना होगा true, क्योंकि ओपी यह नहीं disabledबताता है कि विशिष्ट "लॉक" फॉर्म को सर्वर को भेजा जाना चाहिए (जो कि विशेषता अनुमति नहीं देता है)।

एक अन्य समाधान, जो नीचे डेमो में प्रस्तुत किया गया है, वह formतत्व के शीर्ष पर एक परत रखना है जो तत्व के अंदर सभी तत्वों के साथ किसी भी बातचीत को रोक देगा form, क्योंकि उस परत को अधिक z-indexमूल्य के साथ सेट किया गया है :

डेमो:

var form = document.forms[0], // form element to be "readonly"
    btn1 = document.querySelectorAll('button')[0],
    btn2 = document.querySelectorAll('button')[1]

btn1.addEventListener('click', lockForm)
btn2.addEventListener('click', lockFormByCSS)

function lockForm(){
  btn1.classList.toggle('on');
  [].slice.call( form.elements ).forEach(function(item){
      item.disabled = !item.disabled;
  });
}

function lockFormByCSS(){
  btn2.classList.toggle('on');
  form.classList.toggle('lock');
}

form{ position:relative; } 
form.lock::before{
  content:'';
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

button.on{ color:red; }

<button type='button'>Lock / Unlock Form</button>
<button type='button'>Lock / Unlock Form (with CSS)</button>
<br><br>
<form>
  <fieldset>
    <legend>Some Form</legend>
    <input placeholder='text input'>
    <br><br>
    <input type='file'>
    <br><br>
    <textarea placeholder='textarea'></textarea>
    <br><br>
    <label><input type='checkbox'>Checkbox</label>
    <br><br>
    <label><input type='radio' name='r'>option 1</label>
    <label><input type='radio' name='r' checked>option 2</label>
    <label><input type='radio' name='r'>option 3</label>
    <br><br>
    <select>
      <option>options 1</option>
      <option>options 2</option>
      <option selected>options 3</option>
    </select>
  </fieldset>
</form>

Comments

कृपया ध्यान दें कि सीएसएस समाधान अधूरा है क्योंकि यह कीबोर्ड नेविगेशन को नहीं रोकता है।

— तानिरोल

Answer 3

आप इस फ़ंक्शन का उपयोग फ़ॉर्म को अक्षम करने के लिए कर सकते हैं:

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

यहां काम कर रहे डेमो देखें

ध्यान दें कि यह jQuery का उपयोग करता है।

Comments

+1 धन्यवाद, लेकिन मैं क्लाइंट साइड साइड सॉल्यूशंस का उपयोग नहीं कर सकता, अपडेटेड प्रश्न देखें (क्षमा करें, मेरा बुरा)

— Mawg का कहना है कि मोनिका

Answer 4

पुष्टिकरण पृष्ठ पर, सामग्री को संपादन योग्य नियंत्रण में न रखें, बस उन्हें पृष्ठ पर लिखें।

Comments

यह वास्तव में सबसे पवित्र दृष्टिकोण है। किसी उपयोगकर्ता के लिए एक अप्राप्य फ़ॉर्म प्रस्तुत न करें, या आप "Least Astonishment" प्रश्न में एक प्रविष्टि के रूप में समाप्त हो जाएंगे।

— किबिबू

कैसे? मैं एक चेकबॉक्स और इसकी चेक / नॉट-चेक की हुई स्थिति, या इसके चयनित आइटम के साथ एक रेडियो समूह कैसे प्रदर्शित कर सकता हूं?

— मावग का कहना है कि मोनिका

@Mawg शायद यह चेकबॉक्स के बिना, 'चयनित' आइटमों को सूचीबद्ध करने का विकल्प होगा। जैसे पिज्जा ऑर्डर कन्फर्मेशन: आपके द्वारा चुनी गई सभी सामग्रियों को सूचीबद्ध करें।

— marc82ch

इस मामले में नहीं, लेकिन पार्श्व सोच के एक अच्छे टुकड़े के लिए धन्यवाद जो दूसरों की मदद कर सकता है।

— मावग का कहना है कि मोनिका

Answer 5

ऐसा कोई बिल्ट-इन तरीका नहीं है, जो मुझे पता है कि ऐसा करने के लिए आपको एक कस्टम समाधान के साथ आने की आवश्यकता होगी, जो इस बात पर निर्भर करता है कि आपका फॉर्म कितना जटिल है। आपको यह पोस्ट पढ़नी चाहिए:

HTML प्रपत्रों को केवल पढ़ने के लिए परिवर्तित करें ( अपडेट करें : टूटी हुई पोस्ट लिंक, संग्रहीत लिंक )

EDIT: आपके अपडेट के आधार पर, आप इसे केवल पढ़ने के बारे में चिंतित क्यों हैं? आप इसे क्लाइंट-साइड के माध्यम से कर सकते हैं लेकिन यदि नहीं तो आपको प्रत्येक नियंत्रण में आवश्यक टैग जोड़ना होगा या डेटा को परिवर्तित करना होगा और इसे बिना किसी नियंत्रण के कच्चे पाठ के रूप में प्रदर्शित करना होगा। यदि आप इसे केवल पढ़ने के लिए बनाने का प्रयास कर रहे हैं, ताकि अगली पोस्ट अनमॉडिफ़ाइड हो जाए, तो आपको एक समस्या है क्योंकि कोई भी पोस्ट के साथ गड़बड़ी कर सकता है, जो वे चाहते हैं ताकि जब आप वास्तव में ऐसा करें तो डेटा प्राप्त करें जिसे आप बेहतर तरीके से जांच रहे हैं। फिर से यह सुनिश्चित करने के लिए कि यह वैध है।

Comments

+1 धन्यवाद, लेकिन मैं क्लाइंट साइड साइड सॉल्यूशंस का उपयोग नहीं कर सकता, अपडेटेड प्रश्न देखें (क्षमा करें, मेरा बुरा)

— Mawg का कहना है कि मोनिका

"आपके अपडेट के आधार पर, आप इसे केवल पढ़ने के बारे में क्यों चिंतित हैं? आप इसे क्लाइंट-साइड के माध्यम से कर सकते हैं" क्षमा करें, लेकिन 1) मैं इसे क्लाइंट साइड (मेरी पसंद नहीं) और 2) नहीं कर सकता यदि यह दिखता है उपयोगकर्ता की तरह वह चीजों को बदल रहा है जो उसे भ्रमित कर सकता है।

— मावग का कहना है कि मोनिका

@ अच्छी तरह से अगर यह विशुद्ध रूप से दृश्यों के लिए है, तो केवल एक चीज जिसकी मैं सिफारिश कर सकता हूं, वह है कि सभी नियंत्रण इनलाइन को उनके टेक्स्ट के समतुल्य में बदल दिया जाए या नियंत्रण में आसानी से संपत्ति जोड़ दी जाए। कोई चांदी की गोली नहीं है और मुझे समझ में आता है कि आप क्या देख रहे हैं। क्या आप उस कोड का एक स्निपेट पोस्ट कर सकते हैं जिसे आपको संशोधित करने की अनुमति है? यह जो आप के साथ काम कर रहे हैं उसके लिए एक आधार प्राप्त करने में मदद मिलेगी।

— केल्सी

सुझाव के लिए +1 धन्यवाद। मैं वास्तव में पहले कभी नहीं देखा है, लेकिन मैं 100 या 1,000 में भर दिया होगा अगर रूपों और अस्पष्ट रूप से उनमें से एक आसानी से संस्करण याद है, न केवल पाठ। शायद मुझे कुछ और भरना चाहिए और :-)

— मोग कहते हैं कि मोनिका

आश्चर्य ... 6 साल बाद लिंक अब काम नहीं कर रहा है।

— मवालिस्क

Answer 6

इसे करने के लिए पूरी तरह से आधिकारिक HTML तरीका नहीं है, लेकिन थोड़ी जावास्क्रिप्ट बहुत लंबा रास्ता तय कर सकती है। आपके द्वारा चलाए जाने वाली एक और समस्या यह है कि अक्षम फ़ील्ड POST डेटा में दिखाई नहीं देते हैं

Comments

यदि आपने पहले ही डेटा को वैरिफाई कर लिया है तो आपको इसे सर्वर साइड में सहेजने की जरूरत है। इसे आगे और पीछे ग्राहक को भेजना एक बड़ा राजभाषा सुरक्षा छेद है। यहां तक ​​कि अगर आप खेतों को फ्रीज करने के लिए css, js या html का उपयोग करते हैं, तो आप

— फायरबग के

+1 धन्यवाद, लेकिन मैं क्लाइंट साइड साइड सॉल्यूशंस का उपयोग नहीं कर सकता, अपडेटेड प्रश्न देखें (क्षमा करें, मेरा बुरा)

— Mawg का कहना है कि मोनिका

Answer 7

यह एक निर्दिष्ट तत्व में सभी इनपुट , टेक्सारैस , चयन और बटन को अक्षम करने के लिए एक आदर्श समाधान है ।

JQuery के 1.6 और इसके बाद के संस्करण के लिए :

// To fully disable elements
$('#myForm :input').prop('disabled', true); 

या

// To make elements readonly
$('#myForm :input').prop('readonly', true); 

jQuery 1.5 और नीचे :

$('#myForm :input').prop('disabled', 'disabled');

तथा

$('#myForm :input').prop('readonly', 'readonly');

Answer 8

एक और सरल तरीका है जो सभी ब्राउज़रों द्वारा समर्थित है:

HTML:

<form class="disabled">
  <input type="text" name="name" />
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <input type="checkbox" name="vegetarian">
</form>

सीएसएस:

.disabled {
  pointer-events: none;
  opacity: .4;
}

लेकिन ध्यान रखें, कि टैबिंग अभी भी इस दृष्टिकोण के साथ काम करता है और फ़ोकस वाले तत्वों को अभी भी उपयोगकर्ता द्वारा हेरफेर किया जा सकता है।

Answer 9

सभी फॉर्म आईडी का नंबर लें और JS में लूप के लिए चलाएं।

 for(id = 0; id<NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false; 

Comments

+1 धन्यवाद, लेकिन मैं क्लाइंट साइड साइड सॉल्यूशंस का उपयोग नहीं कर सकता, अपडेटेड प्रश्न देखें (क्षमा करें, मेरा बुरा)

— Mawg का कहना है कि मोनिका

Answer 10

मैं बजाय jQuery का उपयोग करेंगे:

$('#'+formID).find(':input').attr('disabled', 'disabled');

Find () बच्चों की तुलना में nth nested चाइल्ड () तक बहुत गहरा जाएगा, जो केवल तत्काल बच्चों की तलाश करता है।

Comments

धन्यवाद, मैं आपको प्रयास करने के लिए उभार दूंगा, क्योंकि आप नए हैं। लेकिन, कृपया ध्यान दें कि मैंने स्पष्ट रूप से केवल एक सर्वर साइड समाधान के लिए कहा था। उस समय मैंने केवल PHP कोडित किया था और अभी तक JS नहीं। प्रश्न के रूप में पढ़ने के लिए एक अनुकूल संकेत कुछ वास्तव में आपको इस के लिए

— नीचा दिखा

Answer 11

सबसे आसान उपाय

$('#yourform *').prop('readonly', true);

Comments

यह सच है, लेकिन यह सिर्फ कुल्हाड़ी का उदाहरण है आप अपने दूसरे चयनकर्ता को उदाहरण $ ('# your .yourclass_for_inputs') के लिए किसी भी अन्य में बदल सकते हैं। प्रो। ('आसानी से पढ़ें', सच);

— समीर रहिमे

Answer 12

आप प्रपत्र पर html अदृश्य परत जोड़ते हैं। उदाहरण के लिए

<div class="coverContainer">
<form></form>
</div>

और शैली:

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

Ofcourse उपयोगकर्ता वेब ब्राउज़र में इस परत को छिपा सकता है।