Подскажите пожалуйста как сделать в форме иконку ?

@Kuk2901 · Регистрация: 08.06.2019

Студворк — интернет-сервис помощи студентам

Вот такое должно получится

Подскажите пожалуйста как сделать в форме иконку ?

я нарисовал иконки в иллюстраторе, но как поместить в форму эти иконки и текст (Имя, Элект.почта, телефон, пароль)?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
    <title></title>
   <style type="text/css">
html, body, h1, form, fieldset, input {
  margin: 0;
  padding: 0;
  border: none;
  }
 
body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }
 
        #registration {
            color: #fff;
            background: #2d2d2d;
         
            border-radius: 10px;
            margin: 10px;
            width: 430px;
            }
 
 #registration a {
      color: #8c910b;
      text-shadow: 0px -1px 0px #000;
      }
     
#registration fieldset {
      padding: 20px;
      }
     
input.text {
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border:solid 1px #444;
      font-size: 14px;
      width: 90%;
      padding: 7px 8px 7px 30px;
   
      background: #ddd url('14.png') no-repeat 4px 5px;
      background: url('14.png') no-repeat 4px 5px, -moz-linear-gradient(
           center bottom,
           rgb(225,225,225) 0%,
           rgb(215,215,215) 54%,
           rgb(173,173,173) 100%
           );
      background:  url('14.png') no-repeat 4px 5px, -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(225,225,225)),
         
          );
      color:#333;
      text-shadow:0px 1px 0px #FFF;
}     
 
 input#email {
     background-position: 4px 5px;
    background-position: 4px 5px, 0px 0px;
    }
   
 input#password {
     background-position: 4px -20px;
    background-position: 4px -20px, 0px 0px;
    }
   
 input#name {
     background-position: 4px -46px;
    background-position: 4px -46px, 0px 0px;
    }
   
 input#tel {
     background-position: 4px -76px;
    background-position: 4px -76px, 0px 0px;
    }
   
#registration h2 {
    color: #fff;
    text-shadow: 0px -1px 0px #000;
    border-bottom: solid #181818 1px;
    -moz-box-shadow: 0px 1px 0px #3a3a3a;
    text-align: center;
    padding: 18px;
    margin: 0px;
    font-weight: normal;
    font-size: 24px;
    font-family: Lucida Grande, Helvetica, Arial, sans-serif;
    }
   
#registerNew {
    width: 183px;
    height: 44px;
    border: none;
    text-indent: -9999px;
    background: url('7.png') no-repeat;
    cursor: pointer;
    float: right;
    }
 #registration p {
      position: relative;
      }
     
fieldset label.infield /* .infield label added by JS */ {
    color: #333;
    text-shadow: 0px 1px 0px #fff;
    position: absolute;
    text-align: left;
    top: 3px !important;
    left: 35px !important;
    line-height: 29px;
    }
</style>
</head>
<body>
<div id="registration">
 <h2>Создать аккаунт</h2>
 
 <form id="RegisterUserForm" action="" method="post">
     <fieldset>
         <p>
            <label for="name">Имя</label>
            <input id="name" name="name" type="text" class="text" value=""  />
 
         </p>
       
         <p>
            <label for="tel">Телефон</label>
            <input id="tel" name="tel" type="tel" class="text" value="" />
 
         </p>
       
         <p>
            <label for="email">Электронный почтовый адрес</label>
            <input id="email" name="email" type="email" class="text" value="" />
         </p>
       
         <p>
            <label for="password">Пароль</label>
            <input id="password" name="password" class="text" type="password" />
         </p>
       
         <p><input id="acceptTerms" name="acceptTerms" type="checkbox" />
            <label for="acceptTerms">
                Я соглашаюсь с <a href="">Условиями</a> и <a href="">Правилами конфиденциальности</a>
            </label>
         </p>
       
         <p>
            <button id="registerNew" type="submit">Регистрация</button>
         </p>
     </fieldset>
 
 </form>
</div>
</body>
</html>

@Panda58dev · 13.04.2020, 08:38

HTML5
1
2
3
4
5
<p>
      <svg><svg>
      <label for="name">Имя</label>
      <input id="name" name="name" type="text" class="text" value=""  /> 
</p>

И просто позиционировать картинку...

@Kuk2901 · 13.04.2020, 10:27 **[ТС]**

Panda58dev, вот так?

HTML5
1
2
3
<svg>
                <img src="12_1.png">
 <svg>

Но тогда картинка выходит из поля

@Panda58dev · 13.04.2020, 10:48

Сообщение от Kuk2901

вот так?

Нет, просто я думал, что если рисовали в иллюстраторе, то это векторная картинка.
Тогда вот так:

HTML5
1
2
3
4
5
<p>
      <img src="12_1.png">
      <label for="name">Имя</label>
      <input id="name" name="name" type="text" class="text" value=""  /> 
</p>

Для <p> задайте какой нибудь класс, и пишите на него стили.

HTML5
1
2
3
4
5
<p class="line">
      <img src="12_1.png">
      <label for="name">Имя</label>
      <input id="name" name="name" type="text" class="text" value=""  /> 
</p>

CSS
1
2
3
.line {
  /*ваш код*/
}

Вообще, я так понимаю вы ещё начинающий, поэтому советую вам начать с более простой вёрстки, т.к. с формами вы пока не справитесь. Посмотрите разные курсы, самоучители, изучите семантику в html, почитайте что нибудь по css, найдите простенький макет, попробуйте сверстать по нему. Судя по вашему коду у вас ещё нет нужной базы знаний в этой сфере, поэтому пока оставьте эту форму и возьмите что то проще.

@Kuk2901 · 13.04.2020, 15:53 **[ТС]**

Panda58dev, Спасибо за помощь)

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@Kuk2901 2 / 0 / 0 Регистрация: 08.06.2019 Сообщений: 172
	13.04.2020, 15:53 [ТС]
	Panda58dev, Спасибо за помощь) 0