[HTML] HTML - 18.Input 요소의 속성

이번 시간에는 input 요소 속성에

대해 알아보도록 하겠습니다.

 

input 요소의 속성

input 요소의 여러 속성을 사용하면

사용자가 입력하는 방식을 

더욱 다양하게 제어할 수 있습니다.

---

value 속성 

 

value 속성은 input 요소의

입력 필드(input field)에 나타나는

초기값을 설정합니다.

<form>
   이름: <br><input type="text" name="student_name"> <br>
   학번: <br><input type="text" name="student_id"> <br>
   학과: <br><input type="text" name="department" value="물리학과"> <br>
</form>

---

readonly 속성

readonly 속성은 사용자가

입력 필드를 볼 수는 있으나

수정할 수는 없도록 설정합니다.

 

disabled 속성과 다를 점은 

전송 버튼(submit)을 누를 시 

초기값이 서버로 전송됩니다.

 

<form>
   이름: <br><input type="text" name="student_name"> <br>
   학번: <br><input type="text" name="student_id"> <br>
   학과: <br><input type="text" name="department" value="물리학과" readonly> <br>
</form>

---

disabled 속성

disabled 속성은 사용자가 

입력 필드를 아예 사용할 수 없도록 

설정합니다.

 

disabled 속성이 설정된

입력 필드는 사용할 수 없고 

클릭할 수도 없습니다.

 

또한, readonly 속성과는 

달리 전송 버튼을 누르더라도

초기값이 서버에 전송되지 않습니다.

<form>
    이름: <br><input type="text" name="student_name"> <br>
    학번: <br><input type="text" name="student_id"> <br>
    학과: <br><input type="text" name="department" value="물리학과" readonly> <br>
</form>

---

maxlength 속성

 

maxlength 속성은 입력 필드에

입력할 수 있는 문자의 

최대 길이(length)를 설정합니다.

<form>
    이름: <br><input type="text" name="student_name" value="홍길동" maxlength="4"> <br>
    학번: <br><input type="text" name="student_id"> <br>
</form>

 

---

size 속성

size 속성은 입력 필드에 보여지는

input 요소의 크기(size)를 설정합니다.

 

maxlength 속석과 달리 입력 필드가 

한 번에 보여줄 수 있는 문자의 

최대 개수만을 의미합니다.

 

따라서 입력될 수 있는 문자의 

최대 길이는 maxlength 속성 값에 따라서

달라지며 size 속성과는 전혀 무관합니다.

<form>
    이름: <br><input type="text" name="student_name" value="홍길동" size="4"> <br>
    학번: <br><input type="text" name="student_id"> <br>
</form>

---

HTML5 에서 추가된 form 요소의 속성

 

autocomplate - 자동 완성 기능

navalidate - 불리언 속성 (true/false)

---

HTML5에서 추가된 input 요소의 특성

 

autocomplate 

autofocus 

form 

formaction

formenctype 

formmethod

formnovalidate

formtarget

height and width

list 

min and max

multiple 

pattern (정규식)

placeholder

required

step

 

---

참고자료

코딩교육 티씨피스쿨

 

GitHub - Koras02/html-study: html 블로그 작성용 - study1