Посоветуйте с оформлением <form>

@Runtu · Регистрация: 23.09.2015

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

Здравствуйте, подскажите или направьте на ресурс где можно решить эту проблему.
Не могу разобраться с оформлением, а именно расположить поля как показано на рисунке.
Исходный код:

CSS

span {
    display: block;
    margin-bottom: 5px;
}
 
label, {
    display: block;
    float: left;
}
 
input {
    display: block;
    width: 224px;
    height: 5px;
    margin-bottom: 40px;
    padding: 10px 0px;
    background-color: #27292b;
    border: 1px solid #47494b;
    border-radius: 3px;
    text-indent: 10px;
}

Кто что посоветует, буду очень благодарен

@Аццкий Прогер · 28.02.2016, 20:10

у вас у лейбла и инпута стоит свойство display: block, а если хотите их в ряд поставить, то поменяйте на display: inline-block
Это что первое в глаз бросилось

@Runtu · 28.02.2016, 20:19 **[ТС]**

да спасибо, за совет))
и я предполагаю что лучше каждому полю дать класс ну или id что бы label for связывался с полем (input)
а для поля Phone Numder задать размер что бы они выстроились друг за другом?

@Аццкий Прогер · 28.02.2016, 20:26

Не плохо было бы всем полям задать четкие размеры. Ид не рекомендуется использовать, лучше все классами.
А вообще, если не хочется углубляться в верстку, то можно использовать фреймворки типа Бутстрапа, у большинства уже есть готовые формы, и использовать их не сложно

@Andriy Krit · 28.02.2016, 20:31

Да, и float не забыть. (ну или inline-block)

Запятая после лейбла в исходном коде отсутствует надеюсь?

Добавлено через 2 минуты
Бутстрап не лучший вариант, как по мне, хоть у него и присутствует масса интересных решений. Слишком уж он объемный.

@Runtu · 28.02.2016, 20:34 **[ТС]**

Да я с вами согласен, что можно было бы использовать bootstrap, но данное задание состоит в том что нужно просто сверстать формы, они не будут размещаться на сайте, и я столкнулся с проблемой каким образом разместить их так )) .

Добавлено через 1 минуту
Да запятая отсутствует

@evikza · 28.02.2016, 20:38

Runtu, вот набросал вам вариант, фиксированный размер формы, а в ней уже сетка в процентах, мне кажется отличный вариант

HTML5

<div class="form">
  <div class="row">
    <div class="column">
      <label>First Name</label>
      <input type="text" class="form__input" />
    </div>
    <div class="column">
      <label>Last Name</label>
      <input type="text" class="form__input" />
    </div>
    <div class="column">
      <label>Email*</label>
      <input type="text" class="form__input" />
    </div>
    <div class="column">
      <label>Phone Number</label>
      <input type="text" class="form__input" />
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  font: 14px 'Lato', sans-serif;
}
 
.form {
  display: block;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background: #27292A;
  border-radius: 5px;
  color: #fff;
}
 
.form__input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  outline: 0;
  background: #27292A;
  color: #fff;
  border-radius: 3px;
}
 
.column {
  position: relative;
  width: 50%;
  float: left;
  min-height: 1px;
  padding: 10px;
}
 
.row:before,
.row:after {
  content: " ";
  display: table;
}
 
.row:after {
  clear: both;
}

Рабочий пример: http://codepen.io/evikza/pen/wGvYNw

@Runtu · 28.02.2016, 20:49 **[ТС]**

А Phune Number расположить 3 поля
я допустим примеру к полю дописываю 2 input и добавляю class phone и потом уже css классу ставлю width:60px; а третий уже по размеру блока подтянится.

@evikza · 28.02.2016, 21:13

Runtu, 2 блока с width: 30%; и один фиксированный в width: 100px;

Воть http://codepen.io/evikza/pen/wGvYNw

HTML5

