Поля для кодов. Внешний вид и пр.

Такой небольшой, но очень полезный постик.

Речь пойдет про поля, в которые прописывается некий код, для того, чтобы читатель мог потом этот код с легкостью взять. Коды флешек, картинок, постов и пр.

Окошки такие, к примеру:

И здесь некий код, который можно легко скопировать

Такие простенькие окошки.

Про первое говорить не будем. Оно как бы не совсем предназначено для этих целей (содержать в себе некий код), а вот про второе,- поговорим.

Пишется оно очень просто:  

<textarea >А сюда просто вставляем нужный нам код, который должен отображаться в окошке</textarea>

Просто и легко. Можно весь пост "вставить" в такое вот окошко.

В качестве борьбы с плагиатом, например.

Ведь захотят взять,- возьмут, а так... больше шансов, что возьмут то, что вам надо.

Окошко это конечно замечательное, но уж слишком стандартное.  

Займемся его внешним видом.  Я не буду рассказывать о всех возможных изменениях,- их уж слишком много.

Размер окошка. За размер окошка отвечают два параметра:

cols - ширина и rows - высота

Применим эти два параметра например так:

Или так:

Пишется это все так:  

<textarea cols="5" rows="20">код, который должен отображаться в окошке</textarea>

Обводка и фон окошка.  Тут уже будем применять стили.

В результате всех этих манипуляций,- можем получить даже такое окошко:

 код, который должен отображаться в окошке

Это  конечно перебор с яркостью, чтоб нагляднее было.

НИКОГДА ТАК НЕ ДЕЛАЙТЕ! Это жутко давит на глаза.

Итак, пишем так:  

<textarea style="background-color: ЦИФРОВОЕ обозначение цвета; border: 2px solid ЦИФРОВОЕ обозначение цвета;">код, который должен отображаться в окошке</textarea>

Про "цифровые" обозначения цвета уже сто раз говорили, но напомню к примеру: #ffffff - белый, #cccccc - серый, #000000 - черный. В коде есть кусок border: 2px - 2px это толщина обводки. Меняем двойку как хотим.

 Коды окошек, которые мы учили выше,- позволяют пользователю не только брать код из окошка, но и писать самому в этом окошке.

В этом нет ничего страшного, но вдруг, нечаянно чего-нибудь ткнет и видоизменит код. Скопирует его, а потом побежит к вам с вопросом "почему ничего не работает?"

Так вот, чтобы этого избежать, приписываем дополнительный параметр readonly.

Пишется так:  

<textarea readonly="readonly">код, который должен отображаться в окошке</textarea>

Ну и результат:

 код, который должен отображаться в окошке

Написать что-либо в это окошко пользователю уже не удастся.