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


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

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

Я бы хотел ... все эти элементы должны быть центрированы. Текстовая область должна быть непосредственно центрирована, графика должна быть выровнена по левому краю текстовой области и 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 дива, по одному для каждого элемента в моем HTML, и мне интересно, как добавить textarea так, чтобы это был просто курсор в центре поля, который ограничивает до 300 персонажи.

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

1 2

1 ответ:

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

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