Сверстать форму

@vozup · Регистрация: 25.12.2011

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

Помогите сверстать форму. Вот сама форма

HTML5
1
2
3
4
5
6
<form action="send.php" method="POST" name="send_meil" id="send_form">
    <div id="send">
        <input type="email" name="send_meil_to_author" value="Send Emeil and Get Notified..." id="input_email">
        <input type="image" src="images/arrow_button.png">
    </div>
    </form>

Вот ее CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#send_form{
    margin: 0 auto;
    width: 400px;
    height: 90px;
    margin-bottom: 40px;
}
 
input[type="email"]{
    width: 240px;
    height: 30px;
    font: 16px bold arial;
    text-align: center;
}
 
#send{
    margin:0 auto;
    width: 330px;
}

При добавлении imagebutton в div="send" поле input type="email" смещается в низ блока.

@killlfun · 24.06.2014, 14:37

vozup, примени к кнопке position:absolute;

HTML5
1
2
3
4
5
6
<form action="send.php" method="POST" name="send_meil" id="send_form">
    <div id="send">
        <input type="email" name="send_meil_to_author" value="Send Emeil and Get Notified..." id="input_email">
        <input type="image" id="image" src="https://www.cyberforum.ru/images/arrow_button.png">
    </div>
    </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
#send_form{
    margin: 0 auto;
    width: 400px;
    height: 90px;
    margin-bottom: 40px;
}
 
input[type="email"]{
    width: 240px;
    height: 30px;
    font: 16px bold arial;
    text-align: center;
}
 
#send{
    margin:0 auto;
    width: 330px;
}
 
#image{
position:absolute;
margin-left:-20px;
}

@BarbosLV · 24.06.2014, 14:52

Пример.

Кликните здесь для просмотра всего текста

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
<style type="text/css">
.send_form{
    background-color:#0b254f;
    width: 400px;
    height: 70px;
    padding: 10px;
    text-align:center;
}
.input_email{
    font-family:"Arial Black", Gadget, sans-serif;
    border:1px solid #999;
    border-radius: 5px;
    font-size:10px;
    width:220px;
    height:24px;
    padding:0 0 0 5px;
    margin:0;
}
.knopa{
    width:34px;
    height:34px;
    text-align:center;
    border:3px solid #0b254f;
    border-radius: 50%;
    padding:0;
    color:#FFF;
    font-size:16px;
    text-shadow: 1px 1px 0 #666;
    font-family:"Times New Roman", Times, serif;
    margin-left:-14px;
    background: -moz-linear-gradient(top,  rgba(0,153,204,1) 0%, rgba(0,102,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,153,204,1)), color-stop(100%,rgba(0,102,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,153,204,1) 0%,rgba(0,102,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,153,204,1) 0%,rgba(0,102,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,153,204,1) 0%,rgba(0,102,153,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,153,204,1) 0%,rgba(0,102,153,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099cc', endColorstr='#006699',GradientType=0 ); 
 
}
</style>
 
<form action="send.php" method="POST" name="send_meil" class="send_form">
<input type="email" name="send_meil_to_author" placeholder="Send Emeil and Get Notified..." class="input_email">
<input type="submit" class="knopa" value="→">
</form>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .