태그에 대해 알아야 할 5가지 사항

안녕하세요 여러분, 잘 지내고 계신가요? 잘 지내고 계시길 바랍니다. 이 블로그에서는 <input> 태그에 대해 좀 더 일찍 알았더라면 하는 몇 가지 속성을 공유할 것입니다.

1. 초점:

:focus 선택기는 입력 요소를 클릭할 때 작동하며 입력 필드에 콘텐츠를 입력할 수 있습니다.
<input> 태그에 테두리가 없다고 가정하면 다음을 사용하여 이를 구현할 수 있습니다.

input {
    border: none;
} 

그러나 입력 레이블에 콘텐츠를 입력하기 시작하면 해당 테두리가 다시 나타납니다. 따라서 이 문제에 대한 간단한 해결책은 다음과 같습니다.

input:focus{
  outline: none;
}

2. 자동 완성:

자동 완성은 입력 필드를 완성하는 데 도움이 되지만 때때로 짜증나고 잘못된 세부 정보를 제안합니다. 자동 완성을 끄는 방법은 다음과 같습니다.

반응:

<input type=”text” autoComplete="new-off">

HTML:

<input type=”text” Autocomplete="off">

3. 파일 입력:

때로는 텍스트 콘텐츠가 보내려는 것이 아니라 이미지, gif, 비디오 등일 수 있습니다. type="file" 속성을 사용하여 이러한 유형의 데이터를 보낼 수 있습니다.

<input type="file">

일반적으로 e.target.value를 사용하여 입력 값에 액세스하지만 여기서는 e.target.files[0]를 사용하여 파일 데이터에 액세스할 수 있습니다. 이름, 경로 등과 같은 파일의 세부 정보를 개체 형식으로 포함합니다.



"선택한 파일 없음"텍스트는 기본적으로 검은색이며 input[type='file'] 를 사용하여 원하는 색상으로 변경할 수 있습니다.

input[type='file'] {
  color: rgb(255, 255, 255)
}

4. 자동 초점

입력 자동 초점 속성은 페이지가 로드될 때 입력 필드가 자동으로 초점을 받도록 지정합니다. 예: 블로그를 편집/만드는 동안 블로그 편집 페이지에 도달하면 입력에 초점을 맞추고 싶습니다.

<input type="text" autofocus>

5. 목록 속성 입력

사용자가 특정 옵션 목록에서 선택하기를 원하십니까? 목록 속성을 사용할 수 있습니다. 예를 들어 보겠습니다.

<form onSubmit={function}>
  <input list="anime" name="anime">
  <datalist id="anime">
    <option value="Naruto">
    <option value="My Hero Academia">
    <option value="Death Note">
    <option value="Dragon Ball Z">
    <option value="Attack on Titan">
  </datalist>
  <input type="submit" >
</form>

그게 다야, 여러분, 이 팁을 즐겼으면 좋겠고 다음 프로젝트에서 이 작은 기술을 통합하기를 바랍니다 :)

다른 팁/트릭을 알고 있다면 댓글로 알려주세요. 읽어 주셔서 감사합니다 :)

나와 연결 -

Github