HTML 입력 유형에 대해 알아야 할 모든 것

우리가 HTML을 사용하여 개발하는 거의 모든 응용 프로그램은 어딘가에서 input를 사용하지만 사용자가 알지 못하는 많은 입력type이 있습니다. 따라서 input 유형에 대해 알지 못할 수도 있는 모든 것을 살펴보겠습니다.

일반적인 HTML 입력 유형

HTML에서는 입력에 특정 유형을 지정할 수 있습니다. 예를 들어 사용자가 상자에 텍스트를 입력할 수 있는 간단한text 입력은 다음과 같습니다.

<input type="text" />

우리가 사용하는 가장 일반적인 입력 유형은 다음과 같습니다.

hidden - 일반적으로 사용자가 볼 필요가 없는 값을 저장하기 위해 숨겨진 양식 입력

text - 간단한 텍스트 입력.

password - 암호이기 때문에 텍스트가 별표로 표시되는 입력입니다.

submit - 양식을 제출하기 위한 제출 버튼입니다.

button - 제출과 비슷하지만 양식을 제출하지 않습니다!

radio - 목록 항목 범위에서 선택할 수 있는 버튼입니다.

checkbox - 선택하거나 선택 해제할 수 있는 버튼 세트입니다.

다음과 같은 기본 유형도 있습니다.

search도 있습니다. 일반적으로 사용되는 것은 아니지만 검색 입력 필드에 사용할 수 있으며 입력할 때 작은 십자 표시가 나타납니다.

및 양식을 제출하지 않는 버튼을 생성하고 reset 라고 말하는 reset 도 있습니다. 다른 모든 양식 요소를 재설정합니다.

이러한 공통input 유형은 도처에 있으며 다음과 같습니다.

유형 유효성 검사가 있는 기본 HTML 입력

이러한 간단한 유형 외에도 다음과 같이 매우 유용할 수 있는 몇 가지 다른 유형이 있습니다.

tel - 전화번호용.

url - 입력이 URL인지 확인합니다.

email - 입력이 이메일인지 확인합니다.

number - 입력이 숫자인지 확인합니다.

range - 입력이 범위 내에 있는지 확인합니다.

참고: 이러한 입력 유형은 클라이언트 측에서 입력의 유효성을 검사하지만 입력에 해당 유형만 포함되도록 하는 방법으로 사용해서는 안 됩니다. 예를 들어 email는 이메일 유형만 허용하지만 사용자는 프런트엔드를 쉽게 변경하여 email가 아닌 항목을 제출할 수 있습니다. 따라서 백엔드도 확인하십시오.

날짜 HTML 입력 유형

우리 대부분은 type="date" 에 익숙하지만 다음을 포함하여 HTML 입력에 대한 많은 날짜 유형이 있습니다.

date - 모든 날짜 입력.

month - 한 달을 선택할 수 있습니다.

week - 한 주를 선택할 수 있습니다.

time - 특정 시간을 선택할 수 있습니다.

datetime-local - 날짜/시간 조합을 선택할 수 있습니다.

이들 각각은 아래에 나와 있습니다. 브라우저의 UI 구현으로 제한되지만 매우 유용합니다.

기타 HTML 입력 유형

이 모든 것 외에도 다음과 같은 추가 유형이 있습니다.

file - 파일을 서버에 업로드합니다.

image - 가장 이상한 점은 그래픽 제출 버튼입니다!

입력용 파일 유형

입력 파일 유형은 파일 업로드 인터페이스를 생성합니다.

<input type="file" />

입력용 이미지 유형

이것은 아마도 당신이 사용할 가능성이 가장 적은 것입니다. 양식의 제출 버튼으로 사용되는 입력에 src 및 alt 속성을 제공하여 궁극적으로 입력이 이미지처럼 작동하도록 합니다.

<input type="image" alt="Login" src="login-button.png" />

결론

여기에는 현재 사용할 수 있는 모든 HTML 입력 유형이 포함됩니다. 기발한type="image" 입력 유형이더라도 새로운 것을 배웠기를 바랍니다. 웹 개발에 대해 자세히 알아보려면 에서 저를 팔로우하거나 fjolt을 확인하십시오.