подсветка текста

[dantist433]

Добрый день.
такой вопрос.
есть форма

<form name = "test1" method="post" action="timers/test1.php">
<table>
<tr>
<td>ССылка</td><td>Текст</td><td>текст</td><td> <input type="text" size="3" name='unit3'></td>
</tr>
</table>
 <p><input type="submit"></p>
 </form>

Сюда вводятся числовые значения

Есть переменные $a и $b
Необходимо: при вводе значений в эту форму если вводимое значение больше переменных $a или $b или вводится текст то цвет текста становится красным.

Подскажите с чего начать?
(P.s. я знаю что надо начинать с изучения js)
Но все же с помощью чего этого сделать- подскажите

[ksa]

с помощью чего этого сделать

- отлавливать событие "ввода данных"
- читать значение инпута
- сравнивать с переменными
- если условие не выполняется, менять фон инпута

[dantist433]

<form name = "test1" method="post" action="timers/test1.php">
<table>
<tr>
<td>ССылка</td><td>Текст</td><td>текст</td><td> <input type="text" size="3" id='unit3' name='unit3'></td>
</tr>
</table>
 <p><input type="submit"></p>
 </form>

<script>
var max_population=10;
var max_res=5; 
  var input =  document.getElementById('unit3');
  
if (input >max_population) {document.getElementById('unit3').style.backgroundColor = 'red'}
</script>

Он начинает сразу отрабатывать, еще до ввода данных, в чем косяк?
и 2 вопрос сразу, если у меня несколько input type="text" - то для каждого id получается писать надо?

[рони]

dantist433,
проверка на заполненость input

[dantist433]

Спасибо, буду разбираться

[dantist433]

Всем спасибо

<img name = 'img' id="elem" src = 'images\index.jpg' style="display: none; width: 300px;" />
<form name = "test1" method="post" action="timers/test1.php">
<table>
<tr>
<td>ССылка</td><td>Текст</td><td>текст</td><td> <input type="text" size="3" name='unit3'></td>
</tr>
</table>
 <p><input type="submit"></p>
 </form>

var max_population=10;

  window.addEventListener('DOMContentLoaded', function() {
   var form = document.querySelector('form');
    form.addEventListener('input', function(e){
        var el = e.target;                                                                      
        el.classList.contains('text') && el.classList[ (el.value>max_population)?'add':'remove'] ('RedText');
    });
   });
   
   
   function validate_form ( )
{
	valid = true;

        if ( document.units.unit1.value >max_population  )
        {
                document.getElementById("elem").style.display = "block";
                 setTimeout(function(){document.getElementById('elem').style.display = 'none';}, 2000);
                valid = false;
        }

        return valid;
}

Вот что имеется на текущий момент, все работает прекрасно.
Но как сделать, что бы картинка показывалась перед текстом, ну как бы сказать поверх текста

[ksa]

как сделать, что бы картинка показывалась перед текстом, ну как бы сказать поверх текста

Сделай тестовый пример для того, что ты хочешь.
Не огрызки, как сейчас, а полный тестовый пример который можно запустить и на нем показать варианты решений...