Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 입력 시간 개체

<시간/>

HTML DOM 입력 시간 개체는 시간 유형의 입력 HTML 요소를 나타냅니다.

구문

다음은 구문입니다 -

만들기 시간 입력

var timeObject = document.createElement(“input”);
timeObject.type = “time”;

속성

여기, '시간' 다음과 같은 속성을 가질 수 있습니다 -

속성 설명
자동완성 시간 필드의 자동 완성 속성 값을 정의합니다.
자동 초점 시간 필드가 초기 페이지 로드에 초점을 맞춰야 하는지 정의합니다.
기본값 시간 필드의 기본값을 설정/반환합니다.
비활성화됨 시간 필드의 비활성화/활성화 여부를 정의합니다.
양식 시간 필드를 포함하는 둘러싸는 형식의 참조를 반환합니다.
최대 시간 필드의 최대 속성 값을 반환/설정합니다.
시간 필드의 min 속성 값을 반환/설정합니다.
이름 시간 필드의 name 속성 값을 정의합니다.
읽기 전용 시간 필드가 읽기 전용인지 여부를 정의합니다.
필수 양식을 제출하기 위해 시간 필드를 반드시 채워야 하는지 여부를 정의합니다.
단계 시간 필드의 단계 속성 값을 정의합니다.
유형 시간 필드의 형식 요소의 유형을 반환합니다.
시간 필드의 값 속성 값을 정의합니다.

방법

그리고 다음과 같은 방법도 있습니다 -

부울 값 세부정보
탈퇴 시간 필드가 감소해야 하는 분 수를 정의합니다.
스텝업 시간 필드가 증가해야 하는 시간(분)을 정의합니다.

예시

입력 시간 양식의 예를 살펴보겠습니다. 속성 -

<!DOCTYPE html>
<html>
<head>
<title>Input Time form</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form id="Physics">
<fieldset>
<legend>Time-form</legend>
<label for="TimeSelect">Examination Time :
<input type="time" id="TimeSelect" value="14:00" disabled>
</label>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputTime = document.getElementById("TimeSelect");
   function getform() {
      divDisplay.textContent = inputTime.form.id+' exam starts from '+inputTime.value;
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

'어떤 시험?'을 클릭하기 전에 버튼 -

HTML DOM 입력 시간 개체

'어떤 시험?'을 확인한 후 버튼 -

HTML DOM 입력 시간 개체