আমি কেবল ভাবছি যে কীভাবে নতুন এইচটিএমএল 5 ইনপুট অ্যাট্রিবিউটটি "প্রয়োজনীয়" বেতার বোতামগুলিতে সঠিকভাবে ব্যবহার করতে হয়। প্রতিটি রেডিও বোতাম ক্ষেত্রে নীচের মতো বৈশিষ্ট্যটির প্রয়োজন আছে বা কেবল একটি ক্ষেত্র যদি তা পায় তবে তা যথেষ্ট?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />উত্তর:
টিএল; ডিআর: requiredরেডিও গ্রুপের কমপক্ষে একটি ইনপুট জন্য বৈশিষ্ট্যটি সেট করুন Set
requiredসমস্ত ইনপুটগুলির জন্য সেট করা আরও স্পষ্ট, তবে প্রয়োজনীয় নয় (যদি না গতিশীলভাবে রেডিও-বোতাম তৈরি করা হয়)।
রেডিও বোতামগুলিকে গোষ্ঠী করতে তাদের সবার অবশ্যই একই nameমান থাকতে হবে । এটি একবারে কেবলমাত্র একজনকে নির্বাচিত করার অনুমতি দেয় এবং requiredপুরো গোষ্ঠীতে প্রয়োগ হয়।
<form>
Select Gender:<br>
<label>
<input type="radio" name="gender" value="male" required>
Male
</label><br>
<label>
<input type="radio" name="gender" value="female">
Female
</label><br>
<label>
<input type="radio" name="gender" value="other">
Other
</label><br>
<input type="submit">
</form>এছাড়াও নোট নিন:
কোনও রেডিও বোতাম গ্রুপ প্রয়োজন কিনা তা নিয়ে বিভ্রান্তি এড়াতে, লেখকরা একটি গ্রুপের সমস্ত রেডিও বোতামগুলিতে বৈশিষ্ট্য নির্দিষ্ট করতে উত্সাহিত হন। প্রকৃতপক্ষে, সাধারণভাবে, লেখকরা রেডিও বোতাম গোষ্ঠীগুলির প্রথম দিকে প্রথমে কোনও চেক করা নিয়ন্ত্রণ নেই এমনটি এড়াতে উত্সাহিত করা হয়, কারণ এটি এমন একটি রাষ্ট্র যা ব্যবহারকারী ফিরে আসতে পারে না, এবং তাই সাধারণত একটি দুর্বল ব্যবহারকারী ইন্টারফেস হিসাবে বিবেচিত হয়।
আপনি এই কোড স্নিপেট ব্যবহার করতে পারেন ...
<html>
<body>
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Submit" />
</form>
</body>
</html>নির্বাচিত বিবৃতিগুলির একটিতে " প্রয়োজনীয় " কীওয়ার্ড উল্লেখ করুন । আপনি যদি তার উপস্থিতির ডিফল্ট উপায় পরিবর্তন করতে চান। আপনি এই পদক্ষেপগুলি অনুসরণ করতে পারেন। যদি আপনার ডিফল্ট আচরণটি পরিবর্তন করার কোনও ইচ্ছা থাকে তবে এটি কেবলমাত্র অতিরিক্ত তথ্যের জন্য।
আপনার .cssফাইলটিতে নিম্নলিখিতগুলি যুক্ত করুন।
/* style all elements with a required attribute */
:required {
background: red;
}আরও তথ্যের জন্য আপনি নিম্নলিখিত ইউআরএল উল্লেখ করতে পারেন।
যদি আপনার রেডিও বোতামগুলি কাস্টমাইজ করা থাকে, উদাহরণস্বরূপ রেডিও বোতামটির মূল আইকনটি CSS এর মাধ্যমে লুকিয়ে রাখা হয়েছে display:noneযাতে আপনি নিজের রেডিও বোতামটি তৈরি করতে পারেন তবে আপনার ত্রুটি হতে পারে।
এটির সমাধানের উপায়টি প্রতিস্থাপন display:noneকরাopacity:0
display:none। এখানেই ইতিমধ্যে এখানে উত্তর stackoverflow.com/questions/49687229/...
নেটিভ এইচটিএমএল 5 বৈধতা সহ প্রয়োজনীয় রেডিওব্যাটনের একটি খুব প্রাথমিক কিন্তু আধুনিক বাস্তবায়ন এখানে রয়েছে:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>যদিও আমি নেটিভ এইচটিএমএল 5 বৈধতা ব্যবহারের ন্যূনতম পদ্ধতির একটি বড় অনুরাগী, তবে আপনি এটি জাভাস্ক্রিপ্টের বৈধতার সাথে দীর্ঘকালীন প্রতিস্থাপন করতে চাইতে পারেন। জাভাস্ক্রিপ্টের বৈধতা আপনাকে বৈধতা প্রক্রিয়াটির উপর আরও বেশি নিয়ন্ত্রণ দেয় এবং এটি আপনাকে বৈধ ক্ষেত্রগুলির স্টাইলিং উন্নত করতে প্রকৃত ক্লাসগুলি (সিউডো ক্লাসের পরিবর্তে) সেট করার অনুমতি দেয়। জাভাস্ক্রিপ্ট ভাঙ্গা (বা অভাবের ক্ষেত্রে) এই নেটিভ এইচটিএমএল 5 বৈধতা আপনার পতন ব্যাক হতে পারে। অ্যান্ড্রু কোলের দ্বারা অনুপ্রাণিত কীভাবে আরও ভাল ফর্মগুলি তৈরি করা যায় সে সম্পর্কে কিছু পরামর্শের সাথে আপনি এখানে এর উদাহরণ খুঁজে পেতে পারেন ।
required="required"বৈধতার চেয়ে ভাল কাজ করার চেয়ে একই নাম এবং টাইপ সহ আমাকে ব্যবহার করতে হয়েছিল।
input type="radio" name="userradio" id="" value="User" required="required"
input type="radio" name="userradio" id="" value="Admin"
input type="radio" name="userradio" id="" value="Guest"