두 개의 포스트에서 폼 요소들을 알아보았습니다. 폼 요소는 속성에 따라 변화가 가장 큰 기본 태그라고 생각이 되는데요. 이번에는 그동안 알아봤던 태그들의 핵심적인 속성들을 짚고 넘어가보려고 합니다.
| form |
| action |
form 태그 내부의 요소들을 처리할 서버상의 프로그램 지정합니다. |
| autocomplate |
자동 완성 기능(기본값: on, 끄려면 off) |
| method |
서버 송신 방식(get 또는 post) |
| name |
폼의 이름. 폼을 구분하기 위한 용도입니다. |
| target |
action으로 지정한 스크립트를 열 창의 위치를 지정합니다. |
| form |
| type |
input의 유형을 결정합니다. |
| autofocus |
입력 커서를 표시해줍니다. |
| placeholder |
필드에 힌트를 표시해줍니다. |
| readonly |
텍스트 필드를 읽기 전용으로 만들어줍니다. |
| required |
필드를 필수 입력란으로 만들어줍니다. |
| size, minlength, maxlength |
이 속성들은 텍스트 관련 폼 일때 사용하는 속성입니다.
size는 한 화면에 표시될 글자 수를 지정하고,
minlength, maxlength는 각각 최소, 최대 입력 글자수를 지정합니다.
|
| min, max |
숫자 관련 폼에서 최소, 최댓값의 범위를 지정합니다. |
| step |
범위 내의 특정 숫자 간격을 지정할 때 사용합니다. |
특히 <input>태그의 type속성은 그 값도 많고, 어떻게 사용하느냐에 따라서 다양한 활용을 보여줍니다. 그래서 type속성에 대해선 따로 다루도록 하겠습니다.
<select>
| select |
| size |
드롭다운 리스트의 옵션 수를 지정합니다. |
| multiple |
옵션을 여러개 선택이 가능하게 만들어줍니다. |
<option>
| option |
| value |
옵션을 선택하면 서버로 넘길 값을 지정합니다. |
| selected |
리스트의 기본값으로 선택되어 있을 값을 지정합니다. |
<datalist>
| datalist |
| value |
옵션을 선택했을 때 서버로 넘길 값을 지정합니다. |
| label |
사용자를 위해 표시하는 레이블을 지정합니다. |
<textarea>
| textarea |
| cols |
텍스트 박스의 가로 크기(width)를 지정합니다. (단위: 글자 수) |
| rows |
텍스트 박스의 세로 크기(height)를 지정합니다. (단위: 줄) |
| button |
| type |
버튼의 타입을 결정합니다. |
대표적인 버튼의 타입(속성 값)은 다음과 같습니다.
- button: 버튼 모양만 생성합니다.
- reset: 폼에 입력되어있는 내용을 처음 상태로 초기화시킵니다.
- submit: 폼의 내용을 서버 등으로 전송합니다.
<meter>
| textarea |
| min, max |
min은 용량의 최솟값, max는 용량의 최댓값을 지정합니다. |
| low, high |
low는 value의 값이 낮은 편이라고 판단되는 값을,
high는 높은 편이라고 판단되느 값을 지정합니다.
|
| value |
현재 차지하고 있는 값을 지정합니다. |
| optimum |
적정 값의 범위를 지정합니다. |
<progress>
| progress |
| max |
작업이 완료될 수치를 지정합니다. 0 보다 큰 숫자만 올 수 있습니다. |
| value |
현재 작업 진행 상황을 지정합니다. max보다는 작아야하고,
max를 지정하지 않았을 경우에는 1.0 보다 작은 숫자로 지정합니다.
|
