ইনপুটগুলি ফর্ম করতে স্বয়ংক্রিয়ভাবে 'প্রয়োজনীয় ক্ষেত্র' রাক্ষুত্র যুক্ত করতে সিএসএস ব্যবহার করুন

Question

দুর্ভাগ্যজনক সত্য যে এই কোডটি পছন্দসই হিসাবে কাজ করবে না তা কাটিয়ে উঠার একটি ভাল উপায়:

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

নিখুঁত বিশ্বে সমস্ত প্রয়োজনীয় inputক্ষেত্রটি প্রয়োজনীয় কিনা তা নির্দেশ করে সামান্য তারকাচিহ্ন পাবে। এই সমাধানটি অসম্ভব যেহেতু সিএসএস উপাদান উপাদানগুলির পরে sertedোকানো হয়েছে, উপাদানটির পরে নয়, তবে এর মতো কিছু আদর্শ হবে। কয়েক হাজার প্রয়োজনীয় ক্ষেত্র সহ একটি সাইটে আমি একটি পরিবর্তনের সাথে একটি রেখায় ( :afterটু :before) ফর্মটি ইনপুটটির সামনে নিয়ে যেতে পারি বা আমি এটিকে লেবেলের ( .required label:after)) এর শেষে বা লেবেলের সামনের দিকে যেতে পারি বা করতে পারি সম্বলিত বাক্সের উপর একটি অবস্থান, ইত্যাদি ...

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

শেষ অবধি, এটি অতিরিক্ত মার্কআপ যুক্ত করে না।

অসম্ভব কোডের সমস্ত বা বেশিরভাগ সুবিধা রয়েছে এমন কোনও ভাল সমাধান রয়েছে কি?

Comments

সম্ভবত একটি নক্ষত্রের পটভূমি চিত্র প্রয়োগ?

— ভালামাস

ইনপুট ফিল্ড তৈরি করতে হলে আসলে প্রয়োজনীয় , অ্যাড requiredকরতে অ্যাট্রিবিউট <input... developer.mozilla.org/en-US/docs/Web/HTML/Element/input/...

— tomByrer

Answer 1

আপনার মনে কি তাই ছিল?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {
  content:" *";
  color: red;
}

<label class="required">Name:</label>
<input type="text">

Https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements দেখুন

Comments

এটি বেশ কয়েকটি পরিস্থিতিতে একটি ভাল সমাধান, তবে এটি যদি কাজ করে না তবে যদি নিখুঁত অবস্থান বা ভাসমানগুলি ফর্মগুলি লাইন করতে ব্যবহৃত হয় (যেমন jsfiddle.net/erqrN/2 )। আমি আমার ফর্মগুলি লাইন করতে প্রকৃত অবস্থান ব্যবহার করছি। আমি একেবারে অবস্থান করতে *পারি তবে এর অর্থ হ'ল আমাকে ফর্ম ইনপুটটির প্রতিটি দৈর্ঘ্যের জন্য ম্যানুয়ালি দূরত্ব রাখতে হবে এবং কোনও নমনীয় ইনপুট রাখতে সক্ষম হব না।

— ব্রেন্টনস্ট্রাইন

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

— ওয়েবওয়ান্ডারার

তারকাচিহ্নটি লিংক ব্যবহার করে উপস্থিত হয় না যা অ্যাক্সেসযোগ্যতার সমস্যা হতে পারে।

— ডেভ জার্ভিস

আমি কি এটি আমার .css এ রাখতে পারি? যদি হ্যাঁ, আপনি দয়া করে একটি উদাহরণ দিতে পারেন? আমি এটি জানতাম না : সিনট্যাক্স

— লিওনার্দো মাফেই

@LeonardoMaffei নিশ্চিত, কটাক্ষপাত আছে developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements & developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

— ম্যাক্স Girkens

Answer 2

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

আপনার নির্ভুল কাঠামোর সাথে ফ্রেড: http://jsfiddle.net/bQ859/

Comments

আপনার এখনও আপনার লেবেলে ক্লাস প্রয়োজন, ডকুমেন্টের কাঠামোটি পরিষ্কার রাখার একমাত্র উপায় ব্যাকগ্রাউন্ড চিত্র পদ্ধতি method সংক্ষিপ্ত যদিও।

— হেনরির বিড়াল 16

Answer 3

যদিও এটি গৃহীত উত্তর, দয়া করে আমাকে উপেক্ষা করুন এবং :afterনীচের প্রস্তাবিত বাক্য গঠনটি ব্যবহার করুন । আমার সমাধান অ্যাক্সেসযোগ্য নয়।

---

একটি নক্ষত্রের চিত্রের পটভূমি চিত্র ব্যবহার করে এবং লেবেল / ইনপুট / বহিরাগত ডিভের ব্যাকগ্রাউন্ড এবং নক্ষত্রের আকারের প্যাডিং সেট করে অনুরূপ ফলাফল অর্জন করা যেতে পারে। এটার মতো কিছু:

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

এটি পাঠ্য বাক্সটি নীচে স্থাপন করবে, তবে এটির div.requiredপরিবর্তে এটি লাগিয়ে দেবে.required input সম্ভবত আপনি যা খুঁজছেন তা আরও হবে, যদি একটু কম মার্জিত হয়।

এই পদ্ধতিতে অতিরিক্ত ইনপুট লাগবে না।

Comments

তবে এটি লক্ষণীয় যে এটি খুব স্ক্রিন-পাঠক বান্ধব নয়। এই ক্ষেত্রে ম্যাক্সের উত্তর আরও ভাল। আসলে বেশিরভাগ ক্ষেত্রে ম্যাক্সের উত্তর আরও আদর্শ - কেবল ওপি-র জন্য নয়।

— জয়পিগী

Answer 4

এটি নিখুঁতভাবে ইনপুট রাখার জন্য যেমনটি নিম্নলিখিত চিত্রটিতে প্রদর্শিত হয়:

আমি নিম্নলিখিত পদ্ধতিটি পেয়েছি:

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

আমি যে সাইটে কাজ করি তা স্থির লেআউট ব্যবহার করে কোডিং করা হয় তাই এটি আমার পক্ষে ঠিক ছিল।

আমি নিশ্চিত নই যে এটি তরল ডিজাইনের পক্ষে ভাল।

Comments

হ্যাঁ, এটি দেখতে একই রকম। পার্থক্য হ'ল তিনি ব্যাকগ্রাউন্ড-ইমেজ ব্যবহার করেছেন। (বা আমি কিছু ভুল বুঝেছি)

— তেবে

এর মতো কোনও কিছুর জন্য খালি স্প্যান মার্কআপ যুক্ত করা CSS এর পুরো পয়েন্টকে পরাস্ত করে, তাই না?

— জেসন সিলভার

স্প্যানের কোনও মূল্য নেই, আমি দেখেছি এমন বিশাল লাইব্রেরির মধ্যে প্রায়শই পাওয়া জিনিসগুলি সহজ করে তোলার একটি সাধারণ কৌশল

— টেবি

Answer 5

সিএসএসে লিখুন

.form-group.required .control-label:after {content:"*";color:red;}

এবং এইচটিএমএল

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

Comments

আমি তোমার পদ্ধতির শুধুমাত্র কাজ করে তোমার মত ট্যাগ ট্যাগে নিয়ন্ত্রণ লেবেল বর্গ ধার্য মনে <label class="control-label">...</label>। তবে এটি কাজ (Y) করে

— মার্কোলে

আমি আপনাকে নমুনা উদাহরণ দিয়েছি উদ্দেশ্য নিয়ন্ত্রণ লেবেল Mr.creep- গল্প

— Kondal

এটিতে পুরানো সিউডো এলিমেন্ট সিনট্যাক্স রয়েছে প্লাস ডিভ স্যুপের দরকার নেই। আমি একটি উত্তর যুক্ত করেছি যা ফর্ম ডিভ এবং শ্রেণি মুক্ত রাখে।

— হেনরির বিড়াল 16

Answer 6

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

Comments

কেন দুটি radial-gradientপদ আছে background-image? আমি এই সিনট্যাক্সটি বিকাশকারীর সাথে বিবাহ করতে পারি না।

— ক্রিস ওয়ালশ

এটি পছন্দনীয় কারণ এটি কাজ করতে কোনও অতিরিক্ত মার্কআপের প্রয়োজন হয় না। তবে আরও কাস্টমাইজযোগ্য বিকল্পগুলির জন্য :: এর পরে এমন একটি সমাধান দেখতে চাই যা আমি দেখতে চাই।

— জেসন সিলভার

Answer 7

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

চিত্রের কয়েকটি ড্রপডাউন তীর দিয়ে ওভারল্যাপ না করার জন্য ডানদিকে কিছু 20px স্থান রয়েছে

এবং এটি এর মতো দেখাচ্ছে:

Comments

এটি অনুপ্রেরণাজনক, আমার পটভূমি চিত্র লোড করা এড়ানোর উপায় দেখুন।

— হেনরির বিড়াল 16

Answer 8

JQuery এবং CSS ব্যবহার করুন

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

Answer 9

আমি মনে করি এটি করার দক্ষ উপায়, এত মাথা ব্যথা কেন

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

Comments

নোটটি স্প্যানটি লেবেল ট্যাগে প্রয়োগ করা হয় এবং ইনপুট ট্যাগের জন্য নয় Note যদি ইনপুট ট্যাগটিতে প্রয়োগ করা হয়, তবে লাল নক্ষত্রটি পরবর্তী লাইনে নেমে যায় - যা বেশিরভাগ

— দেবগণ

Answer 10

এটি 2019 এবং এই সমস্যার পূর্ববর্তী উত্তরগুলি ব্যবহার করছে না

