Справка по CSS Form Design

Question

Я всегда изо всех сил пытался разработать формы CSS, я никогда не смогу получить ввод и метку рядом.У вас есть какие-нибудь мудрые слова, которые могут мне помочь?

Я обычно использую поле в 10 пикселей внизу, но не могу выровнять их

Моя общая форма :

Name:
Email:
Phone:
Message:
text area

Answer 1

Я знаю, что получу обратную реакцию от людей, которые думают, что единственный возможный способ сделать что-то - это чистый CSS, div, span и т. Д. Однако ваша форма табличная.У вас есть столбец заголовков и столбец полей ввода.В этом случае из-за табличного макета допустимым решением могут быть таблицы ..... GASP!

Таблицы недопустимы для макета страницы ... позвольте еще раз повторить, что таблицы недопустимы дляраскладка.Однако у вас есть элемент страницы, вы не делаете полный макет страницы.Вы можете легко использовать элементы <th> для стилизации надписей для входных данных, что быстро и просто.В целом, табличное (табличное) решение будет менее многословным, чем многие из приведенных макетов CSS, что с точки зрения чистого HTML является победой.Он будет продолжать работать и верстаться правильно, даже если сервер будет заархивирован и не сможет загрузить внешний CSS-документ.Всем тем, кто считает, что с таблицами все в порядке, напомню, что это решение будет проверяться с W3 100% времени, если ваша таблица правильно структурирована.И он гораздо более совместим с различными браузерами, без проблем с блочной моделью в устаревших браузерах «crabby».Конечно, продолжайте постепенно улучшать с помощью CSS, как это является лучшей практикой.

Теория и практика, особенно в мире Интернета, - это две совершенно разные вещи.Теоретически, все мы должны производить 100% HTML5 / CSS3 / Semantic / SEO Optimized ... бла-бла-бла.На практике теория доходит до первой жалобы клиента.Прогрессивное улучшение - ключ к выживанию.Когда веб-форма превращается в большую корпоративную среду, деньги теряются и люди увольняются.По этой причине у Международного банка, над которым я недавно работал, были требования, которые требовали, чтобы все его веб-формы были табличными (собраны с таблицами). Трудно поспорить с портфелем сайтов, пользователи которых генерируют компании сотни миллионов долларов в год.

Answer 2

<style>

ul.anyclassname{
padding:0;
}

ul.anyclassname li{
list-style-type:none;
clear:left;
}

ul.anyclassname li label{
width:300px;
float:left;
}

.inputs{
float:left;
}

</style>

    <form>
    <ul class="anyclassname">
      <li>
      <label>Name:</label>
      <div div class="inputs"><input type="text"></div>
      </li>
      <li>
      <label>Email:</label>
      <div div class="inputs"><input type="text"></div>
      </li>
      <li>
      <label>Phone:</label>
      <div div class="inputs"><input type="text"></div>
      </li>
    </ul>
    </form>

Answer 3

Я написал полную форму в этом ответе: как мы можем создавать такие формы с помощью css & html? . Он содержит HTML-разметки и классы CSS, которые нужно запустить. Код также находится в скрипке: http://jsfiddle.net/vSqR3/64/ (Теперь с хорошим добавлением атрибута for, спасибо, Кайл!)

В этой ссылке вы найдете не только то, как поставить одну разметку рядом с другой, но и как установить размеры и границы для каждой.

Я настоятельно рекомендую вам поиграть на сайте jsfiddle.net. Вы сможете сразу же изменить и протестировать все свои изменения.

Answer 4

Я обычно делаю это:

<div>
  <label for="txtname">Name:</label>
  <input type="text" id="txtname" name="txtname"/>
</div>
<div>
  <label for="txtEmail">Email:</label>
  <input type="text" id="txtEmail" name="txtEmail"/>
</div>
<div>
  <label for="txtPhone">Phone:</label>
  <input type="text" id="txtPhone" name="txtPhone"/>
</div>
etc...

Тогда с моим CSS:

    label { width: 100px; display: inline-block; }

Что-то в этом роде. Ничего особенного, но они рядом, и с окружающим div вы получаете элемент уровня блока, который дает вам возврат строки после каждой пары.