몽키의 코딩작업실

< 대표적인 표준 name 값 (autocomplete을 위한 표준 값) >

자동완성관련 중요한 사항

1. 브라우저 저장 범위

브라우저는 사이트 전체(도메인 기준)에서 사용자가 입력한 데이터를 저장하고, 자동 완성 데이터를 제공. 즉, 같은 도메인 내에서 여러 페이지에서 입력된 값들이 공유됨

2. name 속성 공유

name 속성이 같으면, 다른 HTML 파일에 있어도 자동 완성 데이터가 공유됨. 예를 들어, 첫 번째 HTML 파일에서 name="email"을 설정하고, 두 번째 HTML 파일에서 같은 name="email"을 설정하면, 첫 번째 파일에서 입력한 이메일 값이 자동으로 제시

3. autocomplete=“on” 속성

autocomplete="on" 속성을 사용하면, 사용자가 입력한 값들이 브라우저 캐시에 저장되고, 이후 같은 도메인 내에서 자동 완성 데이터를 제공. 이는 브라우저가 데이터를 기억하여 다시 입력할 필요 없이 자동으로 값을 제시해줌

4. name 속성의 중요성

name 속성이 동일하면 자동 완성 데이터를 공유할 수 있기 때문에, 입력 필드의 name 값은 매우 중요. 만약 자동 완성을 활용하려면, 정확한 name 속성을 설정해야 함.

5. type 속성 관계

type 속성이 달라도 name 값이 같으면 자동 완성 데이터가 공유됨. 예를 들어, type="text"와 type="email"이 다르더라도, 브라우저는 name 속성을 기준으로 데이터를 저장하므로 같은 name 값을 가진 필드는 자동 완성 기능을 공유함.

자동 완성은 autocomplete="on" 속성을 사용하여 활성화

사용자가 사이트를 방문할 때마다 입력한 데이터가 저장되어 나중에 다시 사용할 수 있게 됨

name 속성의 표준 값은 브라우저에서 자동 완성 기능을 제대로 동작시키기 위한 중요한 기준!!

< 목차 >

 value

• value 속성은 입력 필드에 사용자가 입력한 값을 저장하는 속성
• 예를 들어, 사용자가 abc를 입력하면, 이 값은 해당 input 필드의 value 속성에 저장됨
• JavaScript로 값을 읽으면 사용자가 입력한 값을 얻을 수 있음
• 페이지 로드 시 value 속성에 미리 값을 설정하면 그 값이 기본값으로 표시됨

<div>
    <input type="text" name="username" id="user" value="abc">
</div>

 -> 페이지가 로드될 때 value="abc"로 설정된 값이 input 필드에 나타남. 사용자가 abc를 수정하거나 새로운 값을 입력하면 이 값이 변경됨

readonly

• readonly 속성은 해당 입력 필드의 값을 읽기만 할 수 있게 만듬
• 마우스 포커스가 들어가도 수정할 수 없지만 값은  볼 수 있음. 마우스나 키보드로 입력할 수 없음
• readonly 속성이 있는 필드에 입력된 값은 폼을 제출할 때 전송될 수 있음. 즉, 사용자가 값을 변경할 수 없더라도, 그 값은 그대로 서버로 전송될 수 있음

<div>
    <input type="text" name="readonlyField" id="readonly" value="읽기만 가능" readonly>
</div>

-> readonly 속성 덕분에 사용자는 readonly 필드의 값을 수정할 수 없으나 이 값은 폼이 제출될 때 전송됨

disabled

• disabled 속성은 해당 필드를 사용할 수 없게 만듬
• 수정도 불가능하고, 폼 전송 시에도 값이 전송되지 않음. 즉, disabled 필드는 완전히 비활성화됨
• 폼이 제출되더라도 disabled가 적용된 필드는 전송되지 않지만, 자바스크립트로는 값을 읽을 수 있
• 시각적으로 흐리게 표시됨

