알아야 할 가장 유용한 5가지 입력 요소 속성

웹사이트를 구축할 때 가장 우선시해야 하는 것은 사용자 경험입니다. 입력 요소 속성 웹 개발을 하고 있다면 입력 요소 속성이라는 용어에 익숙해야 합니다.

이 블로그에서 우리는 그것에 대해 논의할 것입니다. 입력 태그에 대해 설명 드리겠습니다. 웹 개발에 사용되는 입력 속성 5가지를 알아야 합니다.

입력 태그

입력 HTML 요소는 사용자로부터 데이터를 가져오기 위해 대화형 웹 기반 양식을 만드는 데 편리한 태그입니다. 장치 및 사용자 에이전트에 따라 다양한 입력 데이터 제어 위젯을 사용할 수 있습니다.

입력 태그는 입력 유형 및 속성의 많은 조합에 대해 매우 강력하고 복잡합니다.

입력 태그의 예를 들어보겠습니다. 여기서는 사용자가 이름의 최소 4자에서 최대 8자를 채울 수 있는 이름을 입력하기 위해 입력 태그를 사용했습니다.

아래 표시된 이미지는 HTML 코드가 편집기에서 어떻게 표시되는지 보여줍니다.

아래 이미지는 위의 출력이 브라우저에 어떻게 표시되는지 보여줍니다.

이것이 사용자의 데이터를 수락할 수 있는 방법입니다. 입력 태그에는 여러 유형이 있습니다. 그 중 일부는 텍스트, 버튼, 체크박스, 라디오, datetime-local, 범위, 검색입니다. type 속성의 기본값은 "text"입니다.

<input>의 동작은 type 속성의 값에 따라 크게 변경된다는 점에 유의하는 것이 중요합니다. 결과적으로 다양한 종류가 각각의 개별 참조 페이지에 설명되어 있습니다. 이 속성이 제공되지 않으면 텍스트 유형이 기본값으로 사용됩니다.

입력 속성

<Input> 요소는 속성 때문에 매우 강력합니다. 여기서 type 속성은 매우 중요합니다. 모든 <input> 요소는 유형에 관계없이 HTMLInputElement 인터페이스를 기반으로 하므로 둘 다 정확히 동일한 속성 집합을 공유하기 때문입니다. 그러나 실제로는 입력 유형의 특정 유형 하위 집합에 영향을 미칩니다. 또한 일부 속성은 입력 유형에 영향을 미치지만 속성에 따라 다를 수 있습니다.

여기에 개발자가 잘 알아야 하는 몇 가지 필수 입력 유형 속성이 나열되어 있습니다.

• 최소 길이
• 최대 길이
• 장애가 있는
• 자동 초점
• 자리 표시자

미니길이

이 속성 은 입력 요소 의 텍스트, 검색, 전화, URL, 이메일 또는 비밀번호 유형에서만 작동합니다. minlength 속성은 UTF-16 코드 단위와 같이 입력 상자에 입력할 최소 문자를 지정합니다.

maxlength에 지정된 값보다 작거나 같은 음이 아닌 정수 값이어야 합니다. minlength에 값이 지정되지 않았거나 잘못된 값이 지정되면 입력에 최소 길이가 없습니다. 입력 상자에 입력한 문자 수가 minlength보다 적으면 양식 제출이 실패합니다.

아래 이미지는 HTML 코드가 편집기에서 어떻게 표시되는지 보여줍니다.

아래 이미지는 위의 출력이 브라우저에 어떻게 표시되는지 보여줍니다.

최대 길이

이 속성은 또한 minilength와 같은 입력 요소의 텍스트, 검색, 전화, URL, 이메일 또는 비밀번호 유형에서만 작동합니다. maxlength 속성은 UTF-16 코드 단위와 같이 입력 상자에 입력할 최대 문자를 지정합니다.

이것은 minlength에 지정된 값보다 크거나 같은 음이 아닌 정수 값이어야 합니다. maxlength에 값이 지정되지 않았거나 잘못된 값이 지정되면 입력에 최대 길이가 없습니다.

기본적으로 브라우저는 지정된 최대 길이보다 긴 경우 사용자가 입력 상자에 문자 수를 입력하지 못하도록 합니다.

아래 이미지는 HTML 코드가 편집기에서 어떻게 표시되는지 보여줍니다.

아래 이미지는 위의 출력이 브라우저에 어떻게 표시되는지 보여줍니다.

장애가 있는

이것은 부울 속성입니다. 이 속성은 사용자가 입력과 상호 작용하지 않아야 함을 나타냅니다.

비활성화된 입력은 사용할 수 없음을 나타내는 다른 형태의 표시를 사용하는 희미한 색상으로 구체적으로 표시됩니다. disabled 속성은 클릭 이벤트를 수신하지 않으며 비활성화된 양식의 값은 양식 제출과 함께 제출되지 않습니다.

아래 이미지는 HTML 코드가 편집기에서 어떻게 표시되는지 보여줍니다.

아래 이미지는 위의 출력이 브라우저에 어떻게 표시되는지 보여줍니다.

자동 초점

이것은 또한 disabled 속성과 같은 부울 속성입니다. 이는 페이지가 로드 프로세스를 완료할 때 입력 상자에 초점이 맞춰짐을 나타냅니다. 또는 autofocus 속성을 포함하는 입력 요소가 표시될 때.

autofocus 속성을 얻은 요소는 하나만 있습니다. 둘 이상의 요소와 함께 넣으면 숨겨진 입력에 초점을 맞출 수 없기 때문에 속성이 있는 첫 번째 요소에 초점이 맞춰집니다. 따라서 자동 초점 속성은 숨겨진 입력 유형과 함께 사용할 수 있습니다.

아래 이미지는 HTML 코드가 편집기에서 어떻게 표시되는지 보여줍니다.

아래 이미지는 위의 출력이 브라우저에 어떻게 표시되는지 보여줍니다.

자리 표시자

자리 표시자는 문자열 속성입니다. 입력 필드에 입력해야 하는 데이터에 대한 아이디어를 제공하는 속성입니다.

설명이 아닌 입력 필드에 입력할 데이터의 종류를 암시하는 단어 또는 짧은 구문이어야 합니다. 따라서 예를 들어 필드가 사용자의 이름을 캡처할 것으로 예상되고 해당 레이블이 "이름"인 경우 적절한 자리 표시자는 "예: Bruce"일 수 있습니다.

아래 이미지는 HTML 코드가 편집기에서 어떻게 표시되는지 보여줍니다.

아래 이미지는 위의 출력이 브라우저에 어떻게 표시되는지 보여줍니다.

마무리

이 블로그에서는 특히 웹 개발자인 경우 알아야 할 몇 가지 입력 요소 속성을 소개했습니다. 이러한 속성을 사용하여 HTML 양식이나 웹 페이지에서 다양한 방식으로 입력 요소를 제어할 수 있습니다.

HTML을 포함하여 나날이 추가되는 많은 새로운 속성이 있지만 이것들은 반드시 알아야 할 속성 중 일부입니다.

이 블로그가 당신에게 도움이 되었기를 바랍니다! 웹 개발 또는 웹 디자인 서비스에 손이 필요하십니까? 저희에게 연락 주시기 바랍니다!

편집자: 암루타