글자 수 제한이있는 가운데 맞춤 CSS 텍스트 영역

Question

저는 stackoverflow를 처음 사용하고 웹 개발을 처음 사용했습니다. 나는 내가하려는 일의 첫 부분이 쉬워야한다고 믿지만, 나는 그것을 이해하는데 약간의 어려움을 겪고있다.

첫 번째 스타일은 분명히 내 배경 이미지를 중앙에 배치하고 잘 작동하는 것 같습니다. 제가 다음에하고 싶은 것은 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> 

내가 세 된 DIV, 내 HTML의 요소마다 1을 가지고 있고 어떻게 추가하는 방법 궁금하네요 텍스트 영역은 300 자로 제한되는 가운데 상자 안에있는 커서 일뿐입니다.

지금은 텍스트 영역이 제대로 작동하도록 모든 것을 올바르게 준비하고 싶습니다. 그런 다음 상자에서 텍스트를 제출하고 저장 한 다음 여러 가지 작업을 수행하는 데 사용합니다. 어떤 도움이라도 대단히 감사 할 것입니다. 고맙습니다.

Answer 1

좋아요? http://jsfiddle.net/zFcHp/3/ - 나는 300을 300으로 제한했는데, 300은 실제로 시험하기에 자극적이기 때문에 :). maxlength 속성을 변경하십시오.

방화범이 끌린 사람이나 다른 도구 중 하나가 클라이언트 측에서 제한을 해제하고 아무 것도 보낼 수 없으므로 클라이언트에서 다시 오는 문자열의 길이를 확인해야합니다. 처럼. 그들은 파이어 폭스 용 코드를 다운로드하여 재 컴파일을 원하는 웹 표준 규칙을 위반하도록 수정할 수 있습니다 ... 클라이언트가 아무 것도 시행하지 않는다고 신뢰하지 마십시오!