<div>
    <input type="text" name="disabledField" id="disabled" value="이건 전송되지 않음" disabled>
</div>

-> disabled 속성을 가진 필드는 사용자가 입력을 할 수 없고, 폼을 제출하더라도 값이 서버로 전송되지 않음. 다만, 자바스크립트로는 값을 읽을 수 있음

< readonly와 disabled의 차이점 >

• readonly: 사용자가 필드의 값을 보거나 복사할 수는 있지만 수정할 수는 없음. 폼을 제출할 때 값이 서버로 전송됨
• disabled: 필드를 완전히 비활성화시켜서 값도 볼 수 없고, 폼 제출 시 값도 전송되지 않음

maxlength

• maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 제한함
• 이 속성을 사용하면 사용자가 정해진 길이 이상의 텍스트를 입력할 수 없게 됨
• ex) 주민등록번호나 전화번호 등을 입력받을 때 유용

<div>
    <input type="text" name="phoneNumber" id="phone" maxlength="10">
</div>

-> maxlength="10"으로 설정하면, 사용자는 최대 10자까지만 입력할 수 있다. 11자 이상을 입력하면 자동으로 제한된다.

placeholder

• placeholder 속성은 입력 필드에 사용자가 무엇을 입력해야 하는지에 대한 가이드를 제공
• placeholder에 설정된 텍스트는 입력이 시작되면 사라지고, 필드가 비어 있으면 다시 보임
• 이 속성은 사용자가 올바른 형식으로 입력할 수 있도록 도와주는 역할을 함

<div>
    <input type="text" name="email" id="email" placeholder="이메일을 입력하세요">
</div>

-> 사용자가 이메일을 입력하지 않으면 "이메일을 입력하세요" 라는 안내 텍스트가 보이고, 입력을 시작하면 사라짐

required

• required 속성은 해당 필드를 반드시 입력해야 한다는 것을 지정
• 사용자가 값을 입력하지 않으면 폼을 제출할 수 없음
• 이 속성은 <form> 태그 안에서만 사용됨
• 폼 제출 시 필수 항목을 체크하는 역할을 함

<div>
    <input type="text" name="username" id="username" required>
</div>

-> username 필드가 비어 있는 상태로 폼을 제출하려고 하면 브라우저가 경고 메시지를 띄우고 제출을 막음

autocomplete=“on”

• autocomplete="on" 속성은 사용자가 이전에 입력한 값을 브라우저가 저장하고, 이후 입력할 때 자동으로 제안해주는 기능
• 브라우저가 웹사이트와 관련된 데이터를 저장하고 관리하는 데 도움을 줌
• 브라우저 캐시와 연결되어 있어서 같은 도메인 내에서는 자동 완성 데이터를 공유

<div>
    <input type="text" name="email" id="email" autocomplete="on">
</div>

-> autocomplete="on"이 설정된 필드에 대해 브라우저는 이메일 입력값을 기억하고, 다른 페이지에서도 자동 완성 기능을 제공

< 타입(type)이 달라도 name 값이 같으면 자동 완성 공유 >

• type 속성이 달라도 name 값이 같으면 브라우저는 같은 필드로 인식하고 자동 완성을 제공
•  ex) type="text", type="email", type="password" 등이 다르더라도, name="email"이 같으면 자동 완성 데이터 공유

autofocus=“on”

• autofocus="on" 속성은 페이지가 로드될 때 자동으로 해당 입력 필드에 포커스를 주어 사용자가 바로 입력을 시작할 수 있음
• 예를 들어, 로그인 페이지에서 아이디 입력 필드에 자동으로 포커스를 주면 사용자가 아이디를 바로 입력할 수 있어 편리

<div>
    <input type="text" name="username" id="username" autofocus="on">
</div>

-> 페이지가 로드되자마자 username 입력 필드에 자동으로 포커스가 가게 됨