HTML input 요소의 속성 - 출처 티씨피스쿨

 

 

 

 

 

 

코딩독학 HTML (출처 : tcpschool.com)

 

 

온라인으로 바로 코딩 실습이 가능한 티씨피스쿨의 내용을 필사해서 결과보기하는 식으로 연습 중

 

 

 

 

 

 

---

 

 

 

 

 

input 요소의 속성 : 사용자가 입력하는 방식을 다양하게 제어할 수 있음

 

 

1. value 속성

 

입력 필드 (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>

 

 

 

결과 >>

 

 

 

 

 

 

 

2. 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>

 

 

 

결과 >>

 

 

 

 

 

 

 

 

3. 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>

 

 

 

결과 >>

 

 

 

 

 

 

 

 

4. maxlength 속성

 

입력 필드에 입력할 수 있는 문자의 최대 길이를 설정함

 

 

<form>

    이름 : <br><input type="text" name="student_name" value="홍길동" maxlength="10"><br>

    학번 : <br><input type="text" name="student_id"><br>

</form>

 

 

 

결과 >>

 

 

 

 

 

 

 

 

5.  size 속성

 

 

input 요소의 크기 설정

maxlength와 다르게 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미함

 

 

 

	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name" value="value 값 : 30" size="30"><br>
		학번 : <br>
      
      		이름 : <br>
		<input type="text" name="student_name" value="value 값 : 50" size="50"><br>
		학번 : <br>
		<input type="text" name="student_id"><br><br>
		<input type="submit" value="전송">
	</form>

 

 

 

결과 >>

 

 

 

 

 

 

 

 

 

---

 

 

 

내용 출처 : 티씨피스쿨 (tcpschool.com)