Полето TEXTAREA е елемент на формуляр, който ви позволява да създадете област, в която можете да въведете няколко реда текст. За разлика от тага INPUT, прекъсванията на редовете са разрешени в текстово поле; те се запазват при изпращане на данни към сървъра.
Между таговете и можете да поставите произволен текст, който ще се показва в полето.
Синтаксис
текст
Затварящ етикет
Задължително.
Опции
cols - ширина на полето в символи.
disabled - блокира достъпа и модифицирането на елемента.
име - името на полето, предназначено за да може процесорът на формуляра да го идентифицира.
readonly - указва, че полето не може да бъде променено от потребителя.
редове - височина на полето в редове текст.
wrap - опции за обвиване на линия.
Пример 1. Използване на тага TEXTArea
Въведете вашето мнение:
Описание на параметрите на тага TEXTARE Параметър COLS
Описание
ширина текстово поле, което се определя от броя на знаците в моноширинен шрифт. С други думи, ширината се определя от броя на съседните букви с еднаква хоризонтална ширина. Ако размерът на шрифта се промени с помощта на стилове, ширината също се променя съответно.
Синтаксис
Аргументи
Всяко положително цяло число.
Стойност по подразбиране
Пример 2. Ширина на полето
DISABLED параметър
Описание
Блокира достъпа и модифицирането на текстовото поле. В този случай той се показва в сиво и не може да се активира от потребителя. Освен това такова поле не може да получи фокус чрез щракване върху Клавиш Tab, мишка или друг метод. Това състояние на полето обаче може да се промени с помощта на скриптове.
Синтаксис
Аргументи
не
Стойност по подразбиране
Пример 3. Заключване на текстово поле
Активно поле
Неактивно поле
Параметър NAME
Описание
Определя уникално имеЕлемент TEXTArea. Обикновено това име се използва при изпращане на данни към сървъра или при достъп до полето чрез скриптове.
Синтаксис
Аргументи
Името е набор от знаци, включително цифри и букви. JavaScript е чувствителен към главни и малки букви, така че когато препращате към елемента TEXTARE по име, използвайте същата форма като параметъра име.
Стойност по подразбиране
не
Пример 4: Обръщане към поле чрез неговото име
функция dataField(f) (
alert("Вие въведохте: " + f.comment.value);
Въведете коментар
Параметър САМО ЗА ЧЕТЕНЕ
Описание
Когато параметърът само за четене е добавен към етикета TEXTAREA, текстовото поле не може да бъде модифицирано от потребителя, включително въвеждане нов текстили модифицирайте съществуващ. В допълнение, такова поле не може да получи фокус чрез натискане на клавиша Tab, използване на мишката или по друг начин. Състоянието и съдържанието на полето обаче могат да се променят с помощта на скриптове.
Синтаксис
Аргументи
не
Стойност по подразбиране
По подразбиране тази стойност е деактивирана.
Пример 5: Текстово поле само за четене
Полето не може да се променя
Параметър ROWS
Описание
Височината на текстовото поле, която се определя от броя на редовете за показване без превъртане на съдържанието. Ако размерът на шрифта се промени с помощта на стилове, височината на полето също се променя съответно.
Синтаксис
Аргументи
Всяко положително число.
Стойност по подразбиране
Зависи от настройките на браузъра и операционната система.
Пример 6. Височина на текстовото поле
WRAP параметър
Описание
Параметърът за обвиване казва на браузъра как да обвие текста в полето TEXTAREA и в каква форма да изпрати данните към сървъра. Ако този параметър липсва, текстът в полето се въвежда на един ред, когато броят на въведените знаци надвишава ширината на областта; хоризонтална ивицапревъртане. Щракването върху бутона премества текста към нов ред, а курсорът е позициониран в левия край на полето.
Синтаксис
Аргументи
hard - С този параметър дълъг текст, който сам по себе си не се вписва в ширината на полето, автоматично ще бъде преместен на нов ред, но ще бъде предаден на сървъра като един ред. Натискането на бутон на клавиатурата задава обвиване на текста.
изключено - Прекъсването на редовете е забранено. При поставяне дълъг текстбез тирета, ще се отпечата на един ред и ще се покаже лента за превъртане.
| обвивам=твърдо |
обвивам=изкл |
Има други стойности за този параметър, които се поддържат различни браузъри, но резултатът от използването им е подобен на горните стойности.
Стойност по подразбиране
изключено
Пример 7. Сричкопренасяне в текстово поле
Статията представя няколко трика, за които може би не сте знаели, че ще намерите полезни в развитието си.
1. Изображение като фон, което изчезва при въвеждане на текст.
Можете да добавите фоново изображениеточно като всеки друг елемент. В този случай стилът по подразбиране за текстовото поле се променя от рамка с дебелина 1px на скосена рамка. Това може да се коригира чрез изрично указване на границата.
Текстово поле ( фон: url(images/benice.png) център център без повторение; рамка: 1px плътен #888; )
Фоновото изображение може да повлияе на четливостта на текста. Следователно фоновото изображение трябва да бъде премахнато при получаване на фокус и върнато, ако текстовото поле остане без текст. Например с помощта на jQuery може да се направи по следния начин:
$("textarea") .focus(function() ( $(this).css("background", "none"); )) .blur(function() ( if ($(this).value == "" ) ($(this).css("background", "url(images/benice.png) center center no-repeat"); ) ));
2. Заместител в HTML5
Появи се в HTML5 нов атрибутнаречен заместител. Стойността на този атрибут се показва в текстовия елемент и изчезва при получаване на фокус, както и при въвеждане на текст в елемента.
HTML5 заместител се поддържа в следните браузъри: Safari 5, Mobile Safari, Chrome 6 и Firefox 4 алфа.
3. Заместител, HTML5 с поддръжка за по-стари браузъри, използващи jQuery
Най-лесният начин да проверите дали даден атрибут се поддържа от браузъра е да проверите с помощта на javaScript:
Функция elementSupportsAttribute(елемент, атрибут) ( var test = document.createElement(element); return (атрибут в теста););
След това можете да напишете код, който ще се задейства, ако браузърът не поддържа атрибута placeholder.
If (!elementSupportsAttribute("textarea", "placeholder")) ( // Ако браузърът не поддържа атрибута, изпълнете jQuery код$("#example-three") .data("originalText", $("#example-three").text()) .css("color", "#999") .focus(function() ( var $el = $(this); if (this.value == $el.data("originalText")) ( this.value = ""; ) )) .blur(function() ( if (this.value == "") ( this.value = $(this).data("originalText"); ) )); ) else ( // Ако браузърът поддържа HTML5, тогава ние просто използваме тази функция $("#example-three") .attr("placeholder", $("#example-three").text()) .text( " ");
4. Премахнете удара на текстовото поле
Браузърите на webkit двигатели, както и FireFox 3.6, очертават текстовото поле, когато има фокус. Можете да премахнете този контур, като използвате свойството outline css за браузъри webkit. За FireFox използвайте свойството -moz-appearance или можете просто да зададете елемента на рамка или фон.
Textarea ( outline: none; -moz-appearance: none; border: 1px solid #999; /* настройването на това свойство също ще премахне контура във FireFox */ )
5. Забрана за преоразмеряване
Браузърите Webkit добавят към текстовото поле визуален елементв долния десен ъгъл, което ви позволява да промените размера на текстовата област. Ако искате да премахнете тази функция, тогава трябва да използвате следното css свойство:
Текстово поле (преоразмеряване: няма;)
6. Добавяне на възможности за преоразмеряване
jQuery UI ви позволява да добавите възможности за преоразмеряване към текстовото поле. Това работи за всички браузъри, а за уебкит браузърите отменя поведението по подразбиране. За да използвате тази функция, трябва да свържете jquery.ui и да напишете следния код:
$("textarea").resizable();
7. Преоразмерете, за да пасне на съдържанието
Джеймс Падолси написа удобен jQuery скрипт, който ви позволява автоматично да преоразмерите текстово поле, за да пасне на съдържанието му. Изглежда, че този плъгин вече не е наличен, но можете да използвате този например. Плъгинът съдържа много настройки, но най-лесният начин да го използвате е:
$("textarea").autoResize();
8.Завийте сега
За да се избегне обвиването на думи на нови редове, всички елементи използват свойството CSS за бяло пространство, което не работи с textarea. За textarea трябва да използвате атрибута wrap.
9. Премахване на ленти за превъртане в IE
IE показва вертикална лента за превъртане за всички текстови области. Можете да ги скриете, като използвате overflow: hidden, но в този случай няма да се показват, когато съдържанието се увеличи. Следователно е по-правилно да се използва следният подход:
Текстово поле (препълване: автоматично; )
В този случай лентата за превъртане няма да се покаже, когато целият текст е поставен в текстовото поле, но ще се покаже, ако е необходимо.
Можете да видите примери към статията.
Елементът (от англ. "text area" - "текстово поле") дефинира многоредово текстово поле. Основната разлика от тага е, че са разрешени прекъсвания на редове (те се запазват при изпращане на данни към сървъра). По подразбиране броят на знаците, които могат да бъдат въведени в полето, не е ограничен и въведеният текст се показва в моноширина.
Синтаксис ... Затварящ етикет
Задължително.
Атрибути за автоматично довършване на HTML5 Активира или деактивира автоматичното довършване. autofocus HTML5 Указва, че текстовата област трябва автоматично да получи фокус, когато страницата се зареди. cols Указва видимата ширина на текстовата област (в знаци). Стойността по подразбиране е 20 знака. dirname HTML5 параметър, който предава посоката на текста към сървъра. disabled показва, че текстовата област ще бъде неактивна, т.е. Няма да можете да въвеждате текст или да променяте или копирате текста по подразбиране. form HTML5 Дефинира формата, с която е свързан елементът. Стойността на атрибута е идентификаторът на елемента. Този атрибут ви позволява да поставите многоредово текстово поле където и да е в документа, не само като дете на елемента. maxlength HTML5 Определя максималния брой знаци, които могат да бъдат въведени в текстово поле. minlength HTML5 Указва минималния брой знаци, които могат да се съдържат в текстова област. име Дефинира име за текстовото поле, предназначено така, че процесорът за обработка на формуляри да може да го идентифицира. placeholder HTML5 Дефинира кратка подсказка, която описва очакваната стойност за текстово поле. Подсказката ще се появи в текстовото поле, когато е празно, и ще изчезне, когато получи фокус. readonly Указва, че полето не може да се променя от потребителя. изисква се HTML5 Указва, че текстовото поле трябва да бъде попълнено, преди формулярът да бъде изпратен на сървъра. редове Указва видимия брой редове в текстовата област (в знаци). Стойността по подразбиране е 2 знака. wrap HTML5 Дефинира параметри за обвиване на редове в текста при изпращане на данни към сървъра:
трудно- Браузърът автоматично вмъква нови редове, така че всеки ред да не е по-широк от ширината на текстовото поле.
Задължително условиеизползването на твърдата стойност е наборът от атрибути cols.
мека‒ текстът се изпраща като един непрекъснат ред, не се добавят допълнителни прекъсвания на редове. Стойността по подразбиране.
За този елемент са налични глобални атрибути и събития.
Разлики в стила по подразбиране между HTML 4.01 и HTML5
Добавени са нови атрибути към HTML5 тага.
Пример за употреба:
Примерен HTML:
Опитайте сами
Прочетете споразумението:
Условията на нашето споразумение...
Вашето мнение за това споразумение:
Въведете вашия коментар... Спецификации
Състояние на спецификацията
| WHATWG HTML жизнен стандарт (WHATWG) |
Стандарт на живот |
| HTML 4.01 (W3C) |
Препоръка |
| HTML5 (W3C) |
Препоръка |
| HTML 5.1 (W3C) |
елемент текстово поле HTMLе поле за въвеждане на текст, състоящ се от няколко реда и редактирането му. Използва се за въвеждане и редактиране на дълги части от текст.
Съдържанието на този елемент представлява първоначалната му стойност. Показва се в текстовото поле след зареждане на документ или след щракване върху бутона за нулиране във формуляр.
Примери В първия пример ще създадем формуляр с контрола textarea с всички стойности по подразбиране. Също така ще зададем атрибута placeholder с подсказка какъв тип съдържание трябва да се въведе в полето. Ще се покаже, когато текстовата област е празна:
Съобщение към автора:
Във втория пример ще зададем първоначалната стойност като съдържание на HTML textarea. Ще се използва за попълване на контролата веднага след зареждане на документа, а също и след нулиране на формуляра.
За разлика от полето за въвеждане на текст с един ред, елементът textarea използва първоначалната стойност като свое съдържание (вместо атрибута value):
Редактирайте коментара си:
здрасти Мисля, че всички грешите!
След това използваме атрибутите cols и rows, за да зададем броя знаци, които могат да бъдат показани наведнъж в контролата. Браузърите изчисляват ширината и височината на даден елемент, като умножат тези стойности по ширината и височината на знака на използвания шрифт.
ширина HTML въвеждане textarea се изчислява спрямо ширината на знаците на използвания шрифт. Тъй като знаците не винаги са с еднаква ширина, браузърите могат да използват различни методиза закръгляне на тази стойност:
Добавете ново описание:
В следващия пример използваме два атрибута. Те определят ограничения за дължината на текста, който може да бъде въведен в текстова област. Това са minlength и maxlength, имената им говорят сами за себе си.
Minlength се проверява само когато се изпращат данни от формуляра, докато maxlength се проверява от браузърите, за да се гарантира, че потребителят не е въвел повече знаци от посочените в този атрибут.
Атрибутът maxlength на елемента HTML textarea се поддържа добре от браузърите, но атрибутът minlength не е:
Редактирайте биографията си:
Сега използваме задължителния атрибут, който беше въведен в HTML5. Когато този атрибут е указан, браузърът не позволява изпращането на данни от формуляра, докато не бъде попълнено съответното поле.
Поддръжката на браузъра за атрибута е непълна. За да предоставите тази функционалност във всички браузъри, ще трябва да използвате скриптове.
Атрибути Автоматично довършване на специални атрибути Указва на браузъра дали трябва автоматично да предлага предложения при въвеждане на данни за тази контрола, като се опитва да отгатне какво въвежда потребителят. За даден атрибут HTML елемент textarea са позволени две стойности, те не са чувствителни към главни и малки букви:
- включено: Браузърът трябва автоматично да предлага предложения. Това е по подразбиране;
- изключено: Браузърът не трябва автоматично да предлага опции.
Пример:
Обосновете отговора си:
автофокус Булева стойност, която инструктира браузъра да зададе фокус за въвеждане на контролата, след като документът приключи зареждането или когато се отвори диалогов прозорец, в който се показва контролата. Ако атрибутът е зададен на "autofocus", празен низ (" "), тогава контролата ще има входен фокус веднага след зареждането на страницата или диалоговия прозорец.
Пример:
cols Ширината на контролния елемент, определена от гледна точка на броя знаци въз основа на ширината на знаците на текущия шрифт. Тъй като знаците не винаги са с еднаква ширина, браузърите могат да използват различни методи за закръгляване на тази стойност.
Стойността, посочена в този атрибут на етикет textarea в HTML, трябва да бъде цяло число, по-голямо от нула. Ако стойността липсва или е неправилно форматирана, на атрибута ще бъде присвоена стойност по подразбиране 20.
Пример:
Специални благодарности:
dirname Името на ново поле, предназначено да предаде посоката на въвеждане на текст. Този атрибут, въведен в HTML5, позволява на авторите да обработват правилно стойностите, въведени на езици с различни посоки на писане. За да направите това, добавете отделно поле, което се попълва заедно с формуляра. Името на полето ще действа като стойност на атрибута.
Тъй като този HTML атрибут на текстовото поле е сравнително нов, той не се поддържа напълно от браузърите. Разработчиците трябва да проверят поддръжката на браузъра, когато извличат данни от страна на сървъра.
Пример:
Допринесете с идея:
деактивиран Булева стойност, показваща дали е деактивирано този елементконтрол или не. Ако стойността на атрибута е "disabled" или празен низ (""), контролата е деактивирана.
Деактивираните контроли са неактивни, когато формулярът се показва, блокирани са за взаимодействие с потребителя и техните стойности (ако има такива) не се предават, когато данните от формуляра се изпращат.
Пример:
Едно пени за вашите мисли:
форма Стойността на атрибута ID на формуляра, с който е свързано текстовото поле за въвеждане на HTML.
Този атрибут е нов и е въведен в HTML5. Той помага да се определи собствеността върху контролите във вложени или разделени форми.
Пример:
Въведение:
режим на въвеждане Показва кой метод на въвеждане е най-подходящ за потребителите. Има дванадесет възможни стойности, които не са чувствителни към главни и малки букви:
- дословно : буквено-цифрово въвеждане на латински текст като потребителски имена, пароли, продуктови кодове и др.;
- latin : въвеждане на латиница на предпочитания от потребителя език, включително поддържащи инструменти като автоматично пълнене. Проектиран за прехвърляне на данни от потребители към компютър. Например чрез формата за търсене;
- latin-name : Въвеждане на латиница на предпочитания от потребителя език, с включени някои помощни средства. Като автоматично попълване на предложени имена от вашия списък с контакти и автоматична инсталациярегистър;
- latin-prose : въвеждане от човек на човек с автоматично завършване на предложения текст и автоматично разположение главни буквив началото на изреченията;
- full-width-latin : въвеждане на латиница на втория език на потребителя, включително помощни средства за въвеждане на знаци в пълен размери предавания от човек на човек, като автоматично довършване на предложения текст и изписване на изречения с главни букви;
- kana : въвеждане на Kana или Romaji, стандартно въвеждане на хирагана, използващо въвеждане на знаци в пълен размер с поддръжка за преобразуване в канджи. Предназначен за въвеждане на текст на японски;
- kana-name: същото като „kana“, но с добавена помощ за въвеждане на човешки имена от вашия списък с контакти;
- катакана : Въвеждане на катакана с помощта на символи и поддръжка за преобразуване в канджи. Предназначен за въвеждане на текст на японски;
- цифрово : Въведете числа, включително клавиши за числата от 0 до 9, като използвате посочения знак за разделяне на хиляди и символ за отрицателни числа. Препоръчва се за цифров входен елемент;
- тел: Въведете телефонни номера, включително цифровите клавиши от 0 до 9, символа "#" и символа "*". В някои местни райони тази стойност HTML атрибут textarea може да включва мнемоника на буквите. Препоръчва се за елемента за въвеждане на телефонен номер;
- имейл : въвеждане на текст в езика на потребителя чрез натискане на клавиши за въвеждане на адрес имейл. Например символите „@“ и „. ". Препоръчва се за елемента за въвеждане на имейл адрес;
- url : Въведете текст в локала на потребителя, като използвате клавиши за въвеждане на адреси. Например знаците “/” и “. “, а също и за бързо въвежданечасти от имена на домейни, като например "www." или ".co.uk". Препоръчва се за контрола за въвеждане на URL.
Браузърите могат да използват информацията, съдържаща се в този атрибут, за да предоставят инструменти за подпомагане на потребителя при въвеждане на данни. Например виртуален екранни клавиатуриможе да осигури специални ключовеза избрания режим на въвеждане.
Пример:
Избройте приятелите си:
максимална дължина Индикация на цяло число максимално количествознаци, които могат да съдържат стойността на контролата.
Разработчиците не трябва да разчитат на атрибута maxlength HTML на текстовото поле. Потребителите може да могат да изпращат данни от формуляр чрез браузър, който не поддържа тази функция.
Пример:
minlength Цяло число, което указва минималния брой знаци, които стойността на контролата може да съдържа.
Разработчиците не трябва да разчитат на атрибута minlength. Потребителите може да могат да изпращат данни от формуляр през браузър, който не поддържа тази функция.
Поддръжката на браузъра за атрибута minlength е изключително слаба. Най-добре е да не разчитате на този атрибут, докато поддръжката не се подобри.
Пример:
име Името на тага textarea в HTML. Той ще бъде изпратен от браузъра до манипулатора, свързан със съдържанието на елемента. Те заедно ще съответстват на двойка име-стойност, която се използва за обработка на данните от формуляра.
Пример:
контейнер Подсказка за това как трябва да се попълни полето (пример или кратко описание). Браузърите могат да покажат съдържанието на атрибут в контрола, въпреки че няма значение. Когато потребителят започне да въвежда свой собствен текст, подсказката трябва да бъде премахната от контролата.
Пример:
само за четене Булева стойност, която инструктира браузъра да попречи на потребителя да промени стойността на контролата. Ако атрибутът има стойност "само за четене" или празен низ (""), тогава на потребителя е забранено да променя стойността в контролата.
Въпреки че този атрибут не позволява редактиране на стойностите на контролата, той не блокира всички действия: потребителят пак ще може да избира и копира текст в контролата.
Пример:
Файл "config.cfg":
изчакайте=24 вход=db автостарт=да
изисква се Булева стойност, показваща дали тази контрола може да се остави празна. Ако атрибутът е зададен на "задължителен" или празен низ (""), тогава потребителят трябва да попълни контролата, за да изпрати данните от формуляра.
Ако HTML въведете текстово поле с задължителен атрибутне е попълнено, тогава когато потребителят се опита да изпрати данните от формуляра, браузърът ще изведе грешка и ще отмени изпращането на данните.
Кратък преглед на полезните свойства на един от елементите на формуляра - textarea, който ще ви позволи да решите редица проблеми възможни проблемипри оформлението на сайта.
Полето текстово поле е един от елементите на формуляра, предназначени за въвеждане на многоредови данни. Не виждам смисъл да навлизам в повече подробности - прочетете документацията, но би било полезно да се спрем на някои интересни свойства на textarea.
Текст по подразбиране за текстово поле в HTML5 Доста често срещано решение е да се използва така нареченият „текст по подразбиране“, вместо да се описва целта на елемента на формуляра в отделен ред. Това обикновено се прави с помощта на обикновен JavaScript за съответните събития.
.
Разбира се, можете да измислите по-удобно решение, но мисля, че схващате идеята. В HTML5 се появи нов атрибут placeholder за тага textarea. агрегат) ви позволява да правите същото без никакви проблеми с JavaScript.
Това свойство textarea показва указаната стойност на атрибут в поле като светлосив текст, който изчезва, когато се фокусира върху елемента на формуляра. Ясно е, че този нов продукт работи само в браузъри, които поддържат стандарта HTML5.
Синя подсветка за текстовото поле Когато фокусирате върху елемент на формуляр, повечето съвременни браузъри подчертават границите му със синя рамка. Въпреки че този имот textarea служи за подобряване на използваемостта на сайта, в някои случаи е неприемливо. За да премахнете синьото осветяване в текстово поле, можете да използвате свойството outline CSS.
Textarea ( контур: няма; -moz-appearance: бутон; /* за Firefox */ )
Свойството outline указва опциите за външна граница. За съжаление, това не работи за всички браузъри. За Firefox използвам свойството -moz-appearance, въпреки че то е предназначено да показва елемента като стандартни персонализирани елементи въз основа на темата на операционната система.
Деактивирайте манипулаторите за преоразмеряване на текстовото поле Повечето съвременни браузъри показват елемент на текстово поле с манипулатор за преоразмеряване на текстовата област в долния ляв ъгъл. За да деактивирате това свойство textarea, можете да използвате свойството CSS за преоразмеряване.
Текстово поле (преоразмеряване: няма;)
CSS свойството за преоразмеряване може да има други стойности: както (хоризонтално, така и вертикално), хоризонтално (само хоризонтално), вертикално (само вертикално) и наследяване (наследява стойността на родителя).
Текст без прекъсвания на редове в текстовото поле Когато броят на знаците в текстово поле надвишава ширината на неговата област, възниква автоматично прекъсване на реда. На теория, за да избегнете това, можете да посочите следните CSS свойства за textarea:
Текстово поле (бело пространство: nowrap; препълване: автоматично;)
Тази опция обаче не работи за всички браузъри и често не работи по предназначение. Обикновено се използва свойството wrap, което съществува от дълго време, но е документирано само в HTML5.
Свойството wrap може да има други стойности: мека (думите се обвиват автоматично) и твърди (думите се обвиват механично).
Премахнете текстовото поле на лентата за превъртане IN Интернет браузърТекстовото поле за вертикално превъртане на Explorer е зададено по подразбиране. За да го премахнете, можете да използвате Свойство за препълване на CSS, настройвайки го на скрито, но препоръчвам да използвате автоматично, което ще ви позволи да оставите превъртането, ако наистина имате нужда от него.
Текстово поле (препълване: автоматично; )
