![[HTML & CSS] input의 속성들](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXYfoV%2FbtrMkGHAalV%2F08JGAs7Em7rb1Bo4Mn5Bsk%2Fimg.png)
728x90
이전글 HTML5에 새로 추가된 input의 연장입니다.
1. value속성
2. readonly속성
3. disabled속성
4. maxlength속성
5. size속성
1. value속성
value속성은 <input>태그에 초기값을 설정해 줍니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
이름 : <input type="text" name="name"> <br>
국적 : <input type="text" name="country" value="대한민국">
</form>
</body>
</html>
결과)
2. readonly속성
readonly속성은 사용자가 수정할 수 없고 읽을 수만 있습니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
이름 : <input type="text" name="name"> <br>
국적 : <input type="text" name="country" value="대한민국" readonly>
</form>
</body>
</html>
value속성 뒤에 readonly속성을 써줌으로써 "대한민국"은 수정할 수 없게 됩니다.
결과)
3. disabled속성
disabled속성은 사용자가 아무것도 할 수 없는 막힌 블록으로 입력창을 바꾸게 됩니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
이름 : <input type="text" name="name"> <br>
국적 : <input type="text" name="country" value="대한민국" disabled>
</form>
</body>
</html>
결과)
4. maxlength속성
maxlength속성은 텍스트 박스에 입력할 수 있는 문자의 최대길이를 지정합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
이름 : <input type="text" name="name" maxlength="4"> 이름은 최대 4글자 <br>
국적 : <input type="text" name="country" value="대한민국" disabled>
</form>
</body>
</html>
결과)
5. size속성
size속성은 <input>태그의 크기를 조정합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
이름 : <input type="text" name="name" size="30"> 이름칸 size : 30 <br>
국적 : <input type="text" name="country" value="대한민국" disabled>
</form>
</body>
</html>
결과)
728x90
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] HTML video & audio (2) | 2022.09.17 |
|---|---|
| [HTML & CSS] HTML5에 새롭게 추가된 input 속성 (0) | 2022.09.17 |
| [HTML & CSS] HTML5에 새로 추가된 input (0) | 2022.09.16 |
| [HTML & CSS] HTML 입력 태그 (0) | 2022.09.13 |
| [HTML & CSS] sementic 태그 (0) | 2022.09.13 |