대화식 HTML5 가져오기 만들기

사이트를 최종 사용자에게 더욱 매력적으로 만드는 방법은 그들의 행위에 추가적인 상호작용과 호응성을 증가시키는 것이다.이것은 사용자가 더욱 몰입할 수 있도록 눈과 마음을 즐겁게 하는 게임이다.
이런 의미에서 인터랙티브 폼과 복잡한 구성 요소/템플릿을 만드는 작업은 매우 재미있다. 지금까지 내가 가장 좋아하는 것은Senneff's log-in form이다.
그러나 이런 애니메이션과 상호작용 기능은 복잡한 구성 요소만 가지고 있는 것이 아니다.너는 거의 어느 곳에서든 미세한 상호작용을 추가할 수 있다. 적당히, 압도적으로, 폼 컨트롤이 이렇게 하기에 매우 적합하다.
또한 이를 실현하기 위해 대형 프레임워크나 라이브러리를 사용할 필요가 없습니다.라이브러리는 당신의 생활을 더욱 가볍게 하고 애니메이션을 더욱 원활하게 할 것이다GSAP는 SVG 애니메이션에 기적을 창조했지만 많은 브라우저들이 추가 코드가 필요 없는 상황에서 SVG 애니메이션을 만들었다.
이것이 바로 본고에서 사용자가 입력한 값에 맞게 간단한 HTML, CSS, 자바스크립트를 사용하여 상호작용 입력 필드를 만드는 방법을 볼 수 있는 이유입니다.
복잡한 구성 요소가 없습니다.큰 틀이 없다.외부 라이브러리가 없습니다.표준 HTML, CSS 및 일반 JavaScript를 사용하면 됩니다.효과가 생각보다 좋지 않을 수도 있지만 학습 곡선은 전혀 없다.
이제 시작합시다...

우리는 무엇을 건설해야 합니까?

기본 HTML5 시간 입력을 사용하는 시간 선택기를 만들 것입니다. 필드를 식별하기 위해 상호작용 아이콘을 통해 확장되었습니다. (시간을 변경하고 새 값에 대한 아이콘의 응답을 보십시오.)
위에서 말한 바와 같이, 우리는 어떤 라이브러리나 프레임워크도 사용하지 않기 때문에, 개발에 필요한 것은 단지 텍스트 편집기로 코드를 작성하고, 브라우저로 결과를 보는 것이다.
재미있는 부분부터 시작해 봅시다.

비밀 번호

이것은 이상하게 들릴 수도 있지만, 전체 기능은 HTML, CSS, 자바스크립트 15줄의 조합만 필요합니다.예, 원하는 방식으로 입력을 디자인하려면 더 많은 것이 필요할 수도 있지만, 기본 기능은 1줄 HTML, 7줄 CSS, 8줄 순수한 바닐라 자바스크립트입니다.진짜로

HTML

얼마 전에 HTMLinput 태그 유형이 매우 제한적이었습니다. 텍스트 입력, 암호 텍스트, 라디오 단추, 체크 상자와 일반 단추가 있습니다.그러나 HTML5의 일부로 다음과 같은 다양한 입력 유형이 추가되었습니다.

<input type="email" />             <!-- Email -->
<input type="url" />               <!-- URL -->
<input type="search" />            <!-- Search string -->
<input type="number" />            <!-- Number -->
<input type="date" />              <!-- Date -->
<input type="week" />              <!-- Week -->
<input type="month" />             <!-- Month -->
<input type="datetime" />          <!-- Datetime (obsolete, use the one below) -->
<input type="datetime-local" />    <!-- Datetime -->
<input type="tel" />               <!-- Telephone -->

브라우저도 유행한다. 개발자가 입력을 date 형식으로 지정하면 왜 지루한 텍스트 입력만 표시합니까?사용자가 선택할 수 있도록 캘린더 팝업 창이 있는 서식 적용 입력을 표시할 수 있습니다.예를 들어, 이것은 Chrome에서 온 것입니다.

그것들을 사용하면 몇 가지 장점이 있다. 입력 형식이 정확하여 직접 접근할 수 있다.사용자가 입력한 날짜가 정확한지 걱정할 필요가 없습니다. 브라우저는 사용자를 위해 강제로 실행될 것이며, 사용자에게는 자연스럽고 투명합니다.
그 중 하나는 일부 오래된 브라우저들이 새로운 텍스트 입력을 지원하지 않는다는 것이다.그러나 이것은 큰 문제가 아니다. 입력 유형을 식별할 수 없으면 일반적인 텍스트 입력으로만 보이기 때문이다.
또 다른 불편한 점은 팝업 창/디스플레이 형식의 스타일을 설정할 수 없다는 것이다.적어도 모든 브라우저가 그렇게 생각하는 것은 아니다.그러나 우리는 이 글에서 이 점을 걱정하지 않을 것이다.
코드로 돌아가다.입력한 내용이 "time"유형이므로 필요한 모든 HTML 코드는 다음과 같습니다.

<input type="time" />

이렇게 하면 지원되는 브라우저 유형이 다음과 같이 표시됩니다.

이렇게다음 단계로 넘어갑시다.

CSS

CSS에 대해 심도 있게 논의하기 전에 SVG를 살펴보겠습니다.SVG(Scalable Vector Graphics의 약어) 형식을 사용하면 HTML과 유사한 XML 기호를 사용하여 벡터 이미지를 만들 수 있습니다.
SVG를 사용하면 원, 사각형, 선을 그릴 수 있습니다(경로를 사용하여 선 또는 곡선을 그릴 수 있습니다). 이것은 품질을 떨어뜨리지 않고 크기에 맞게 그릴 수 있습니다.이 예에서는 두 개의 간단한 손잡이가 있는 시계의 작은 그림을 만들었습니다.

<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewBox="0 0 40 40">
  <circle cx='20' cy='20' r='18.5' fill='none' stroke='#222' stroke-width='3' />
  <path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='#bbb' stroke-width='1' />
  <g fill='#222' stroke='#222' stroke-width='2'>
    <circle cx='20' cy='20' r='2' />
    <path d='M20,24 20,5' style='transform:rotate(120deg); transform-origin: 50% 50%;' />
    <path d='M20,24 20,8' style='transform:rotate(20deg); transform-origin: 50% 50%;' />
  </g>
</svg>

이렇게 하면 다음과 같은 시계가 생성됩니다.

또한 SVG의 장점 중 하나는 CSS에서 내연적으로 사용할 수 있다는 것이다.따라서 다음과 같이 요소의 배경 이미지로 설정할 수 있습니다.

background-image: url("data:image/svg+xml;utf8,<svg>...</svg>");

이제 이미지가 생기고 CSS에서 사용할 수 있는 방법이 무엇인지 알기 때문에 다음 사항을 고려해야 합니다.

위와 같이 배경에 이미지를 설정합니다.

입력한 왼쪽에 이미지를 배치합니다background-image.

이미지가 중복되지 않도록 지시합니다background-position.

텍스트와 똑같이 커진다background-repeat.

입력에서 텍스트background-size를 누르면 그림에 공간을 남긴다.

CSS에서 이러한 모든 기능을 구현하는 방법을 알고 있습니다.그렇게 복잡하지도 않아!코드는 다음과 같습니다.

input[type="time"] {
  padding-left: 1.5em;
  background-repeat: no-repeat;
  background-position: 0.25em center;
  background-size: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23222' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><g fill='%23222' stroke='%23222' stroke-width='2'><circle cx='20' cy='20' r='2' /><path d='M20,24 20,5' style='transform:rotate(120deg); transform-origin: 50% 50%;' /><path d='M20,24 20,8' style='transform:rotate(20deg); transform-origin: 50% 50%;' /></g></svg>");
}

Notice how we use em as the unit. This will help the icon adjust automatically its position and size, independently of the unit used for the font size of the text in the input.

이 7줄 코드에서 시간 입력은 다음과 같습니다.

이상한 이유로, 배경 그림을 추가할 때, 크롬은 다른 종류의 테두리를 추가합니다.그러나 우리는 앞으로 경계를 양식화해서 더 좋아 보일 수 있기 때문에 그다지 걱정하지 않는다.
JavaScript에 상호 작용을 추가하여 타이머를 완성합니다.

JavaScript

상호 작용에는 바닐라 자바스크립트를 사용합니다.우리가 하고 싶은 것은, 매번

// every time that the time picker changes value
document.querySelector("input[type='time']").addEventListener("input", function() {
  // regular expression that verifies the format HH:MM
  const reTime = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/;
  // if the value matches the regular expression
  if (reTime.exec(this.value)) {
    // read the values of minutes and hours and update them
    const minute = Number(this.value.substring(3,5));
    const hour = Number(this.value.substring(0,2)) % 12 + (minute / 60);
    // set the same background image but with different hour/minute angles
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23222' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><g fill='%23222' stroke='%23222' stroke-width='2'><circle cx='20' cy='20' r='2' /><path d='M20,24 20,5' style='transform:rotate(${360 * minute / 60}deg); transform-origin: 50% 50%;' /><path d='M20,24 20,8' style='transform:rotate(${360 * hour / 12}deg); transform-origin: 50% 50%;' /></g></svg>")`;
  }
});

I made the hour value a bit more realistic by adjusting it not only to the hour but also to the minutes that have passed within that hour.

8행의 JavaScript(주석 없음)는 입력한 시간을 나타내는 클록 핸들을 업데이트합니다.최종 결과(경미한 업데이트를 더해서 더 보기 좋게 하기):

얼버무리는 문제

Mac과 Windows의 다른 브라우저에서 테스트를 했는데 결과는 다음과 같습니다.

크롬 기반 브라우저(Chrome, Opera, Brave, new Edge 등)와 Firefox에서 입력padding-left과 애니메이션이 정상적으로 작동한다.

Safari에서 입력type="time"은 작동하지 않지만 사용자가 유효 시간(형식type="time"을 입력하면 애니메이션이 작동합니다.

Windows의 Edge에서 입력HH:MM은 작동하지 않지만 애니메이션은 작동하지 않습니다(전체 시계가 표시되지 않음).

하지만 Firefox에 문제가 있습니다.핸들 각도가 JavaScript로 업데이트되면 전체 시계 아이콘이 깜박입니다.이것은 Firefox가 배경의 재방송을 어떻게 처리하는가에 의해 일어난 것이다.
이러한 깜박임의 영향을 최소화하는 가능성 중 하나는 SVG를 더 작은 부분으로 분해하는 것이다. 하나는 시계 프레임이 있고, 하나는 핸들이 두 개씩 있다.CSS에서는 쉼표로 구분된 여러 배경 이미지를 스택할 수 있습니다.

background-image: url(image1), url(image2), ...url(imageN);

이렇게 하면 우리가 시간을 업데이트할 때 유일하게 깜빡이는 것은 손잡이이다. 손잡이가 아무리 움직여도 깜빡거리거나 부분적으로 사라진다.

결론

HTML5와 입력 유형에 대한 확장 지원을 통해 대량의 라이브러리나 복잡한 인코딩이 필요 없는 상호작용 요소를 만들 수 있습니다.
지원이 아직 완전히 이루어지지 않았을 수도 있지만, 실패한 브라우저가 결국 사라지기 (IE), 적응 (가장자리가 Chromium으로 전환), 지원 추가 (Safari... 희망) 를 기대해야 한다.
브라우저별 팝업 창 스타일(달력, 주, 달 등)이 여전히 크게 다르기 때문에 아직 갈 길이 멀다.모든 게 올 거야.
그 밖에 이런 상호작용성은 시간 유형에 국한될 필요가 없다.모든 입력 형식에 유사한 효과를 적용하고 자신의 효과를 만들 수 있습니다.유일한 제한은 너의 상상력일 것이다.기타 예:
나는 네가 이 댓글을 좋아하길 바란다. 그것은 내가 예상한 것보다 길다.하면, 만약, 만약...읽어주셔서 감사합니다!