이 기사는 실제 구현과 함께 HTML에서 입력 유형=“날짜”의 사용법을 보여줍니다.
HTML에서 입력 유형 = '날짜'를 사용하는 방법은 무엇입니까?
'input type='data''는 의료 웹사이트, 항공 예약 웹사이트, 전자 상거래 웹사이트, 소셜 네트워킹 사이트 등과 같은 다양한 웹사이트에서 사용할 수 있습니다. 날짜 선택기의 구문은 다음과 같습니다.
< 입력 유형 = '날짜' ID = '' 이름 = '' >
위의 코드 스니펫에서 사용되는 속성은 다음과 같습니다.
- 먼저 “ 유형 ” 속성을 사용하면 입력 필드가 사용자가 날짜를 선택할 수 있는 날짜 선택기 역할을 할 수 있습니다.
- 다음으로 “ ID ” 속성은 해당 요소의 고유성을 정의합니다. 이를 사용하여 요소를 선택하고 JavaScript 기능을 적용할 수 있습니다.
- 그 후, “ 이름 ” 속성은 해당 요소의 이름을 지정합니다. 선택한 요소의 값을 가져오기 위한 유효성 검사 과정에서 도움말을 제공합니다.
이해의 수준을 높이기 위해 다양한 예를 살펴보겠습니다.
예 1: HTML에서 type= 'date' 사용
HTML 파일에서 ' <형식> ” 태그를 추가하고 다음 코드 줄을 삽입합니다.
< 형태 >
< 상표 ~을 위한 = '가입 날짜' > 가입 날짜 선택: < / 상표 >
< 입력 유형 = '날짜' ID = '가입 날짜' 이름 = '가입 날짜' >
< / 형태 >
위의 코드 조각에서:
- 먼저 “ <레이블> ” 태그는 더미 데이터를 배치하는 데 사용되며 “ 가입 날짜 '가 '에 제공되었습니다. ~을 위한 ' 기인하다.
- 다음으로 “ <입력> ” 태그는 “ 날짜 ” 그것의 “ 유형 ' 기인하다.
- 그런 다음 '의 값을 설정하십시오. 가입 날짜 ' 로 ' ID ' 기인하다. 또한 ' 이름 ” 필요에 따라 속성.
위의 코드 조각을 실행하면 웹 페이지가 다음과 같이 나타납니다.
위의 gif는 HTML에서 input type= 'data'를 사용하여 날짜 선택기가 생성되었음을 보여줍니다.
예 2: JavaScript를 사용하여 날짜 검색
데이터를 검색하기 위해 사용자는 JavaScript 기능을 활용할 수 있습니다. 더 나은 이해를 위해 아래 코드 블록을 방문하십시오.
< 단추 온 클릭 = '검색일()' >날짜 받기< / 단추 >< 스크립트 유형 = '텍스트/자바스크립트' >
기능 검색 날짜 ( ) {
dateInput이었다 = 문서.getElementById ( '가입 날짜' ) ;
var selectedDate = dateInput. 값 ;
알리다 ( '선택한 날짜: ' + 선택한 날짜 ) ;
}
< / 스크립트 >
위의 코드 조각에서:
- 먼저 “ 검색일() ” 함수는 “ <스크립트> ’ 태그.
- 다음으로 id가 '인 HTML 요소의 참조 가입 날짜 '라는 이름의 새 변수에 저장됩니다. 날짜 입력 '.
- 그런 다음 ' 값 ” 속성을 사용하여 선택한 HTML 요소의 값을 가져옵니다. 또한 '라는 새 변수에 저장하십시오. 선택한 날짜 '.
- 마지막으로 '를 사용하여 값을 표시합니다. 알리다() ' 방법.
위의 코드 조각을 실행하면 웹 페이지가 다음과 같이 나타납니다.
출력은 선택한 날짜가 경고 상자에 표시됨을 보여줍니다.
결론
입력 유형 = '날짜'는 날짜 선택기 생성을 위해 HTML에서 사용됩니다. '를 설정하여 유형 '의 속성 <입력> ” 태그를 “ 날짜 ”, “ <입력> ” 요소가 날짜 선택기로 작동하기 시작합니다. '와 같은 속성 ID ' 그리고 ' 이름 ”는 선택된 입력 요소를 고유하게 지정하는 데에도 활용됩니다. 선택한 값은 Javascript를 사용하여 액세스할 수도 있습니다. 이 기사에서는 입력 유형= '날짜'를 사용하는 방법을 설명했습니다.