Создание адаптивных форм

317

28 марта 2017, 10:47

Хочу на сайт добавить контактную форму, но не совсем понимаю как сделать плавающими поля формы (input type="text"), ведь у поля ввода есть фиксированная ширина (атрибут size)?

Answer 1

Например:

input { 
  width: 100%; 
}

<form > 
  <input type="text" size="200"> 
</form>

Или с помощью media queries (раз адаптивная):

input { 
  width: 50%; 
} 
 
@media screen and (min-width: 420px) { 
  input { 
    width: 100%; 
  } 
}

<form > 
  <input type="text" size="200"> 
</form>

P.S: Смысл в том, что даже если задан атрибут size, Вы можете управлять шириной поля input с помощью стилей.

Answer 2

Тоже вариант, правильно?

form input {display: block; width: 70%; margin: 15px auto;} 
form button {float: right; margin-right: 15%;} 
 
@media only screen and (max-device-width: 450px){ 
form input {width: 90%;} 
form button {margin-right: 5%;} 
}

<form> 
<input type="text" placeholder="ИМЯ"/> 
<input type="email" placeholder="EMAIL"/> 
<input type="password" placeholder="ПАРОЛЬ"/> 
<button type="submit">Готово</button> 
</form>

И атрибут size у input - совсем необязательный, так же как и у textarea атрибуты cols и rows.