<div class="form">
  <div class="row">
    <div class="column">
      <label>First Name</label>
      <input type="text" class="form__input" />
    </div>
    <div class="column">
      <label>Last Name</label>
      <input type="text" class="form__input" />
    </div>
    <div class="column">
      <label>Email*</label>
      <input type="text" class="form__input" />
    </div>
    <div class="column">
      <label>Phone Number</label>
      <input type="text" class="form__input__number" maxlength="3"/>
      <input type="text" class="form__input__number" maxlength="3"/>
      <input type="text" class="form__input__number fixed" maxlength="4"/>
    </div>
  </div>
</div>

CSS

@import url([url]https://fonts.googleapis.com/css?family=Lato:400,300,700);[/url]
* {
  box-sizing: border-box;
  font: 14px 'Lato', sans-serif;
}
label {
  display: block;
}
.form {
  display: block;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background: #27292A;
  border-radius: 5px;
  color: #fff;
}
 
.form__input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  outline: 0;
  background: #27292A;
  color: #fff;
  border-radius: 3px;
}
.form__input__number {
  display: inline-block;
  width: 30%;
  margin: 10px 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  outline: 0;
  background: #27292A;
  color: #fff;
  border-radius: 3px;
}
.fixed {
  width: 100px;
}
.column {
  position: relative;
  width: 50%;
  float: left;
  min-height: 1px;
  padding: 10px;
}
 
.row:before,
.row:after {
  content: " ";
  display: table;
}
 
.row:after {
  clear: both;
}

@Runtu · 28.02.2016, 21:17 **[ТС]**

evikza, спасибо большое

@Аццкий Прогер 21 / 10 / 5 Регистрация: 07.01.2013 Сообщений: 222
	28.02.2016, 20:10	2
	у вас у лейбла и инпута стоит свойство display: block, а если хотите их в ряд поставить, то поменяйте на display: inline-block Это что первое в глаз бросилось 0

@Runtu 0 / 0 / 0 Регистрация: 23.09.2015 Сообщений: 6
	28.02.2016, 20:19 [ТС]	3
	да спасибо, за совет)) и я предполагаю что лучше каждому полю дать класс ну или id что бы label for связывался с полем (input) а для поля Phone Numder задать размер что бы они выстроились друг за другом? 0

@Аццкий Прогер 21 / 10 / 5 Регистрация: 07.01.2013 Сообщений: 222
	28.02.2016, 20:26	4
	Не плохо было бы всем полям задать четкие размеры. Ид не рекомендуется использовать, лучше все классами. А вообще, если не хочется углубляться в верстку, то можно использовать фреймворки типа Бутстрапа, у большинства уже есть готовые формы, и использовать их не сложно 0

@Andriy Krit 0 / 0 / 1 Регистрация: 28.02.2016 Сообщений: 15
	28.02.2016, 20:31	5
	Да, и float не забыть. (ну или inline-block) Запятая после лейбла в исходном коде отсутствует надеюсь? Добавлено через 2 минуты Бутстрап не лучший вариант, как по мне, хоть у него и присутствует масса интересных решений. Слишком уж он объемный. 0

@Runtu 0 / 0 / 0 Регистрация: 23.09.2015 Сообщений: 6
	28.02.2016, 20:34 [ТС]	6
	Да я с вами согласен, что можно было бы использовать bootstrap, но данное задание состоит в том что нужно просто сверстать формы, они не будут размещаться на сайте, и я столкнулся с проблемой каким образом разместить их так )) . Добавлено через 1 минуту Да запятая отсутствует 0

@Runtu 0 / 0 / 0 Регистрация: 23.09.2015 Сообщений: 6
	28.02.2016, 20:49 [ТС]	8
	А Phune Number расположить 3 поля я допустим примеру к полю дописываю 2 input и добавляю class phone и потом уже css классу ставлю width:60px; а третий уже по размеру блока подтянится. 0

@Runtu 0 / 0 / 0 Регистрация: 23.09.2015 Сообщений: 6
	28.02.2016, 21:17 [ТС]	10
	evikza, спасибо большое 0

Посоветуйте с оформлением <form>

Решение