input element 선택 및 조작 요소 - by. UXKM

요약 설명

<input> 요소는 사용자 입력을 받기 위한 HTML 폼 요소입니다.
다양한 type 속성을 사용해 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼, 파일 업로드 등 다양한 입력 형식을 제공합니다.
name, value, placeholder, required 등의 속성을 활용해 입력 데이터의 특성을 정의할 수 있으며, JavaScript와 함께 사용해 유효성 검사 및 동적 처리가 가능합니다.

요약 설명

선택 및 조작 요소는 사용자가 여러 개 중에서 선택하거나, 폼을 제출/초기화하는 입력 요소로, 체크박스와 라디오 버튼을 이용해 옵션을 선택할 수 있으며, 파일 업로드를 처리하는 file 타입도 포함됩니다.
또한, 버튼을 사용해 폼을 제출(submit), 초기화(reset), 또는 특정 동작을 실행(button, image)할 수 있습니다.

대표적인 타입으로 checkbox, radio, file, button, submit, reset, image 등이 있습니다.

관련 속성

[checked] Boolean - 선택 사항 기본 선택 상태 지정

  • type="checkbox" 또는 type="radio"에서 기본적으로 선택된 상태로 설정됩니다.
  • 이 속성을 추가하면 해당 입력 요소가 페이지 로드 시 자동으로 선택됩니다.
  • 사용자가 직접 선택을 해제할 수도 있으며, 폼 제출 시 선택된 항목만 전송됩니다.

[multiple] Boolean - 선택 사항 다중 파일 선택

  • type="file"에서만 사용되며, 여러 개의 파일을 한 번에 선택할 수 있도록 합니다.
  • 사용자는 Ctrl(Windows) 또는 Command(Mac)을 누른 상태에서 여러 파일을 선택할 수 있습니다.
  • 서버로 전송할 때 여러 개의 파일이 배열 형식으로 전달됩니다.

[accept] 선택 사항 파일 유형 제한

  • type="file"에서 특정 파일 형식만 업로드하도록 제한할 수 있습니다.
  • MIME 타입(image/*, video/*, audio/* 등) 또는 확장자(.jpg, .png, .pdf 등)를 지정할 수 있습니다.
  • 사용자가 허용되지 않은 파일을 선택하려고 하면 브라우저에서 필터링됩니다.

[form] 선택 사항 특정 폼과 연결

  • 입력 요소가 특정 <form> 요소와 연결될 수 있도록 합니다.
  • 폼 외부에 있는 <input> 요소를 특정 <form>과 연결할 수 있으며, form 속성에는 해당 폼의 id를 지정해야 합니다.

[formaction] 선택 사항 폼 제출 시 사용할 URL 지정

  • type="submit" 또는 type="image"에서 사용되며, 버튼을 클릭했을 때 폼이 제출될 URL을 지정합니다.
  • <form> 요소의 action 속성을 무시하고 버튼별로 개별적으로 제출할 경로를 설정할 수 있습니다.

[formenctype] 선택 사항 폼 인코딩 방식 지정

  • formenctype 속성은 <form> 요소가 method="post" 일 때만 적용됩니다.
  • type="submit" 또는 type="image"에서 사용되며, 폼을 전송할 때 사용할 데이터 인코딩 방식을 지정합니다.
  • 파일 업로드(type="file>")를 포함한 폼에서는 multipart/form-data를 사용해야 합니다.

[formmethod] 선택 사항 폼 제출 방식 지정

  • type="submit" 또는 type="image"에서 사용되며, GET 또는 POST 같은 HTTP 메서드를 지정합니다.
  • <form> 요소의 method 속성을 무시하고 버튼별로 개별적으로 설정할 수 있습니다.

[formnovalidate] 선택 사항 폼 검증 무시

  • type="submit" 또는 type="image"에서 사용되며, 필수 입력(required)이나 pattern 등의 검증을 무시하고 폼을 전송할 수 있도록 합니다.
  • 일반적으로 간편 로그인, 임시 저장 등의 기능에서 사용됩니다.

[formtarget] 선택 사항 폼 제출 시 열리는 창 또는 프레임 지정

  • type="submit" 또는 type="image"에서 사용되며, 폼 제출 시 열리는 대상 창을 지정합니다.
  • _self(기본값, 현재 창), _blank(새 창), _parent, _top 등의 값을 사용할 수 있습니다.

[src] 필수 : [type="image"] 이미지 버튼의 소스 URL 지정

  • type="image"에서 사용되며, 클릭 가능한 버튼으로 사용할 이미지의 URL을 지정합니다.
  • 사용자가 버튼을 클릭하면 지정된 formaction으로 폼이 제출됩니다.

[alt] 필수 : [type="image"] 이미지 버튼의 대체 텍스트

  • type="image"에서 사용되며, 이미지가 로드되지 않을 경우 표시될 텍스트를 지정합니다.
  • 접근성을 위해 반드시 설정하는 것이 좋습니다.

[width], [height] 선택 사항 이미지 버튼 크기 지정

  • type="image"에서 사용되며, 이미지 버튼의 너비와 높이를 지정합니다.
  • 단순한 스타일 지정이므로 CSS를 사용하여 크기를 조정하는 것이 더 권장됩니다.

[type]별 예제

[type="checkbox"] (다중 선택 체크박스)

사용자가 여러 옵션 중에서 하나 이상의 항목을 선택할 수 있게 해주는 입력 필드입니다.
각 체크박스는 독립적으로 선택하거나 해제할 수 있어, 여러 항목을 동시에 선택할 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="radio"] (단일 선택 라디오 버튼)

사용자가 여러 옵션 중에서 하나만 선택할 수 있도록 하는 입력 필드입니다.
같은 name 값을 가지는 라디오 버튼들이 서로 그룹화되어 한 번에 하나만 선택할 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="file"] (파일 업로드)

사용자가 로컬 컴퓨터에서 파일을 선택하여 업로드할 수 있도록 하는 입력 필드입니다. accept 속성을 사용하여 특정 파일 형식만 선택할 수 있도록 제한할 수 있습니다.
또한, multiple 속성을 사용하면 사용자는 Ctrl(Windows) 또는 Command(Mac)을 누른 상태에서 여러 파일을 선택할 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="button"] (일반 버튼)

웹 페이지에서 다양한 작업을 수행할 수 있게 해주는 버튼입니다.
onclick 속성을 사용하여 JavaScript 코드와 연동하여 동적인 작업을 할 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="submit"] (폼 제출 버튼)

폼 데이터를 서버로 제출하는 버튼입니다. 사용자가 이 버튼을 클릭하면, 해당 폼에 포함된 데이터가 지정된 서버로 전송됩니다.

[type="reset"] (폼 초기화 버튼)

사용자가 폼 내의 입력 필드에 입력된 데이터를 초기화하고 기본값으로 되돌리게 하는 버튼입니다.
이 버튼을 클릭하면 폼에 입력된 값이 모두 초기화되어 초기 상태로 돌아갑니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="image"] (이미지 버튼)

이미지를 버튼처럼 클릭 가능한 요소로 사용하며, 이미지를 클릭하면 폼이 제출됩니다. src 속성을 사용해 버튼으로 표시할 이미지를 지정합니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.