Здравствуйте. В этом уроке Вы узнаете, как можно встроить небольшое изображение в поля формы с помощью jQuery. Это будет не очень сложно, поэтому приступим-с. Для начала посмотрите демонстрацию результата урока и скачайте необходимые файлы для работы урока - исходники:
Шаг 1. HTML-каркас формы.
Каркас необходимой нам формы будет предельно простым. Вы можете сами построить его, а затем сравнить полученный результат с моим или просто скопировать ниже приведенный текст и вставить там, где Вам будет это нужно:
HTML:
<fieldset id="sampleForm">
<label>Полное имя (Ф. И. О.)</label><input type="text" />
<label>Дата рождения</label><input type="text" class="inputWithImge" />
<img src="calendar.png" alt="Нажмите на календарик для выбора даты" onclick="alert('А здесь должен вылетать Ваш календарик!');" />
<label>Город</label><input type="text" />
<label>Индекс</label><input type="text" />
<label>Страна</label><input type="text" />
<p><input name="send" type="button" value="Отправить" /></p>
</fieldset>
Здесь я уже присоединил необходимые стили к полям формы и изображение с календариком.
Шаг 2. Стилизация формы:
Вторым этапом нашей работы будет конечно же стилизация формы. Здесь мы всего лишь изобразим те стили, которые присваивали элементам формы и немного поиграемся с ними. Код стилизации будет выглядеть следующим образом(вставьте его между тегами <head;> и </head;>):
CSS:
<style type="text/css">
body { font-family: Arial, Helvetica, Sans-serif; font-size:13px;}
#sampleForm label { display:block; margin-top:10px;}
#sampleForm input[type="text"] { width:200px; border:solid 1px #000; padding:3px 0px;}
#sampleForm img { vertical-align:middle; cursor:pointer; }
.imageInputWrapper{ width:200px; border:solid 1px #000; }
#sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}
</style>
Шаг 3. "Привязка" основного фреймфорка jQuery.
Теперь мы обязательно должны "привязать" фреймворк jQuery. Ниже я разместил код так называемой "привязки", который Вы должны вставить между тегами <head;> и </head;> своего документа:
<script src="jquery.js" type="text/javascript"></script>
Шаг 4. jQuery-доработки.
Теперь мы должны немного доработать нашу форму. Чтобы она правильно и красиво отображалась нам нужно вставить небольшой jQuery-код между тегами <head;> и </head;>. Выглядеть он будет следующим образом:
<script type="text/javascript">
$(document).ready(function() {
$(".inputWithImge").each(function(){
$(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
});
});
</script>
Заключение.
Вот и все готово! Надеюсь, Вы найдете применение этому уроку на своем сайте! Если возникнут какие-либо вопросы, пишите в комментариях к данному уроку. На этом все, до новых встреч!