1. সিএসএস গ্রিড
2. সিএসএস ভেরিয়েবল
3. এইচটিএমএল 5 ফর্ম উপাদান
4. সিএসএসে এসভিজি

সিএসএস গ্রিড হল 2019 সালে ফর্মগুলি করার উপায় কারণ আপনি অতিরিক্ত লেভেল, স্প্যানস, স্পারগুলি এবং অন্যান্য রেটিক্যাল সহ স্প্যানস, স্প্যান না করে আপনার ইনপুটগুলির পূর্ববর্তী লেবেলগুলি রাখতে পারেন।

আমরা এখানে ন্যূনতম সিএসএস নিয়ে যাচ্ছি:

উপরের জন্য এইচটিএমএল:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

স্থানধারক পাঠ্যটি খুব যোগ করা যেতে পারে এবং এটি অত্যন্ত প্রস্তাবিত। (আমি এই মিড-ফর্মটির উত্তর দিচ্ছি)।

সিএসএস ভেরিয়েবলের জন্য এখন:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

ফর্ম উপাদানগুলির জন্য সিএসএস:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

ফর্মটি নিজেই সিএসএস গ্রিডে থাকা উচিত:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

কলামগুলির জন্য মানগুলি সেট যেমন 1fr autoবা এর 1frসাথে সেট করা যেতে পারে<p> ফর্মের ট্যাগগুলির 1 / -1 স্প্যান সেট করে। আপনি আপনার মিডিয়া ক্যোয়ারিতে ভেরিয়েবলগুলি পরিবর্তন করেন যাতে আপনার মোবাইলে এবং ডেস্কটপে উপরের হিসাবে পূর্ণ ইনপুট বাক্স থাকে। আপনি যদি সিএসএস ভেরিয়েবল পদ্ধতির সাহায্যে চান তবে আপনার গ্রিডের ব্যবধানটি মোবাইলেও পরিবর্তন করতে পারেন।

বাক্সগুলি বৈধ হয়ে গেলে আপনার নক্ষত্রের পরিবর্তে একটি গ্রিন টিক দেওয়া উচিত।

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

Answer 11

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}

<input style="width:200px">
<span class="asterisc">*</span>

Answer 12

এই ক্ষেত্রটি একটি নির্দিষ্ট ক্ষেত্র হিসাবে নির্দিষ্ট ইনপুট বোঝাতে একটি লেবেলের সামনে একটি তারকাচিহ্ন চিহ্ন রাখে। আমি আমার ওয়েবপৃষ্ঠাটি প্রতিক্রিয়াশীল তা নিশ্চিত করতে% এবং em ব্যবহার করে CSS বৈশিষ্ট্য সেট করেছি set আপনি চাইলে px বা অন্যান্য পরম ইউনিট ব্যবহার করতে পারেন।

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

Comments

তাই আপনাকে স্বাগতম! আপনি যখন একটি উত্তর নতুন দৃষ্টিকোণ দিয়ে রাখেন, আপনার উত্তরটি ব্যাখ্যা করার চেষ্টা করুন, কোনও ব্যাখ্যা ছাড়াই কোনও কোড রাখবেন না।

— ডেভিড গার্সিয়া বোদেগো

Answer 13

আপনার যা প্রয়োজন তা হ'ল: প্রয়োজনীয় নির্বাচক - এটি 'প্রয়োজনীয়' বৈশিষ্ট্যযুক্ত সমস্ত ক্ষেত্র নির্বাচন করবে (সুতরাং কোনও অতিরিক্ত ক্লাস যুক্ত করার দরকার নেই)। তারপরে - আপনার প্রয়োজন অনুসারে স্টাইলের ইনপুটগুলি। আপনি ': পরে' সিলেক্টর ব্যবহার করতে পারেন এবং অন্যান্য উত্তরগুলির মধ্যে প্রস্তাবিতভাবে তারকাচিহ্ন যুক্ত করতে পারেন

Answer 14

আপনি একটি ডিভি ট্যাগে এইচটিএমএল কোড এনক্যাপুলেশন করে কাঙ্ক্ষিত ফলাফল অর্জন করতে পারেন যা "ফর্ম-গ্রুপ" শ্রেণীর পরে "প্রয়োজনীয়" শ্রেণি রয়েছে * তবে আপনার যদি বুটস্ট্র্যাপ থাকে তবে এটি কাজ করে।

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>

Answer 15

এখানে যারা শেষ, কিন্তু jQuery আছে তাদের জন্য:

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }

Comments

আপনি যদি জেএস ছাড়াই একই ফলাফল অর্জন করতে পারেন তবে জেএস কেন ব্যবহার করবেন?

— ভাইটালি জাদানেভিচ

@ ভিটালিজেডেনেভিচ কারণ আপনাকে সেই সমাধান সহ একটি অপ্রয়োজনীয় পটভূমি চিত্র লোড করতে হবে। এছাড়াও, আমার কাছে ইতিমধ্যে জেএস রয়েছে (অন্যরাও এটি করবে)।

— অ্যান্ডি হেডেন