Используйте CSS, чтобы автоматически добавлять звездочку "обязательное поле" для ввода данных

Что является хорошим способом преодолеть досадный факт, что этот код не будет работать должным образом:

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

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

В идеальном мире все требуемые inputs будут иметь маленькую звездочку, указывающую, что поле является обязательным. Это решение невозможно, поскольку CSS вставляется после содержимого элемента, а не после самого элемента, но что-то подобное было бы идеальным. На сайте с тысячами обязательных полей я могу переместить звездочку перед полем ввода с одним изменением в одну строку ( :afterдо :before), или я могу переместить ее в конец метки ( .required label:after) или перед меткой, или в положение на контейнере и т. д.

Это важно не только в том случае, если я передумаю, где разместить звездочку везде, но также и для странных случаев, когда макет формы не позволяет звездочке в стандартном положении. Он также хорошо сочетается с проверкой, которая проверяет форму или выделяет неправильно заполненные элементы управления.

Наконец, он не добавляет дополнительной разметки.

Есть ли какие-нибудь хорошие решения, в которых есть все или большинство преимуществ невозможного кода?

Вы это имели в виду?

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.

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

Поиграйте со своей точной структурой: http://jsfiddle.net/bQ859/

Хотя это принятый ответ, не обращайте на меня внимания и используйте :afterсинтаксис, предложенный ниже. Мое решение недоступно.

Аналогичного результата можно достичь, используя фоновое изображение изображения звездочки и установив фон метки / ввода / внешнего блока div и отступ размером с изображение звездочки. Что-то вроде этого:

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

Это поместит звездочку ВНУТРИ текстового поля, но div.requiredвместо .required inputнее, вероятно, будет больше того, что вы ищете, хотя и немного менее элегантно.

Этот метод не требует дополнительных входных данных.

Чтобы поместить его точно в ввод, как показано на следующем изображении:

Я нашел такой подход:

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

Сайт, на котором я работаю, написан с использованием фиксированного макета, поэтому меня это устраивало.

Я не уверен, что это хорошо для жидкого дизайна.

написать в CSS

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

и HTML

<div class="form-group required">

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

    <input type="text">

</div>

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

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

Изображение имеет пространство 20 пикселей справа, чтобы не перекрывать стрелку раскрывающегося списка выбора.

А это выглядит так:

Используйте 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>

Я думаю, что это эффективный способ, почему так много головной боли

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

Это 2019 год, и предыдущие ответы на эту проблему не использовали

1. CSS-сетка
2. Переменные CSS
3. Элементы формы HTML5
4. SVG в CSS

CSS-сетка - это способ создания форм в 2019 году, поскольку вы можете размещать метки перед входными данными без дополнительных разделов, промежутков, промежутков со звездочками и других реликвий.

Вот куда мы идем с минимальным CSS:

HTML для вышеупомянутого:

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

Также можно добавить текст-заполнитель, что настоятельно рекомендуется. (Я просто отвечаю на эту среднюю форму).

Теперь о переменных 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 для элементов формы:

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

Сама форма должна быть в сетке CSS:

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. Вы меняете переменные в своих медиа-запросах, чтобы поля ввода отображались на всю ширину на мобильном устройстве и, как указано выше, на рабочем столе. Вы также можете изменить размер сетки на мобильных устройствах, если хотите, используя метод переменных CSS.

Когда поля действительны, вы должны получить зеленую галочку вместо звездочки.

SVG в CSS - это способ избавить браузер от необходимости совершать круговой обход сервера для получения изображения звездочки. Таким образом вы можете точно настроить звездочки, примеры здесь расположены под необычным углом, вы можете отредактировать это, так как значок SVG выше полностью читаем. Окно просмотра также можно изменить, поместив звездочку над или под центром.

В этом примере перед меткой помещается символ звездочки, чтобы обозначить этот конкретный ввод как обязательное поле. Я установил свойства CSS с помощью% и em, чтобы моя веб-страница была отзывчивой. Вы можете использовать пиксели или другие абсолютные единицы, если хотите.

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

Что вам нужно: обязательный селектор - он выберет все поля с атрибутом 'required' (поэтому нет необходимости добавлять какие-либо дополнительные классы). Затем измените стиль ввода в соответствии с вашими потребностями. Вы можете использовать селектор ': after' и добавить звездочку способом, предложенным среди других ответов

Вы можете достичь желаемого результата, инкапсулируя HTML-код в теге div, который содержит «required» класс, за которым следует класс «form-group». * Однако это работает, только если у вас есть Bootstrap.

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

Для тех, кто попал сюда, но имеет jQuery:

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

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