HTML5에서는 기존에 자바스크립트로 구현해야했던 기능들을 input 태그의 속성들로 간단하게 구현할 수 있습니다. 예를 들어, 폼을 작성한 후 제출할 때 작성되지않은 빈칸이 있으면 경고 메시지를 띄우는 경우 이전에는 자바스크립트로 해당 이벤트를 구현해야했으나 HTML5에서는 <input> 태그에 required 속성을 추가하는 것만으로도 해당 이벤트를 쉽게 구현할 수 있습니다. 이 글에서는 자바스크립트를 대신하는 input 태그 속성들에 대해 알아보겠습니다.
| 번호 | 속성 | 설명 |
| 1 | placeholder | 힌트 표시 |
| 2 | readonly | 읽기 전용으로 지정 |
| 3 | required | 필수 영역으로 지정 |
| 4 | min | 최소값 |
| 5 | max | 최대값 |
| 6 | step | 숫자 간격 |
| 7 | maxLength | 최대 글자 수 지정 |
| 8 | autocomplete | 자동 완성 기능 제어 |
(실습1) : 힌트 표시 - placeholder
사용자의 입력을 받기 전에 사용자에게 텍스트의 형태로 정보를 제공할 때에는 placeholder 속성을 사용하면 됩니다. placeholder="" 형태로 사용하며 큰따옴표 내부에 힌트로 제공하고자 하는 텍스트를 입력하시면 됩니다. placeholder와 value가 비슷하게 느껴지실 수도 있습니다. 두 속성의 차이점은 value는 사용자가 값을 입력하지 않아도 기본으로 값이 입력되어 있지만 placeholder은 값이 입력되어 있지 않은 빈칸이라는 점입니다. 사용자가 값을 입력하지 않고 폼을 제출했을 때 placeholder은 빈칸이기 때문에 값을 제출하지 않지만 value는 기본으로 입력되어 있는 값을 제출합니다. 또, placeholder의 경우 사용자가 입력을 하는 순간 텍스트의 자동으로 사라지지만 value는 사용자가 입력되어 있는 텍스트를 지우고 새로 입력해야한다는 차이점이 있습니다.
<head></head>
<body>
<form action="test.php" method="post">
<font size=5>실습1 : placeholder(힌트 표시)</font><br><br>
<label> 아이디 <input type="email" placeholder="E-mail 형태로 입력하시오"></label>
<input type="submit">
</form>
</body>
(실습2) : 읽기 전용 - readonly
특정 영역을 읽기 전용으로 바꾸어 사용자가 수정이 불가능하게 만들기 위해서는 readonly를 사용하면 됩니다.
<head></head>
<body>
<form action="test.php" method="post">
<font size=5>실습 2 : readonly(읽기 전용)</font><br><br>
<input type="text" readonly value="입력이 불가능합니다.">
</form>
</body>
(실습3) : 필수 영역 - required
특정 영역을 필수 영역으로 바꾸어 사용자가 반드시 입력하도록 하기 위해서는 required를 사용하면 됩니다. required를 사용하면 사용자가 필수 영역으로 지정된 부분을 입력하지 않은 채로 폼을 제출할 경우 경우 경고 메시지가 나타나며 폼이 제출되지 않습니다.
<head></head>
<body>
<form action="test.php" method="post">
<font size=5>실습 3 : required(필수 영역)</font><br><br>
<label> 비밀번호 <input type="password" required></label>
<input type="submit">
</form>
</body>
(실습4, 5, 6) : 숫자 조절 - min(최소값) / max(최대값) / step(간격)
숫자를 조절하는 속성으로는 min, max, step이 있습니다. min과 max는 각각 입력가능한 숫자의 최소값과 최대값을 의미합니다. step은 숫자의 간격을 의미합니다. step의 경우 <input> 태그의 type이 number 또는 range일 경우 숫자 조절 화살표나 슬라이드 막대를 움직일 때 step에서 지정한 값을 단위로 값이 조절됩니다. 예를 들어, <input type="number" min="0" max="10" step="2">의 경우 입력가능한 최소값은 0, 최대값은 10입니다. 그리고 숫자 조절 막대를 클릭하면 0, 2, 4, 6과 같이 2를 단위로 값이 변경됩니다.
<head></head>
<body>
<form action="test.php" method="post">
<font size=5>실습 4,5,6 : min(최소값) / max(최대값) / step(간격)</font><br><br>
<input type="number" min="0" max="10" step="2">
</form>
</body>
(실습7) : 최대 글자 수 - maxLength
사용자가 입력할 수 있는 글자 수에 제한을 두기 위해서는 maxLength를 사용하면 됩니다.
<head></head>
<body>
<form action="test.php" method="post">
<font size=5>실습 7 : maxLength(최대 글자 수)</font><br><br>
<input type="text" maxLength="5">
</form>
</body>
(실습8) : 자동 완성 기능 조절 - autocomplete
자동 완성 기능을 조절하기 위해서는 autocomplete를 사용하면 됩니다. 자동 완성 기능을 끄려는 경우는 autocomplete의 값을 off로 자동 완성 기능을 키려는 경우는 autocomplete의 값을 on으로 설정하시면 됩니다.
<head></head>
<body>
<form action="test.php" method="post">
<font size=5>실습 8 : autocomplete(자동 완성 기능 조절)</font><br><br>
<input type="text" autocomplete="off">
</form>
</body>'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [CSS] 속성 선택자, 가상 클래스 선택자 (0) | 2021.01.27 |
|---|---|
| [CSS] 선택자의 기본 (0) | 2021.01.26 |
| [HTML] form - 글, 버튼 삽입하기 (0) | 2021.01.24 |
| [HTML] 드롭다운 목록 만드는 법 (0) | 2021.01.23 |
| [HTML] input 태그 사용해 사용자 입력 받기 (0) | 2021.01.22 |
