[HTML] 폼 요소 3 - 속성

Bam·2022년 2월 10일
0

HTML

목록 보기
14/23
post-thumbnail

두 개의 포스트에서 폼 요소들을 알아보았습니다. 폼 요소는 속성에 따라 변화가 가장 큰 기본 태그라고 생각이 되는데요. 이번에는 그동안 알아봤던 태그들의 핵심적인 속성들을 짚고 넘어가보려고 합니다.


<form>

form
action form 태그 내부의 요소들을 처리할 서버상의 프로그램 지정합니다.
autocomplate 자동 완성 기능(기본값: on, 끄려면 off)
method 서버 송신 방식(get 또는 post)
name 폼의 이름. 폼을 구분하기 위한 용도입니다.
target action으로 지정한 스크립트를 열 창의 위치를 지정합니다.

<input>

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>

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 보다 작은 숫자로 지정합니다.
profile
나는 나대로🥉

0개의 댓글