이번 글에서는 HTML <input> 요소에 대한 다양한 속성을 설명하고자 한다.
HTML input #value 속성
input value 속성은 입력 필드의 초기 값을 지정한다:
| <!DOCTYPE html> <html> <body> <h1>input value 속성</h1> <p>value 속성은 입력 필드의 초기 값을 지정합니다:</p> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동"><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #readonly 속성
input readonly 속성은 입력 필드가 읽기 전용임을 지정한다.
읽기 전용 입력 필드는 수정할 수 없습니다. 그러나 사용자가 필드를 탭하고 강조 표시한 다음 필드에서 텍스트를 복사할 수 있다.
양식을 제출할 때 읽기 전용 입력 필드의 값이 전송된다!
| <!DOCTYPE html> <html> <body> <h1>input readonly 속성</h1> <p>읽기 전용 특성은 입력 필드를 읽기 전용으로 지정합니다(변경할 수 없음):</p> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동" readonly><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #disabled 속성
input disabled 특성은 입력 필드를 비활성화해야 함을 지정한다.
비활성화된 입력 필드는 사용할 수 없으며 클릭할 수 없다.
양식을 제출할 때 비활성화된 입력 필드의 값은 전송되지 않다!
| <!DOCTYPE html> <html> <body> <h1>input disabled 속성</h1> <p>disabled 속성은 입력 필드를 비활성화(사용할 수 없고 클릭할 수 없음)하도록 지정합니다:</p> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동" disabled><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #size 속성
input size 속성은 입력 필드의 보이는 너비를 문자로 지정한다.
크기의 기본값은 20 이다.
참고: size 속성은 텍스트, 검색, 텔, URL, 이메일 및 암호와 같은 입력 유형에서 작동한다.
| <!DOCTYPE html> <html> <body> <h1>input size 속성</h1> <p>size 속성은 입력 필드의 너비(문자)를 지정합니다:</p> <form action="/action_page.php"> <label for="fname">이름:</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"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #maxlength 속성
input maxlength 특성은 입력 필드에 허용되는 최대 문자 수를 지정합니다.
참고: 최대 길이를 설정하면 입력 필드에 지정된 문자 수를 초과할 수 없다. 그러나 이 속성은 피드백을 제공하지 않는다. 따라서 사용자에게 경고하려면 JavaScript 코드를 작성해야 한다.
| <!DOCTYPE html> <html> <body> <h1> input maxlength 속성</h1> <p>maxlength 특성은 입력 필드에 허용되는 최대 문자 수를 지정합니다:</p> <form action="/action_page.php"> <label for="fname">이름:</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" maxlength="4" size="4"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
지금까지 HTML input 요소에 속성들을 살펴보았습니다.
간단한 것 같지만, 꼭 실습을 하고 꼭 손수 코딩을 하며 손에 익히고 머리에 익히기를 바랍니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML input 속성-3 (0) | 2023.06.14 |
|---|---|
| HTML input 속성-2 (0) | 2023.06.13 |
| HTML input 유형-4 (0) | 2023.06.11 |
| HTML input 유형-3 (0) | 2023.06.10 |
| HTML input유형-2 (0) | 2023.06.09 |
댓글