Оглавление

Избавление от переносов строки и потери места на странице

Форма является блочным элементом и, подобно абзацу, располагается на новой строке. Как правило, такое поведение вполне соответствует поставленным целям, однако в определенных случаях может возникнуть необходимость добавления небольшой формы непосредственно в потоке элементов документа. В качестве примера можно привести окошко поиска, расположенное на одном уровне с другими элементами «шапки».

 

Решение
Чтобы форма отображалась как внутритекстовый, а не блочный, элемент, можно задать значение inline свойству display:

Ваш адрес электронной почты:
<form method="post" action="inline.html">
   <div><input type="text" name="name" id="name" class="txt" />
      <input type="submit" name="btnSubmit" id="btnSubmit"
	   value="Отправить" class="btn" />
   </div>
</form>


  

form {
   display: inline;
}
input.txt {
   color: #00008B;
   background-color: #E3F2F7;
   border: 1px inset #00008B;
   width: 200px;
}
input.btn {
   color: #00008B;
   background-color: #ADD8E6;
   border: 1px outset #00008B;
}


Как видно на рис. 6.5, благодаря использованию CSS форма встраивается в общий поток документа и отображается как внутритекстовый элемент рядом с окружающим текстом:

 

Форма как внутритекстовый элемент

Рис. 6.5. Форма как внутритекстовый элемент

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити