155

এইচটিএমএল ফর্ম সহ আমার দুটি পৃষ্ঠা রয়েছে। প্রথম পৃষ্ঠায় একটি জমা ফর্ম রয়েছে এবং দ্বিতীয় পৃষ্ঠায় একটি স্বীকৃতি ফর্ম রয়েছে। প্রথম ফর্মটি অনেকগুলি নিয়ন্ত্রণের একটি পছন্দ সরবরাহ করে, যখন দ্বিতীয় পৃষ্ঠাটি একটি নিশ্চিতকরণ বার্তার সাহায্যে আবার জমা ফর্মের ডেটা প্রদর্শন করে। এই দ্বিতীয় ফর্মটিতে সমস্ত ক্ষেত্র অবশ্যই স্থির থাকতে হবে।

আমি যা দেখতে পাচ্ছি তার থেকে কিছু ফর্ম নিয়ন্ত্রণগুলি হতে পারে readonlyএবং সমস্ত কিছু হতে পারে disabled, পার্থক্যটি হ'ল আপনি এখনও পঠনযোগ্য ক্ষেত্রে ট্যাব করতে পারেন।

ক্ষেত্রের মাধ্যমে এই ক্ষেত্রটি করার পরিবর্তে পুরো ফর্মটি কেবল পঠনযোগ্য / অক্ষম / স্থিতিশীল হিসাবে চিহ্নিত করার কোনও উপায় নেই যে ব্যবহারকারী কোনও নিয়ন্ত্রণকে পরিবর্তন করতে পারে না?

html

— মাওগ বলছেন মনিকা পুনরুদ্ধার করুন
সূত্র

308

ইনপুট ক্ষেত্রগুলি এবং অন্যান্য স্টাফগুলিকে একটিতে মোড়ানো করুন <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>

স্নিপেট প্রসারিত করুন

— ক্লিমেন তুয়ার
সূত্র

2

আমার জন্য সহজ এবং গ্রেট সমাধান। ধন্যবাদ

— ডেমো

2

ক্লায়েন্ট পক্ষের জন্য সেরা সমাধান :) +1

— সিসির

1

খুব সহজ, এটি এখন পর্যন্ত সেরা ক্লায়েন্টের সাইড সলিউশন।

— brunocoelho

দ্রষ্টব্য: এটির প্রথম বিকল্প <চ্ছিক <দখল> উপাদানটির বংশধর ব্যতীত "[ক্ষেত্রসেট] বংশধরদের ফর্ম নিয়ন্ত্রণগুলি তৈরি করার পার্শ্ব প্রতিক্রিয়া রয়েছে ... [কোনও] ব্রাউজিং ইভেন্টগুলি যেমন মাউস ক্লিক বা ফোকাস-সম্পর্কিত বিষয়গুলি গ্রহণ করে না "( বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এইচটিএমএল / এলিমেট / ফিল্ডসেট )। সুতরাং যে কোনও জেএস ইভেন্ট শ্রোতারা আপনার বংশধরদের জন্য সংজ্ঞায়িত করেছেন তা কাজ করতে পারে না।

— এরিক ফ্রিজ

2

@ এরিকফ্রিজে কেবলমাত্র অক্ষম অবস্থায়, যা আপনি 99% ক্ষেত্রে চান।

— হনজা কালফাস

11

সমস্ত ফর্ম উপাদান সেট করা যায় না `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>

স্নিপেট প্রসারিত করুন

— VSync
সূত্র

1

দয়া করে নোট করুন যে সিএসএস সমাধানটি অসম্পূর্ণ কারণ এটি কীবোর্ড নেভিগেশনকে বাধা দেয় না।

— টানরিওল

7

আপনি ফর্মটি অক্ষম করতে এই ফাংশনটি ব্যবহার করতে পারেন:

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

এখানে ওয়ার্কিং ডেমো দেখুন

মনে রাখবেন এটি jQuery ব্যবহার করে।

— সরফরাজ
সূত্র

+1 ধন্যবাদ, তবে আমি ক্লায়েন্টের পাশের সমাধানগুলি ব্যবহার করতে পারছি না, আপডেট হওয়া প্রশ্নটি দেখুন (দুঃখিত, আমার খারাপ)

— মওগ বলেছেন মনিকা

6

নিশ্চিতকরণ পৃষ্ঠায়, সামগ্রীটিকে সম্পাদনযোগ্য নিয়ন্ত্রণগুলিতে রাখবেন না, কেবল তাদের পৃষ্ঠাতে লিখুন।

— Doobi
সূত্র

1

এটি সত্যিই স্যানিস্ট পদ্ধতির। কোনও ব্যবহারকারীর কাছে অদম্য ফর্ম উপস্থাপন করবেন না, বা আপনি "সর্বনিম্ন বিস্ময়" প্রশ্নে একটি প্রবেশিকা শেষ করবেন।

— কিবিবু

1

কীভাবে? আমি কীভাবে একটি চেকবক্স এবং এর চেক / চেক-না-শর্ত শর্ত বা তার নির্বাচিত আইটেম ইত্যাদি সহ একটি রেডিও গ্রুপ প্রদর্শন করতে পারি?

— মাওগ বলছেন মনিকা

1

@ মাউগ সম্ভবত চেকবক্সগুলি ছাড়াই কেবল 'নির্বাচিত' আইটেমগুলি তালিকাভুক্ত করার একটি বিকল্প হতে পারে। পিজ্জার অর্ডার নিশ্চিতকরণের মতো: আপনার নির্বাচিত সমস্ত উপাদান তালিকাভুক্ত করুন।

— mar8282

এই ক্ষেত্রে না, তবে পার্শ্বীয় চিন্তাভাবনার একটি ভাল অংশের জন্য ধন্যবাদ যা অন্যকে সহায়তা করতে পারে।

— মাওগ বলছেন মনিকা

4

এটি করার মতো কোনও অন্তর্নিহিত উপায় নেই তাই আপনার ফর্মটি কতটা জটিল তা নির্ভর করে আপনার একটি কাস্টম সমাধান নিয়ে আসতে হবে। আপনার এই পোস্টটি পড়া উচিত:

এইচটিএমএল ফর্মগুলি কেবল পঠনে রূপান্তর করুন ( আপডেট : ভাঙা পোস্ট লিঙ্ক, সংরক্ষণাগারযুক্ত লিঙ্ক )

সম্পাদনা: আপনার আপডেটের উপর ভিত্তি করে, আপনি কেবল এটি পড়তে পেরে কেন এতটা উদ্বিগ্ন? আপনি এটি ক্লায়েন্ট-সাইডের মাধ্যমে করতে পারেন তবে তা না হলে আপনাকে প্রতিটি নিয়ন্ত্রণে প্রয়োজনীয় ট্যাগ যুক্ত করতে হবে বা ডেটা রূপান্তর করতে হবে এবং কোনও নিয়ন্ত্রণ ছাড়াই এটি কাঁচা পাঠ্য হিসাবে প্রদর্শন করতে হবে। আপনি যদি কেবল এটিকে কেবল পঠন করার জন্য চেষ্টা করছেন যাতে পরের পোস্টটি সংশোধিত না হয়ে যায় তবে আপনার সমস্যা আছে কারণ যে কেউ পোস্টের সাথে গণ্ডগোল করতে পারে তারা যা খুশি তাই তৈরি করতে পারে যখন আপনি আসলে শেষ পর্যন্ত ডেটা গ্রহণ করেন আপনি আরও ভাল করে পরীক্ষা করে যাচ্ছেন আবার এটি বৈধ কিনা তা নিশ্চিত করতে।

— Kelsey
সূত্র

+1 ধন্যবাদ, তবে আমি ক্লায়েন্টের পাশের সমাধানগুলি ব্যবহার করতে পারি না, আপডেট হওয়া প্রশ্নটি দেখুন (দুঃখিত, আমার খারাপ)

— মওগ বলেছেন, মনিকা

"আপনার আপডেটের ভিত্তিতে, আপনি কেবল এটি পড়ার বিষয়ে কেন এত উদ্বিগ্ন? আপনি ক্লায়েন্ট-পক্ষের মাধ্যমে এটি করতে পারেন" দুঃখিত, তবে 1) আমি এটি ক্লায়েন্টের পক্ষে করতে পারি না (আমার পছন্দ নয়) এবং 2) যদি এটি দেখায় তবে ব্যবহারকারীর মতো তিনি এমন কিছু পরিবর্তন করছেন যা তাকে বিভ্রান্ত করতে পারে।

— মাওগ বলছেন মনিকা পুনরুদ্ধার করুন

@ ম্যামগ ওয়েল যদি এটি সম্পূর্ণরূপে ভিজ্যুয়ালদের জন্য হয় তবে আমি কেবলমাত্র সুপারিশ করতে পারি যে সমস্ত কন্ট্রোলগুলিকে তাদের পাঠ্যের সমতুল্য ইনলাইন প্রতিস্থাপন করা বা নিয়ন্ত্রণে পঠনযোগ্য সম্পত্তি যুক্ত করা। সিলভার বুলেট নেই এবং আমি বুঝতে পারি যে আপনি যা খুঁজছেন তা। আপনি যে কোডটি সংশোধন করার অনুমতি পেয়েছেন তার একটি স্নিপেট পোস্ট করতে পারেন? আপনি কী নিয়ে কাজ করছেন তার ভিত্তি পেতে এটি আপনাকে সহায়তা করবে।

— কেলসি

পরামর্শের জন্য +1 ধন্যবাদ। আমি সত্যিই এর আগে কখনও লক্ষ্য করি নি, তবে ফর্মগুলি এবং অস্পষ্টভাবে কেবল পাঠ্য নয়, কেবলমাত্র সেগুলির একটি পঠনীয় সংস্করণ মনে রাখলে আমি অবশ্যই 100s বা 1000s পূরণ করেছি। হয়তো আমার আরও কিছু পূরণ করা উচিত এবং পর্যবেক্ষণ করা উচিত :-)

— মাওগ

3

আশ্চর্য ... 6 বছর পরে লিঙ্কটি আর কাজ করছে না।

— mwallisch

3

এটি করার মতো কোনও পুরোপুরি অনুগত, অফিসিয়াল এইচটিএমএল উপায় নেই, তবে একটি সামান্য জাভাস্ক্রিপ্ট দীর্ঘ পথ যেতে পারে। আপনি যে অন্য সমস্যার মুখোমুখি হবেন তা হ'ল অক্ষম ক্ষেত্রগুলি পোষ্ট ডেটাতে প্রদর্শিত হয় না

— মাইকেল ক্লারেক্স
সূত্র

4

আপনি যদি ইতিমধ্যে ডেটাটিকে বৈধতা দিয়ে থাকেন তবে যে কোনও উপায়ে আপনার এটির সার্ভারটি সংরক্ষণ করতে হবে। এটিকে ক্লায়েন্টের কাছে পিছনে পিছনে প্রেরণ করা একটি বড় অল 'সুরক্ষা গর্ত। এমনকি আপনি যদি ক্ষেত্রগুলিকে স্থিত করতে সিএসএস, জেএস বা এইচটিএমএল ব্যবহার করেন তবে আপনি ফায়ারব্যাগের সাহায্যে বা ম্যানুয়ালি পরবর্তী এইচটিটিপি অনুরোধ পরিবর্তন করে করতে পারেন

— মাইকেল ক্লারেক্স

+1 ধন্যবাদ, তবে আমি ক্লায়েন্টের পাশের সমাধানগুলি ব্যবহার করতে পারছি না, আপডেট হওয়া প্রশ্নটি দেখুন (দুঃখিত, আমার খারাপ)

— মওগ বলেছেন

3

নির্দিষ্ট উপাদানটিতে সমস্ত ইনপুট , টেক্সারি , নির্বাচন এবং বোতাম অক্ষম করার জন্য এটি একটি আদর্শ সমাধান ।

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');

— রহস্যময়
সূত্র

2

সমস্ত সাধারণ ব্রাউজার দ্বারা সমর্থিত আরেকটি সহজ উপায় হ'ল:

এইচটিএমএল:

<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;
}

তবে সচেতন থাকুন যে ট্যাবিংটি এখনও এই পদ্ধতির সাথে কাজ করে এবং ফোকাস সহ উপাদানগুলি এখনও ব্যবহারকারী দ্বারা ম্যানিপুলেট করা যেতে পারে।

— এম নিউউইলারের
সূত্র

1

সমস্ত ফর্ম আইডির নম্বরযুক্ত এবং জেএসে লুপের জন্য চালনা করুন।

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

— ttt
সূত্র

+1 ধন্যবাদ, তবে আমি ক্লায়েন্টের পাশের সমাধানগুলি ব্যবহার করতে পারছি না, আপডেট হওয়া প্রশ্নটি দেখুন (দুঃখিত, আমার খারাপ)

— মওগ বলেছেন

1

আমি বরং jQuery ব্যবহার করব:

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

() কেবলমাত্র তাত্ক্ষণিক শিশুদের জন্য সন্ধানকারী () এর চেয়ে নবম নেস্টেড শিশু পর্যন্ত অনেক গভীর হবে find

— user163861
সূত্র

1

ধন্যবাদ, আপনি নতুন হওয়ার কারণে চেষ্টা করার জন্য আমি আপনাকে উজ্জীবিত করব। তবে, দয়া করে নোট করুন যে আমি কেবল একটি সার্ভারের পক্ষে কেবল সমাধানের জন্য জিজ্ঞাসা করেছি। তখন আমি কেবল পিএইচপি কোড করেছি এবং এখনও জেএস নেই। প্রশ্নটি পড়ার একটি বন্ধুত্বপূর্ণ ইঙ্গিত হিসাবে কেউ কেউ আপনাকে সম্ভবত

— এটির জন্য নিচে নামিয়ে দিতে

1

সহজ রাস্তা

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

— সমীর রহিমী
সূত্র

এটি সত্য, তবে এটি কেবল কুঠুরির উদাহরণ, আপনি উদাহরণস্বরূপ আপনার দ্বিতীয় নির্বাচককে অন্য যেকোন ক্ষেত্রে পরিবর্তন করতে পারেন '(' # আপনাররূপ। আপনার ক্লাস_আর_ইনপুটস ') prop

— সমীর রহিমি

1

আপনি ফর্মের উপরে এইচটিএমএল অদৃশ্য স্তর যুক্ত করুন। এই ক্ষেত্রে

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

এবং শৈলী:

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

অবশ্যই ব্যবহারকারী এই স্তরটি ওয়েব ব্রাউজারে লুকিয়ে রাখতে পারেন।

— মার্সিন ইউরেক
সূত্র

আমি কীভাবে একটি সম্পূর্ণ HTML ফর্মটি "পঠনযোগ্য" করতে পারি?

সমস্ত ফর্ম উপাদান সেট করা যায় না readonly, উদাহরণস্বরূপ:

ডেমো:

সমস্ত ফর্ম উপাদান সেট করা যায় না `readonly`, উদাহরণস্বরূপ: