코딩독학 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)
'[1일1코딩]' 카테고리의 다른 글
코딩독학 HTML form 요소 3 feat. tcpschool (0) | 2019.07.05 |
---|---|
코딩독학 HTML form 요소 2 feat. tcpschool (2) | 2018.05.15 |
코딩독학 HTML form 요소 1 feat. tcpschool (0) | 2018.05.14 |
코딩독학 HTML 레이아웃 요소 feat. tcpschool (2) | 2018.05.11 |
코딩독학 HTML iframe 요소 feat. tcpschool (2) | 2018.05.10 |