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

  • Publishing
  • HTML
  • 폼 콘텐츠(Forms content)
  • input element 선택 및 조작 요소
요약 설명

<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) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

️한눈에 보는 요약!

input 선택 및 조작 요소
[input 요소 선택 및 조작 요소]