HTML 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 속성과 다른 점은 전송 버튼을 누르면 초깃값이 서버로 전송된다는 점이다.

 

<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 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정

이 속성이 설정된 필드는 사용할 수도 없고, 클릭할 수도 없다.

전송 버튼을 눌러도 초깃값이 서버로 전송되지 않는다.

 

<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 action="/examples/media/request.php">
        이름 : (이름은 10자까지만 가능해요!)<br>
        <input type="text" name="student_name" value="홍길동" maxlength="10"><br>
        학번 : <br>
        <input type="text" name="student_id"><br><br>
        <input type="submit" value="전송">
</form>

---

size 속성

 

size 속성은 입력 필드에 보여지는 input 요소의 폭을 설정

 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>