Użyj CSS, aby automatycznie dodać gwiazdkę "Wymagane pole" do wejść formularza

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

Fiddle with your exact structure: http://jsfiddle.net/bQ859/

Chociaż jest to akceptowana ODPOWIEDŹ, proszę zignoruj mnie i użyj składni :after sugerowanej poniżej. Moje rozwiązanie nie jest dostępne.

Podobny efekt można uzyskać, stosując obrazek tła z gwiazdką i ustawiając tło etykiety / wejścia / zewnętrznego div oraz wypełnienie o wielkości obrazu z gwiazdką. Coś takiego:

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

Spowoduje umieszczenie gwiazdki w polu tekstowym, ale umieszczenie tego samego na div.required zamiast .required input będzie prawdopodobnie bardziej to, czego szukasz, jeśli trochę mniej eleganckie.

Ta metoda nie wymaga dodatkowego wejścia.

Aby umieścić go dokładnie na wejściu, jak jest pokazany 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> 

Strona na której pracuję jest kodowana za pomocą stałego layoutu, więc było dla mnie ok.

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

Zapis 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 trochę 20px miejsca po prawej stronie, aby nie nakładać się na strzałkę wybierz rozwijaną

I wygląda tak:

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

1. CSS grid
2. zmienne CSS
3. Elementy formularza HTML5
4. SVG w CSS

CSS grid to sposób na tworzenie formularzy w 2019 roku, ponieważ możesz mieć etykiety poprzedzające dane wejściowe bez dodatkowych divów, przęseł, przęseł z gwiazdkami i innych reliktów.

Oto dokąd zmierzamy z minimalnym CSS:

HTML dla powyżej:

<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 on wysoce zalecany. (Odpowiadam tylko na ten Średni 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 CSS grid:

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 mogą być ustawione na 1fr auto lub 1fr z czymkolwiek, np. znacznikami <p> w postaci ustawionej na span 1/-1. Zmieniasz zmienne w zapytaniach o media, aby pola wprowadzania były pełne szerokość na komórce i jak powyżej na pulpicie. Możesz również zmienić lukę w siatce na urządzeniach mobilnych, jeśli chcesz, korzystając z podejścia zmiennych CSS.

Gdy pola są ważne, powinieneś otrzymać zielony kleszcz zamiast gwiazdki.

SVG w CSS jest sposobem na uratowanie przeglądarki przed koniecznością round trip do serwera, aby uzyskać obraz z gwiazdką. W ten sposób można dostroić gwiazdki, przykłady tutaj są pod nietypowym kątem, można edytować to jako ikonę SVG powyżej jest całkowicie czytelny. Pole widzenia można również zmienić, aby umieścić gwiazdkę powyżej lub poniżej środka.

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 jest skuteczny sposób, dlaczego tak dużo 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> 

Oto prosty trik " CSS only ", który stworzyłem i używam do dynamicznego dodawania czerwonej gwiazdki na etykietach wymagane Elementy formularza bez utraty domyślnej walidacji formularza przez przeglądarki.

Poniższy kod działa doskonale na wszystkich przeglądarkach i wszystkich głównych elementach 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, które są pierwszym elementem wejściowym i drugim elementem etykiety. CSS jest poradzimy sobie z tym i przekształcimy w tradycyjny sposób, czyli Etykietę pierwszą i drugą.

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

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

Ten przykład umieszcza symbol gwiazdki przed etykietą, aby określić ten konkretny wpis jako wymagane pole. Ustawiłem właściwości CSS za pomocą % i em, aby moja strona była responsywna. Możesz użyć px lub innych jednostek absolutnych, jeśli chcesz.

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

To czego potrzebujesz to: wymagany selektor-wybierze wszystkie pola z atrybutem 'required' (więc nie trzeba dodawać żadnych dodatkowych klas). Następnie style wejścia w zależności od 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, zamykając kod HTML w znaczniku div, który zawiera klasę "required", a następnie klasę "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 tu kończą, ale mają jQuery:

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

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