Użyj CSS, aby automatycznie dodać gwiazdkę „pole wymagane” do danych wejściowych formularza

Jaki jest dobry sposób na przezwyciężenie niefortunnego faktu, że ten kod nie będzie działał zgodnie z oczekiwaniami:

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

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

W idealnym świecie wszystkie wymagane inputznaki otrzymałyby małą gwiazdkę wskazującą, że pole jest wymagane. To rozwiązanie niemożliwe, ponieważ CSS jest wstawiany po zawartości elementu, a nie po samym elemencie, ale coś takiego byłoby idealne. W witrynie z tysiącami wymaganych pól mogę przesunąć gwiazdkę przed wpisem z jedną zmianą do jednej linii ( :afterdo :before) lub mogę przenieść ją na koniec etykiety ( .required label:after) lub przed etykietę lub do pozycja na zawierającym pudełko itp.

Jest to ważne nie tylko w przypadku, gdy zmienię zdanie co do tego, gdzie umieścić gwiazdkę wszędzie, ale także w nieparzystych przypadkach, w których układ formularza nie pozwala na umieszczenie gwiazdki w standardowej pozycji. Działa również dobrze z walidacją, która sprawdza formularz lub podkreśla nieprawidłowo wypełnione kontrole.

Wreszcie nie dodaje dodatkowych znaczników.

Czy są jakieś dobre rozwiązania, które mają wszystkie lub większość zalet niemożliwego kodu?

Czy to miałeś na myśli?

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">

Zobacz https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

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

Baw się swoją dokładną strukturą: http://jsfiddle.net/bQ859/

Choć jest to akceptowana odpowiedź, proszę zignorować mnie i użyć :afterskładni sugerowane poniżej. Moje rozwiązanie nie jest dostępne.

Podobny rezultat można by osiągnąć, używając obrazu tła z gwiazdką i ustawiając tło etykiety / wejścia / zewnętrznego elementu div oraz dopełnienie rozmiaru obrazu gwiazdki. Coś takiego:

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

Spowoduje to umieszczenie gwiazdki WEWNĄTRZ pola tekstowego, ale umieszczenie tego samego div.requiredzamiast tego .required inputprawdopodobnie będzie bardziej tym, czego szukasz, jeśli trochę mniej eleganckie.

Ta metoda nie wymaga dodatkowego wkładu.

Aby wstawić go dokładnie DO wejścia, jak pokazano na poniższym obrazku:

Znalazłem następujące podejście:

.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> 

Witryna, na której pracuję, jest kodowana przy użyciu stałego układu, więc dla mnie było w porządku.

Nie jestem pewien, czy dobrze nadaje się do płynnego projektowania.

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

napisz w CSS

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

i HTML

<div class="form-group required">

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

    <input type="text">

</div>

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

Obraz ma około 20 pikseli przestrzeni po prawej stronie, aby nie nachodzić na strzałkę rozwijania wyboru

A wygląda to tak:

Użyj jQuery i 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>

Myślę, że to skuteczny sposób, skąd tyle bólu głowy

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

Jest rok 2019 i poprzednie odpowiedzi na ten problem nie są używane

1. Siatka CSS
2. Zmienne CSS
3. Elementy formularza HTML5
4. SVG w CSS

Siatka CSS to sposób na tworzenie formularzy w 2019 r., Ponieważ możesz mieć etykiety poprzedzające dane wejściowe bez dodatkowych elementów div, span, span z gwiazdkami i innych reliktów.

Oto, dokąd zmierzamy przy minimalnym CSS:

HTML dla powyższego:

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

Można również dodać tekst zastępczy i jest to wysoce zalecane. (Odpowiadam tylko na ten środkowy formularz).

Teraz dla zmiennych CSS:

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

CSS dla elementów formularza:

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

Sam formularz powinien znajdować się w siatce CSS:

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

Wartości kolumn można ustawić na dowolne 1fr autolub 1frdowolne, takie jak <p>tagi w formularzu ustawionym na zakres 1 / -1. Zmieniasz zmienne w zapytaniach o media, aby pola wejściowe miały pełną szerokość na urządzeniach mobilnych i jak powyżej na komputerze. Jeśli chcesz, możesz również zmienić swoją lukę w siatce na telefonie komórkowym, korzystając z metody zmiennych CSS.

Gdy pola są ważne, zamiast gwiazdki powinien pojawić się zielony znacznik.

SVG w CSS to sposób na uratowanie przeglądarki przed podróżą do serwera w celu uzyskania obrazu gwiazdki. W ten sposób możesz precyzyjnie dostroić gwiazdki, przykłady tutaj są pod nietypowym kątem, możesz to edytować, ponieważ ikona SVG powyżej jest w pełni czytelna. Pole widoku można również zmienić, aby umieścić gwiazdkę powyżej lub poniżej środka.

Oto prosta sztuczka „ tylko CSS ”, którą stworzyłem i używam do dynamicznego dodawania czerwonej gwiazdki na etykietach wymaganych elementów formularza bez utraty domyślnej weryfikacji formularza przeglądarki.

Poniższy kod działa doskonale we wszystkich przeglądarkach i dla wszystkich głównych elementów formularza.

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  order: 1;
  text-transform: capitalize;
  margin-bottom: 0.3em;
}

input,
select,
textarea {
  padding: 0.5em;
  order: 2;
}

input:required+label::after,
select:required+label::after,
textarea:required+label::after {
  content: " *";
  color: #e32;
}

<div class="form-group">
  <input class="form-control" name="first_name" id="first_name" type="text" placeholder="First Name" required>
  <label class="small mb-1" for="first_name">First Name</label>
</div>

<br>

<div class="form-group">
  <input class="form-control" name="last_name" id="last_name" type="text" placeholder="Last Name">
  <label class="small mb-1" for="last_name">Last Name</label>
</div>

Ważne: musisz zachować kolejność elementów, czyli element wejściowy jako pierwszy, a element etykiety jako drugi. CSS zajmie się tym i przekształci w tradycyjny sposób, to znaczy najpierw etykieta, a wejście drugie.

W tym przykładzie przed etykietą umieszcza się symbol gwiazdki, aby oznaczyć dane wejściowe jako wymagane pole. Ustawiam właściwości CSS za pomocą% i em, aby moja strona internetowa była responsywna. Jeśli chcesz, możesz użyć pikseli lub innych jednostek bezwzględnych.

#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>

Potrzebujesz: wymaganego selektora - wybierze wszystkie pola z atrybutem „wymagany” (nie ma więc potrzeby dodawania dodatkowych klas). Następnie dostosuj dane wejściowe do swoich potrzeb. Możesz użyć selektora „: after” i dodać gwiazdkę w sposób sugerowany wśród innych odpowiedzi

Możesz osiągnąć pożądany rezultat, umieszczając kod HTML w znaczniku DIV, który zawiera klasę „required”, po której następuje klasa „form-group”. * Jednak działa to tylko wtedy, gdy masz Bootstrap.

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

Dla tych, którzy kończą tutaj, ale mają jQuery:

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

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