[ HTML ] input 속성 value, readonly, disabled...

< 목차 >

value 속성	사용자가 입력한 값을 저장하는 속성
readonly 속성	읽기 전용 입력 필드를 만들 수 있는 속성 (값은 볼 수 있지만 수정 불가)
disabled 속성	입력 필드를 비활성화하며, 수정과 폼 전송 시 값이 전송되지 않음
maxlength 속성	사용자가 입력할 수 있는 최대 글자 수를 제한하는 속성
placeholder 속성	입력 필드에 안내 텍스트를 제공하는 속성 (입력 시작 시 사라짐)
required 속성	필수 입력 필드를 설정하는 속성 (폼 제출 전 필수 입력을 요구)
autocomplete="on" 속성	브라우저가 자동으로 이전 입력 값을 제안하는 기능
타입이 달라도 자동완성 데이터 공유	name 속성 값이 같으면 자동완성 데이터가 공유됨 (타입에 관계없이)
autofocus 속성	페이지 로드 시 자동으로 해당 입력 필드에 포커스를 주는 속성

 

---

 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 입력 필드에 자동으로 포커스가 가게 됨