본문 바로가기

html5 강좌38

9.9 textarea 요소 9.9 textarea 요소 textarea 요소는 사용자가 여러 라인으로 구성된 텍스트 문장을 입력해야 할 때 사용할 수 있는 요소로 다음과 같은 고유한 속성들을 이용할 수 있습니다. 속성 기능 autofocus 페이지가 로드될 때 자동적으로 포커싱되도록 하는데 사용 cols 입력 가능한 열의 수를 설정. 하나의 열은 영문자 한 글자를 의미. 한글은 2열을 차지하게 됨 disable 사용자로부터 textarea 요소의 어떠한 변경도 받아들이지 않을 때 사용 form textarea 요소가 속하는 form을 명시할 때 사용 maxlength 최대 입력 가능한 문자의 수를 설정 name textarea 요소의 이름 placeholder 사용자로 하여금 textarea에 어떤 내용을 입력해야 할지 알려주는 .. 2013. 7. 31.
9.8 option, optgroup 요소 9.8 option, optgroup 요소 option 요소는 select, datalist 요소의 자식 요소로 사용되어 해당 요소들의 리스트를 구성하는 항목을 나타내는데 이용되거나 optgroup 요소의 자식요소로 이용될 수 있으며 다음과 같은 고유한 속성이 정의되어 있습니다. 속성 기능 disabled 해당 항목이 사용 불가임을 명시 label 긴 항목에 대한 짧은 라벨 selected 페이지가 처음 로드될 때 사전에 선택되져야 할 항목을 명시할 때 value 항목값을 의미하며 이 값이 웹서버로 전달되게 됨 앞에서 사용한 selectEx.html 파일을 메모장으로 열어서 다음과 같이 시작태그와 마침 태그 안에 코드를 수정합니다. 사과 딸기 배 키위(양다래 열매) 포도 위에서 보는 것처럼 selecte.. 2013. 7. 31.
9.7 datalist 요소 9.7 datalist 요소 datalist 요소는 다른 요소를 위해 사전에 정의된 항목을 option 요소를 이용하여 설정하는데 사용하는 요소로 보통 input 요소와 함께 사용되며 input의 list 속성에 datalist 요소의 id를 설정하여 같이 사용하게 됩니다. 예를 들어 사용자가 입력할 수 있는 선택 가능한 프로그래밍 언어를 “C#, HTML5, JAVA, XML, C”로 미리 정의하여 사용한다면 다음과 같이 나타낼 수 있습니다. 위와 같이 datalist 요소의 전역 속성인 id 속성을 이용하여 datalist 요소에 대한 고유한 식별이 가능하도록 하고 option 요소의 value 속성에 방금 전 언급한 선택 가능한 프로그래밍 언어들을 설정하면 됩니다. 이제 준비가 되었으므로 메모장을 .. 2013. 7. 31.
9.3 lable 요소 9.3 lable 요소 label 요소는 Input 요소와 같은 다른 요소의 라벨을 정의하는데 사용되는 요소로 label 요소 자신이 어느 form에 속하는지를 설정하는 form 속성과 관련된 컨트롤의 id를 명시할 때 사용하는 속성인 for가 정의되어 있습니다. 간단하게 다음에 설명할 input 요소를 2개를 이용한 예제를 해볼까요? 메모장을 열어서 기본적인 코드를 작성하고 다음과 같이 시작태그와 마침 태그 안에 코드를 작성합니다. 당신이 좋아하는 영화 장르는? 액션 공포 위와 같이 작성한 후 “labelEx.html” 로 저장한 후 IE를 통해 보면 다음과 같이 checkbox 형태의 input 요소의 라벨로 각각 액션, 공포 형태로 나타내게 되며 내부적으로 label 요소의 for 속성을 이용하여 .. 2013. 7. 31.