HTML/Элемент textarea
Синтаксис
(X)HTML
<textarea> ... </textarea>
Описание
Элемент textarea (от англ. «text area» ‒ «текстовое поле») создаёт поле для ввода многострочного текста (в отличии от input допускается возможность переноса строки). Данный элемент может вмещать в себя неограниченное количество любых символов.
Примечание
Текст, вводимый в поле ввода многострочного текста, по умолчанию отображается ‘моноширинным шрифтом’ (шрифт «Courier», семейство шрифтов monospace).
Условия использования
Если предполагается отправлять содержимое textarea на сервер, то необходимо вложить данный элемент в форму) или присоединить поле ввода к ней при помощи атрибута «form». В JavaScript доступ к данному элементу можно получить через форму или при помощи глобального атрибута «id».
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Text Area: TEXTAREA | Перевод |
| 3.2 | TEXTAREA multi-line text fields | |
| 4.01 | 17.7 The TEXTAREA element DTD: Transitional
Strict
Frameset | |
| 5.0 | 4.10. 11 The textarea element | |
| 5.1 | 4.10.11. The textarea element | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
| 1.1 | Extensible HyperText Markup Language | |
Атрибуты
- autocomplete
- Указывает подсказку для автозаполнения поля.
- autofocus
- Указывает браузеру, что элемент должен получить фокус после загрузки страницы.
- cols
- Задаёт длину строки поля.
- dirname
- Указывает имя поля формы, используемое для отправки значения направления вывода текста.
- disabled
- Блокирует поле.
- form
- Присоединяет поле к форме.
- inputmode
- Подсказка для выбора методов ввода.
- maxlength
- Задаёт максимально допустимое количество символов в поле.
- minlength
- Задаёт минимально допустимое количество символов в поле.
- name
- Указывает имя поля.
- placeholder
- Задаёт текст-подсказку.
- readonly
- Блокирует возможность редактирования содержимого поля пользователем.
- required
- Указывает веб-браузеру, что данное поле обязательно к заполнению (перед отправкой данных на сервер).
- rows
- Задаёт количество видимых строк в текстовом поле.
- wrap
- Указывает параметры переноса строк.
- Глобальные атрибуты
- accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент textarea</title>
</head>
<body>
<h2>Пример использования элемента «textarea»</h2>
<textarea rows=»6″ cols=»55″>
Внутри данного элемента могут располагаться любые символы, в любой последовательности и в любом количестве.
В частности между открывающим и закрывающим тегом «textarea» могут располагаться любые элементы, например элемент <span>универсального контейнера стилей</span>.
</body>
</html>
Элемент textarea
Кросбраузерные input и textarea — Xiper
Автор: Евгений Рыжков Дата публикации:
Задача
Задать оформление для полей input[type=»text/password»] и textarea максимально одинаковое во всех популярных браузерах.
Теория
По умолчанию разные браузеры по разному отображают текстовые поля форм — различны:
- внутренние отступы (padding), сброс отступов через универсальный селектор тут не помогает
- шрифт (только для <textarea>) и его размер (хорошо видно в Safari)
- горизонтальное выравнивание текста (текст не на одной горизонтальной линии) в полях и рядом стоящих элементах (например, <label>)
поля в FF 3. 5 |
|
поля в IE 6 |
|
поля в Opera 9.6 |
|
поля в Safari 3.2 |
Разница становится заметней, когда привязываем необычное оформление полей.
Решение
Явно задаем для input[type=»text»], input[type=»password»] и textarea размер шрифта (font-size), внутренние отступы (padding). Для textarea так же указываем имя шрифта (font-family).
Заметка: для более предсказуемого поведения полей так же можно задать оформление границ (border), но это подпортит вид полей в некоторых браузерах (например, Opera поле станет прямоугольным, без скруглений углов) — используем при необходимости.
input[type="text"], input[type="password"] {
font-size: 100%;
padding: 0;
}
textarea {
font-size: 100%;
padding: 0;
font-family: arial;
}
Код для IE 6, который не понимает в CSS атрибуты (добавляем в ie6.css и подключаем к странице условными комментариями):
.
formText {
font-size: 100%;
padding: 0;
}
input {
z-index: expression(
runtimeStyle.zIndex = 1,
type == "text" ? (className += " formText") : 0,
type == "password" ? (className += " formText") : 0
)
}
Update: Дополнительные проблемы могут возникнуть, если полю нужно указать высоту и/или верхний внутренний отступ (padding-top). Для примера сделаем поле, которое должно быть высотой 24px, шириной 200px и отступом от верхней границы 3px:
input {
height: 24px;
width: 200px;
border: 1px solid #0000CC;
background: #99CCFF;
font-size: 12px;
padding: 3px 0 0 2px;
}
В итоге видим, что в разных браузерах текст в поле выравнивается по разному плюс размеры самого поля отличается:
| FF 3.5 | opera 10 | ie6 |
На размерах поля останавливаться не будем — нужно вспомнить просто о блочной модели и том, что ие6 ее не так понимает.
А вот чтобы выровнять текст, нужно следующее:
- указать высоту поля
- явно указать верхний и нижний отступы (padding-top / padding-bottom)
- ну и не забыть явно указать размер шрифта (font-size)
- задать высоту строки (line-height) равную высоте поля (height) — update by Константин
input {
height: 16px; /* высота с учетом бордюр, внутренних отступов */
width: 196px; /* ширина с учетом бордюр, внутренних отступов */
border: 1px solid #0000CC;
background: #99CCFF;
font-size: 12px;
padding: 3px 0 3px 2px; /* обязательно наличие как верхнего так и нижнего отступа */
font-family: Arial, Helvetica, sans-serif;
line-height: 16px; /* должно быть равно height, пригодится как минимум для ie6 */
}
* html input {
/*
update by Nikita Zhukov
хак нужен только если IE6 работает в режиме обратной совместимости
(в таком режиме он работает например, если используется xml-декларация)
*/
height: 24px;
width: 200px;
}
Результат.
Проверено в :
- IE 6-8
- Firefox 2-3
- Opera 9.5 — 10
- Safari 4
Update так же следует упомянуть, что поля в Safari и Chrome имеют по умолчанию внешние отступы (похоже на резервирование места для подсветки поля в фокусе). Иногда это мешает, например, когда требуется выровнять поля разных типов по одной линии (пример как это должно выглядеть можно увидеть в статье «Убираем отступы у checkbox и radio»). Чтобы было все тип-топ, достаточно обнулить отступы для этих полей.
html — В чем разница между текстовой областью и текстом типа ввода в angularjs
спросил
Изменено 1 год, 8 месяцев назад
Просмотрено 120 тысяч раз
Только не уверен, в чем разница.
Пытаюсь выяснить, что лучше для моего варианта использования.
- HTML
- ввод
- текстовая область
2
Разница касается HTML и не связана с AngularJS . Во всяком случае, некоторые определения с сайта W3Schools:
тип ввода текст :
Тег
определяет поле ввода, в которое пользователь может вводить данные.
элемента используются вэлемент для объявления элементов управления вводом, позволяющих пользователям вводить данные.Поле ввода может различаться по-разному, в зависимости от атрибута типа.
Текстовое поле :
Тег
Основное различие между текстовым полем и текстовым полем ( ) заключается в том, что текстовое поле состоит только из одной строки, тогда как текстовое поле обычно состоит из нескольких строк.
TextBox: элемент ввода определяет поле ввода. TextBox создается путем указания атрибута типа на «текст». TextArea: элемент TextArea определяет многострочную текстовую область.
Тег INPUT всегда начинает запись с середины блока поля ввода. Где TextArea всегда начинается с верхней части поля ввода, независимо от их высоты и ширины.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Понимание HTML Область ввода HTML Текстовая область и формы.
HTML-формы
Атрибуты ввода
Формы МЕТОД и ДЕЙСТВИЕ
HTML-формы
Этот урок очень прост для понимания, но важно, чтобы в этих новых знаниях , будет транслироваться вся интерактивность в Интернете. Есть несколько дополнительных тегов HTML, которые нам нужно обсудить перед тем, как закончить предварительную работу: это первые возможные способы взаимодействия, которые были введены в HTML: входы и формы.
Как всегда, давайте сравним наш веб-сайт с документом MS Word… В какой-то момент ученым нужно было создать формы, подобные тем, которые мы заполняем, когда платим налоги: с пустыми местами, доступными для заполнения пользователем своим именем, Фамилия, дата рождения и т. д.
Элементы, которые пользователь заполняет в форме, называются
, и они всегда должны быть заключены в тег. Вы также можете без проблем использовать все остальные теги HTML, которые мы изучили на предыдущих уроках.Вот пример простой формы в HTML:
Нажмите, чтобы открыть демонстрацию в новом окне
Ниже приведен список всех возможных элементов, которые мы можем использовать для получения любого ввода от пользователя:
Имя Декларация Описание Text 2 90 type=»2text> 90 type=»2text>input 2 90 Ввод текста предназначен для приема любой небольшой строки символов, например как: Имя пользователя, Имя, Фамилия, Дата рождения и т. д.
name="comments">Textarea
.. 