HTML의 날짜-HTML 튜토리얼-php.cn

HTML의 날짜

王林

풀어 주다： 2024-09-04 16:45:13

원래의

696명이 탐색했습니다.

시간 및 날짜 필드와 같이 웹 양식을 사용하여 HTML에서 빠르게 찾을 수 있는 일부 필드가 있습니다. 우리는 온라인 티켓 예약, 주문 예약 등과 같은 예약 시스템에서 이러한 필드를 사용했습니다. 대부분 날짜 선택 기능을 사용하여 자바스크립트와 같은 일부 스크립팅 언어에서 "날짜"와 같은 공통 필드를 사용했습니다. 주로 달력의 텍스트 상자 열에서 날짜를 선택하는 데 사용됩니다. html5에서는 사용자 브라우저 화면을 완전히 지원하는 Opera 및 Google 크롬 버전과 같은 일부 지정된 브라우저를 선택했습니다. 유효한 날짜와 시간 형식이 포함된 열이 있는 텍스트 상자에서 html5 버전을 적절하게 인식하는 경우가 있습니다.

구문:

우리는 웹페이지가 사용자 요구 사항에 따라 적절하게 표시될 수 있도록 일반적인 HTML dtd 모델을 따르는 몇 가지 구문을 가지고 있습니다.

<html>
<body>
<input type="date" id="1" name="first" value="yyyy-month-date">
-----some codes---
</body>
</html>

로그인 후 복사

위 코드는 웹페이지에 날짜 형식 필드가 포함된 기본 HTML 코드입니다. 태그는 웹 페이지에 대한 사용자 입력 또는 사용자 정의 입력과 같은 입력 필드를 만드는 데 사용되는 HTML 태그 중 하나입니다.

Html의 날짜 기능

날짜 입력 유형은 양식 요소입니다. 이를 통해 사용자는 날짜 선택기 구현을 사용하여 사용자 화면에서 데이터를 캡처할 수 있습니다. 날짜 선택기를 사용하는 것은 브라우저와 마찬가지로 공급업체에 달려 있지만 html5는 화면에 사용자 입력을 구현하는 방법에 대해 공급업체에 지정되지 않습니다. 해당 속성을 사용하여 브라우저에서 이름을 선언하기 위한 태그입니다. min 및 max와 같은 최소 및 최대 형식 속성에서 날짜 값을 지정할 수 있지만 사용자는 범위 내에서 날짜별 값을 알아야 합니다.

또한 날짜가 어떻게 증가하는지 확인하기 위해 단계별 형식과 같은 속성을 포함할 수 있습니다. 기본값은 1입니다. 날짜 입력 유형에 대한 브라우저 지원을 확인할 수도 있습니다. 마찬가지로 HTML에는 모든 태그와 속성에 대한 몇 가지 기능이 있습니다. Something date에는 HTML의 입력 유형에 대한 몇 가지 기능이 있습니다.

입력 필드

Firefox 및 Safari 브라우저는 고유한 형식이나 특별한 상호 작용이 없는 일반 텍스트 입력 유형을 지원합니다. Microsoft의 경우 엣지 브라우저에는 사용자 브라우저 화면에서 입력 필드가 읽기 전용 형식으로 표시되어 있어도 특별한 기능이나 상호 작용이 없습니다. Chrome 및 Opera와 마찬가지로 다른 브라우저에도 사용자의 브라우저 또는 시스템 설정에 따라 날짜 자리 표시자 값이 표시되는 유사한 구현이 있을 수 있습니다. 여기에는 날짜 형식 및 기타 시스템 구성과 관련된 설정이 포함될 수 있습니다.

애플리케이션은 일반적으로 사용자가 명확한 입력 텍스트 필드와 화살표와 같은 일부 다른 형식을 값 사이에서 위아래로 순환하고 선택할 화살표를 사용할 수 있도록 일부 컨트롤을 설정합니다. 브라우저 화면에 나타나는 보기를 변경하는 데 사용되는 "WebKit 접두사 의사 선택기" 도구와 같은 다른 웹 엔진이 있습니다.

최소 및 최대 속성

모든 브라우저는 최소 및 최대 속성을 사용하여 날짜와 같은 입력 유형을 지원했습니다. Chrome 및 Opera 브라우저를 사용하는 경우 활성화된 속성 세트를 지원합니다. 그러나 사용자가 하나의 속성에만 값을 설정하면 프런트 엔드 화면이 올바르게 표시되지 않을 수 있습니다. 이러한 브라우저는 위쪽 및 아래쪽 화살표를 사용하여 d-m-year와 같은 형식을 사용하여 텍스트 상자의 값을 변경함으로써 날짜 입력 유형을 지원합니다.

사용자가 연도 쪽의 커서를 강조 표시하고 아래쪽 화살표를 클릭하면 목록 상자의 화살표 순환에 표시된 값 목록으로 연도가 자동으로 변경됩니다. 유효한 값이 필요하며 최대값이 설정되지 않았습니다. 기본값이 사용됩니다. 목록 상자에 표시되는 최대값도 동일합니다. Android와 같은 모바일 애플리케이션을 사용하면 날짜 선택기의 값이 변경됩니다.

날짜 선택기

HTML의 필수 입력 유형 중 하나입니다. 사용자 입력에 날짜 형식이 제공됩니다. 사용자 데스크톱의 날짜 선택기 조건을 충족하기 위해 Chrome, Opera와 같은 브라우저를 사용하더라도 CSS와 같은 스타일은 조건을 충족하지 않습니다. 웹페이지에서는 정상적으로 보입니다. 문서에서 일부 CSS 스타일 요소를 사용하면 사용자 인식에 맞게 보기가 정렬되고 디자인됩니다. 사용자 브라우저에서 날짜 선택기를 비활성화할 수도 있습니다. 자체 기능을 활성화하고 구현하려면 웹에서 수행하지만 모바일 장치에서는 액세스가 일부 제한됩니다.

HTML의 날짜 예

다음은 HTML의 Date의 다양한 예입니다.

예시 #1

코드:

<html>
<body>
<form action="sample.html">
Dates: <input type="date" name="first">
<input type="submit">
</form>
</body>
</html>

로그인 후 복사

출력:

HTML의 날짜

예시 #2

코드:

<html>
<head>
<style>
sample {
display: block;
font: 3rem;
}
sample2 {
margin: .7rem 2;
}
</style>
</head>
<body>
<div class="sample">
<label for="first">dates:</label>
<input type="date" id="names" name="first"
value="2020-02-26"
min="2020-01-01" max="2020-12-31">
</div>
</body>
</html>

로그인 후 복사

출력:

HTML의 날짜

예시 #3

코드:

<html>
<body>
<p id="sample"></p>
<script>
var dates = new Date();
document.getElementById("sample").innerHTML = dates;
</script>
</body>
</html>

로그인 후 복사

출력:

HTML의 날짜

처음 두 예에서는 웹 페이지에 날짜 내용을 표시하기 위해 레이블과 텍스트 상자를 사용합니다. 마지막 예에서는 자바스크립트 함수를 사용하여 날짜까지의 날짜 함수를 자동으로 호출합니다. 함수에서 다른 스타일을 사용하는 경우 웹 페이지를 강조하는 데 사용합니다. 날짜 함수를 mm-dd-yy 또는 dd-mm-yy 또는 yy-mm-dd 또는 yy-dd-mm로 사용합니다. 이러한 형식은 jquery 등의 다른 라이브러리를 사용할 때 사용자 요구 사항을 기반으로 합니다. 라이브러리는 사용자 측(프런트 엔드)과 백엔드 목적을 모두 사용했습니다.

결론

개발자는 HTML로 작업할 때 "날짜" 유형을 사용하여 사용자 정의 입력 요소를 만듭니다. 이 기능을 사용하면 사용자는 텍스트 상자나 "날짜 선택기" 기능을 통해 날짜를 입력할 수 있습니다. 개발자는 텍스트 상자를 사용할 때 날짜 형식을 확인하고 브라우저 호환성을 확인해야 합니다. 그러나 날짜 선택기 기능은 유효성 검사가 필요하지 않으며 HTML 코드에 쉽게 통합될 수 있습니다.

위 내용은 HTML의 날짜의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!