Как для поля textarea HTML запретить изменение размера?

Как для поля textarea HTML запретить изменение размера?

Приветствую вас на сайте Impuls-Web!

Иногда, при верстке сайта, в частности, при работе с контактными формами возникает необходимость в HTML запретить изменение размера textarea. Вызвать такую необходимость могут разные причины. Например, вы хотите убрать уголок-индикатор, позволяющий растянуть текстовое поле из правого нижнего угла:

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

Или же вы хотите ограничить возможности пользователя по изменению размера поля textarea по горизонтали или по вертикали, для того, что бы сохранить верстку от нежелательных искажений:

Текстовое поле выходит за пределы формы

Для поля textarea HTML запретить изменение размера можно несколькими способами.

Как в HTML полностью запретить изменение размера textarea?

Если вы хотите полностью заблокировать изменение размера текстового поля textarea, а так же убрать уголок-индикатор, то наиболее эффективным будет использование свойства resize со значением none.

Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.

Как для textarea HTML запретить изменение размера в одном направлении?

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

Текстовое поле маленького размера

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

Поле textarea растянутое по высоте

Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:

  • vertical – разрешает изменение размера текстового поля по вертикали
  • horizontal— разрешает изменение размера по горизонтали

Пример использования:

Как для textarea HTML ограничить изменение размера?

Теперь, когда мы разрешили пользователю менять только высоту поля textarea, нам осталось устранить маленький нюанс, а именно ограничить максимальную высоту поля при помощи CSS свойства max-height:

Теперь пользователь может, при необходимости, растянуть поле по высоте, но не более 300 пикселей.

В случае если вам нужно ограничить изменение размера по ширине, то вам нужно указать вместо max-height, свойство, задающее максимальную ширину max-width с необходимым максимальным значением ширины в пикселях или процентах.

На этом, пожалуй, все. Надеюсь, данные приемы работы будут для вас полезны, и вы с легкостью сможете в своих формах для textarea HTML ограничить или запретить изменение размера.

Если вам понравилась данная статья, не забудьте оставить комментарий и поделиться ею в социальных сетях со своими друзьями.

Желаю вам успехов в создании вашего сайта! До встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

1 комментарий

  1. //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif

    При машстабируемой верстке заменить 300рх на 18.750em  //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif