5 HTML5 폼 입력 트릭 - 더미

JavaScript 프로그램에 대한 사용자 입력을 얻는 가장 일반적인 방법은 HTML 양식 요소를 사용하는 것입니다. HTML의 최신 버전 인 HTML5에는 몇 가지 새로운 양식 요소와 속성이 있습니다.

텍스트 입력

텍스트 입력은 HTML 양식 필드의 가장 기본적인 유형입니다. 웹 사이트 사용자에게 아무 값이나 입력 할 수있는 빈 입력을주는 데 사용됩니다. 다음은 텍스트 입력을 만드는 데 사용되는 코드의 예입니다.

브라우저에서이 필드의 모양은 다음과 같습니다.

자리 표시 자 텍스트

사용자가 입력을 시작하기 전에 자리 표시 자 텍스트가 입력 필드 안에 나타납니다. 사용자가 입력 할 것으로 예상되는 내용을 알려주는 데 유용합니다.

다음은 텍스트 입력에서 자리 표시 자 텍스트를 사용하는 예입니다.

이 필드는 웹 브라우저에서 보이는 것입니다.

->

자동 초점

입력 필드가 선택되어 있고 커서가 내부에 표시되면 초점이 맞춰집니다. "웹 페이지가로드되는 즉시 특정 필드 (예: 이름 필드)에"포커스 "를 지정하려면 자동 초점 특성을 사용할 수 있습니다. 다음과 같은 모습입니다.

Email input

전자 메일 입력 필드는 텍스트 상자 입력과 비슷하며 대부분의 경우 텍스트 입력 필드와 동일하게 작동합니다. 그러나 때로는 웹 브라우저가 이메일 입력 필드를 텍스트 입력 필드와 다르게 처리합니다. 예를 들어 이메일 입력 필드가 iPhone에서 "초점"인 경우 전자 메일 주소를 입력 할 수있는 바로 가기가있는 특수 키보드가 표시됩니다.

전자 메일 입력 필드 사용 예제는 다음과 같습니다.

슬라이더 입력

슬라이더 입력은 사용자가 끌어서 놓기를 사용하여 숫자 범위의 숫자를 선택할 수있는 입력 필드입니다 제어.

슬라이더를 생성하는 코드는 다음과 같습니다.

슬라이더는 웹 브라우저에서와 같습니다.

필수

양식을 제출하기 전에 사용자가 입력란에 값을 입력하도록하려면 HTML5에 required라는 속성이 있어야합니다.

양식 입력란을 작성하려면 다음과 같이 양식 입력란에 새 속성을 추가하기 만하면됩니다.

사용자가 phoneNumber 입력란을 채우지 않고이 양식을 제출하려고하면 입력란에 이 글을 쓰는 시점에서 모든 웹 브라우저가 필수 속성을 지원하는 것은 아니지만 Chrome, Firefox, Internet Explorer 및 Opera에서 지원됩니다.

더 많은 정보 찾기

자바 스크립트에서 요소 및 속성에 대한 자세한 내용을 보려면 HTML 양식 가이드 (Mozilla Developer Network)를 방문하십시오.