[HTML - 8] input의 속성

속성

input 요소는 다양한 속성을 가질 수 있습니다.
HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같습니다.

 

1. value

2. readonly

3. disabled

4. maxlength

5. size

---

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 속성과는 달리 전송 버튼(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="컴퓨터공학과" disabled><br>
</form>

---

maxlength

maxlength 속성은 입력 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정합니다.

<form>
    이름 : <br><input type="text" name="student_name" value="홍길동" maxlength="10"><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="30"><br>
    학번 : <br><input type="text" name="student_id"><br>
</form>

 

---

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

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (정규식)
placeholder
required
step

 

이에 관련한 내용은 아래 홈페이지에서 확인이 가능합니다!

http://www.tcpschool.com/html/html5_element_inputattr

코딩교육 티씨피스쿨