Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48

Как сверстать форму

28.06.2016, 14:45. Показов 2012. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Ребята, подскажите как сверстать форму. Проблема в border-radius и box-shadow. Спасибо за помощь)
Миниатюры
Как сверстать форму  
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
28.06.2016, 14:45
Ответы с готовыми решениями:

Как сверстать форму
Помогите сверстать правильно с css форму буду очень благодарен

Как правильно сверстать форму?
Всем привет. Недавно увлёкся вёрсткой и начал верстать свой первый макет. Подскажите пожалуйста, как можно правильно сверстать эту форму

Как сверстать форму обратной связи?
Доброго времени суток. Подскажите, мне пожалуйста, как создать форму обратной связи, если имеется вот такая картинка?

8
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.06.2016, 14:51
Приложите свои наработки с проблемой
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
28.06.2016, 14:53  [ТС]
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
  <div class="form-group form-group-name">
    <label for="inputName">Name</label>
    <input type="text" id="inputName">
  </div>
div class="form-group form-group-email">
  <label for="inputEmail">Email</label>
  <input type="email" id="inputEmail">
</div>
<div class="form-group form-group-message">
  <label for="inputMessage">Message</label>
  <input type="text" id="inputMessage">
</div>
<button class="button">Send</button>
</form>
CSS
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
.form-group
    display: inline-block
    position: relative
    margin: 0
    overflow: hidden
    input
        outline: none
        box-shadow: none
        border: none
        padding: 22px 5px 5px 7px
        border-radius: 3px
    label
        position: absolute
        left: 7px
        top: 1px
        font-size: em(13px)
        font-family: "HelveticaNeueLTPro-Bd", sans-serif
        font-weight: normal
        color: #cacaca
 
.form-group-name
    input
        border-top: 1px solid #cccccc
        border-left: 1px solid #cccccc
        border-bottom: 1px solid #cccccc
        box-shadow: inset 0px 0px 5px 1px rgba(232,232,232,1)
.form-group-email
    input
        border-top: 1px solid #cccccc
        border-bottom: 1px solid #cccccc
 
.form-group-message
    input
        border-top: 1px solid #cccccc
        border-right: 1px solid #cccccc
        border-bottom: 1px solid #cccccc
 
.button
    display: inline-block
    border: 1px solid #fbc800
    border-radius: 3px
    background-color: $accent
    font-family: "HelveticaNeueLTPro-Bd", sans-serif
    font-weight: normal
    font-size: em(18px)
    color: #fff
    padding: 12px 33px
    transition: all .5s ease
    &:hover
        text-decoration: none
        color: #fff
        background-color: lighten($accent, 9%)
    &:focus
        text-decoration: none
        color: #fff
        background-color: darken($accent, 7%)
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
28.06.2016, 15:01  [ТС]
Получается вот так) Не могу додуматься как по-середине убрать box-shadow и border-radius
Миниатюры
Как сверстать форму  
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.06.2016, 15:08
Сюда лучше скомпилированный код выкладывать. Поместите инпуты в контейнер и уже ему задайте скругление углов и тень, а не инпутам.
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
28.06.2016, 15:13  [ТС]
Понял, спасибо, сейчас попробую!
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
28.06.2016, 15:40  [ТС]
Как-то не получается.
Не могу скинуть скомпилированный код, так как он сразу галпом минифицируется
теперь тень пропала совсем
И соеденить их непонятно как((((

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
                    <form>
                        <div class="form-group form-group-name">
                            <label for="inputName">Name</label>
                            <div class="input-container">
                                <input type="text" id="inputName">
                            </div>      
                            
                        </div>
                        <div class="form-group form-group-email">
                            <label for="inputEmail">Email</label>
                            <div class="input-container">
                                <input type="email" id="inputEmail">
                            </div>
                            
                        </div>
                        <div class="form-group form-group-message">
                            <label for="inputMessage">Message</label>
                            <div class="input-container">
                                <input type="text" id="inputMessage">
                            </div>
                        </div>
                        <button class="button">Send</button>
                    </form>
CSS
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
form
    margin-top: 25px
 
.form-group
    display: inline-block
    position: relative
    margin: 0
    .input-container
        box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.15)
        border-radius: 4px
        border: 1px solid #cccccc
        overflow: hidden
        input
            outline: none
            border: none
            padding: 22px 5px 5px 7px   
            
    label
        position: absolute
        left: 7px
        top: 1px
        font-size: em(13px)
        font-family: "HelveticaNeueLTPro-Bd", sans-serif
        font-weight: normal
        color: #cacaca
Миниатюры
Как сверстать форму  
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.06.2016, 16:02
Лучший ответ Сообщение было отмечено Maximka24 как решение

Решение

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrapper {
  width: 50%;
  margin: 0 auto;
  font-size: 0;
  padding: 5px;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
}
.wrapper .input-container {
  width: 33%;
  display: inline-block;
  font-size: 24px;
}
.wrapper .input-container label {
  padding-top: 0;
  font-size: 14px;
}
.wrapper .input-container input {
  border: 0;
  width: 100%;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
  <div class="input-container">
    <label for="">Имя</label>
    <input type="text" />
  </div>
  <div class="input-container">
    <label for="">Почта</label>
    <input type="text" />
  </div>
  <div class="input-container">
    <label for="">Сообщение</label>
    <input type="text" />
  </div>
</div>
Результат
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
28.06.2016, 16:08  [ТС]
Спасибо! С меня пиво!!!!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
28.06.2016, 16:08
Помогаю со студенческими работами здесь

Подскажите, как сверстать выпадающую форму?
Стоит задача сверстать сайт. Все готово, кроме этой формы. Подскажите, как ее сверстать или где можно посмотреть как это делается. Новичок...

Сверстать форму
Помогите сверстать форму. Вот сама форма &lt;form action=&quot;send.php&quot; method=&quot;POST&quot; name=&quot;send_meil&quot; id=&quot;send_form&quot;&gt; &lt;div...

Необходимо сверстать форму по макету
Пытаюсь делать через таблицу, но когда пытаюсь изменить ширину 1 столбца (Пароль должен содержать не мение 4-х символов и не может...

Сверстать форму по макету с помощью HTML и CSS
Мне для диплома нужна экранная форма(макет), сначала сделал на C#, но мне сказали что нужно на HTML, попробовал его изучить и понял что это...

Ребята кому не трудно можете сверстать форму входа
Ребята кому не трудно можете сверстать форму входа.Я отблагодарю. http://6.firepic.org/6/images/2016-02/22/f582e9gm6yj2.png ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru