DWWEB.RU Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ

Что такое textarea размеры обозначение пример

Сегодня поговорим о текстовом поле в форме - textarea.Что такое textarea, какие параметры есть у textarea, как переводится!? В общем разберем все, что касается поля ввода textarea.

Все о поле ввода textarea

  1. Что такое textarea
  2. Тип textarea type="text"
  3. Ширина и высота textarea
  4. Как сделать подсказку внутри textarea
  5. Как убрать обводку textarea при нажатии/вводе
  6. Как запретить растягивание textarea
  7. Как поставить textarea посередине страницы, блока
  8. Как сделать в textarea внутренние отступы
  9. Как сделать в textarea наружные отступы
  10. Скачать можно здесь
  1. Что такое textarea

    Textarea это тегв html.

    Как обозначается textarea!?

    В отличии от одинарного тега input , то textarea – это двойной тег…

    Код:

    <textarea></textarea>

    Результат:

    Как переводится textarea

    Textarea - переводится, как Text - текст, area - поле, если соединить вместе, то Textarea можно перевести, как поле для текста...

  2. Тип textarea type="text"

    Для textarea – указывать тип поля text не нужно!

  3. Ширина и высота textarea

    Ширину и высоту для textarea можно выразить несколькими способами и типами.

    1). Использование в высоте и ширине textarea cols и rows

    <textarea rows="число" cols="число"></textarea>

    Обязательный атрибут для textarea rows + cols

    Обязателен в HTML4, не обязателен в HTML5.

    cols – столбец определяемый шириной моноширного(все буквы одной ширины) шрифта по умолчанию, rows - количество строк…

    Значения

    Любое целое положительное число.

    Пример textarea rows + cols

    <textarea rows="5" cols="50"></textarea>

    Результат:

    2). Использование в высоте и ширине textarea пиксели

    Не стану все меры расписывать(использую очень-очень редко): "em, vw, vh, vmin, vmax и функция calc" приведем пример использования пикселей в качестве единицы измерения:

    <textarea style="width: 500px; height: 50px;"></textarea>

    Пример ширина и высота textarea в пикселях:

    3). Использование в высоте и ширине textarea процентов

    Использование в качестве единицы измерения процентов... поставим ширину 60% высоту 50%

    Код:

    <textarea style="width: 100%; height: 50%;"></textarea>

    Пример ширина и высота textarea в процентах:


    Вопрос на засыпку! Почему в выше приведенном примере высота textarea в процентах никак не сработала!?

    Вывод можете из ниже приведенного кода:

    <div style=" width: 100%; height: 200px; border:1px solid red">

    <textarea style="width: 60%; height: 50%;"></textarea>

    </div>

    Пример 2 ширина и высота textarea в процентах:

    Но если мы помести наш textarea в какой-то другой блок с явно выставленными размерами, то:

    4). Растянуть textarea на всю ширину блока/страницы

    Как растянуть textarea на всю ширину блока, страницы!? Если как мы выяснили, если ничего не препятствует растягиванию textarea на всю ширину блока/страницы, то просто ставим в ширину textarea 100%.

    Пример textarea(<textarea style="width: 100%;"></textarea>) с шириной на всю ширину блока/страницы

    5). Растянуть textarea на всю высоту блока/страницы

    На эту тему мы делали отдельную страницу

  4. Как сделать подсказку внутри textarea

    Для того, чтобы сделать подсказку внутри textarea нам потребуется атрибут [placeholder]? вставляем в первый тег textarea placeholder с текстом...
    <textarea style="width: 100%; height: 50px;" placeholder="Подсказка внутри textarea"></textarea>

    Подсказка внутри textarea пример:

  5. Как убрать обводку textarea при нажатии/вводе

    Для того, чтобы удалить обводку, при нажатии вводе данных в поле ввода textarea поставьте в стилях css, либо внутри поля поставьте свойство : outline:none;
    <textarea style="width: 100%; height: 50px; outline:none;" placeholder="Подсказка внутри textarea"></textarea>

    Пример удаления обводки в textarea

  6. Как запретить растягивание textarea

    Иногда требуется запретить растягивание textarea.

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

    Для того, чтобы запретить растягивание по горизонтали нужно указать, как растягивание возможно, если мы введем в стили resize: vertical;, то растягиваться textarea будет только по вертикали...

    <textarea style="width: 100%; height: 50px; outline:none; resize: vertical;" placeholder="Как запретить растягивание по горизонтали"></textarea>

    Пример textarea с запретом растягивания по горизонтали!

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

    Для того, чтобы запретить растягивание по вертикали нужно выставить в каком направлении растягивать можно! Ставим в стили textarea resize: horizontal;

    Пример textarea с запретом растягивания по вертикали!

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

    Для того, чтобы запретить растягивание по всем направлениям, в стилях textarea ставим outline:none;

    Пример textarea с запретом растягивания ппо всем направлениям textarea !

  7. Как поставить textarea посередине страницы, блока

    Для того, чтобы поставить textarea посередине, нужно в стили textarea добавить... margin: auto; display: block;
    <textarea style="width: 300px; height: 50px; outline:none; resize: none; margin: auto; display: block;" placeholder="Как поставить textarea посередине страницы, блока"></textarea>

    Пример как расположить textarea посередине страницы, блока

  8. Как сделать в textarea внутренние отступы

    Для того, чтобы сделать внутренние отступы в textarea нужно добавить в стили textarea padding: числоpx;, давайте на примере textarea сделаем внутренний отступ 20px
    <textarea style="width: 400px; height: 50px; outline:none; resize: none; margin: auto; display: block; padding: 20px;" placeholder="Как сделать в textarea внутренние отступы"></textarea>

    Пример textarea с внутренними отступами 20px

    Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в padding ставим 4 значения и указываем, с какой стороны вам нужно сделать внутренний отступ!

    padding: верхpx справаpx снизуpx слеваpx;
    Если отступ с какой-то стороны не требуется ставим 0px

  9. Как сделать в textarea наружные отступы

    Для того, чтобы продемонстрировать наружные отступы, нам потребуется наш textarea поместить во внутрь другого блока... теперь уже данный блок поставим посередине и для div поставим display: table;, чтобы он не растягивался на всю ширину...

    <div style="border: 1px solid red; display: table; margin: auto;">

    <textarea style="width: 400px; height: 50px;resize: none; margin: 20px;" placeholder="Как сделать в textarea наружные отступы"></textarea>

    </div>

    Привер как сделать в textarea наружные отступы

    По аналогии с padding :

    Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в margin 4 значения и указываем, с какой стороны вам нужно сделать наружный отступ!

    margin: верхpx справаpx снизуpx слеваpx;
    Если отступ с какой-то стороны не требуется ставим 0px


Последняя дата редактирования : 2020-01-16 01:41
Название скрипта :Пример textarea(высота, ширина)
Скрипт № 72.2Ссылка на скачивение: Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Теги:
поле textarea ширина поля textarea поле textarea htmltextarea textarea html textarea css input textarea textarea размер textarea строки текст в textarea поле textarea textarea высота type textarea textarea rows тег textarea textarea ширина textarea атрибуты textarea height textarea запретить растягивание запретить изменение textarea textarea перенос строки input type textarea размеры textarea html textarea name textarea cols содержимое textarea форма textarea textarea size textarea количество символов элемент textarea ширина поля textarea textarea html запретить изменение размера input textarea html

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020