Центрированная текстовая область css с ограничением символов

Question

Я новичок в stackru и новичок в веб-разработке. Я полагаю, что первая часть того, что я пытаюсь сделать, должна быть легкой, но у меня есть немало проблем, чтобы понять это.

Первый стиль, очевидно, центрирует мое фоновое изображение, и это, кажется, работает нормально. Что я хотел бы сделать дальше, это добавить 3 элемента на страницу. 1. Графическое изображение, 2. Текстовое поле фиксированного размера, ограничивающее количество вводимых символов до 300 символов, и 3. Кнопка отправки.

Я бы хотел, чтобы все эти элементы были сосредоточены. Текстовая область должна располагаться непосредственно по центру, изображение должно быть выровнено по левому краю текстовой области и на 10 пикселей выше него, кнопка отправки должна быть выровнена вправо и на 10 пикселей ниже.

Вот что у меня есть:

html { 

        background: url(field1.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;  

    }

#box {

    position: absolute;
    background-image:url(textarea.png);
    height: 250px;
    width: 550px;
    border-radius: 5px;
    margin: -125px 0 0 -275px;
    top: 50%;
    left: 50%;

}


#button {

    position: absolute;
    background-image:url(button.png);
    height: 55px;
    width: 151px;
    top: 260px;
    left: 399px;
    border-radius: 5px;
}

#graphic {

    position: absolute;
    background-image:url(graphic.png);
    height: 58px;
    width: 184px;
    top: -328px;
    left: -399px;
}

<div id="box"></div>
<div id="button"></div>
<div id="graphic"></div>

У меня есть 3 DIV, по одному для каждого из элементов моего HTML, и мне интересно, как добавить текстовую область, чтобы это был просто курсор в центрированном поле, ограниченный 300 символами.

В данный момент я бы хотел, чтобы все было правильно выстроено с работающей текстовой областью. Затем я поработаю над отправкой текста из коробки, сохранением и использованием его для множества вещей. Любая помощь будет очень высоко ценится. Спасибо.

Answer 1

Как это? http://jsfiddle.net/zFcHp/3/ - Я ограничил его 10, а не 300, потому что 300 действительно раздражает тестировать:). Просто измените атрибут maxlength.

Также имейте в виду, что вам НЕОБХОДИМО проверить длину строки, возвращаемой клиентом, поскольку любой, у кого есть firebug или любой из ста других инструментов, может отменить ограничение на стороне клиента и отправить вам все, что пожелает. Они могли бы даже загрузить код для Firefox и изменить его так, чтобы он нарушал любое правило веб-стандартов, которое они хотят, а затем перекомпилировал... Никогда не доверяйте клиенту, чтобы он что-либо применял!