input 태그의 다양한 속성

input 태그의 다양한 속성

1. autofocus 속성

 - 폼의 요소 중 원하는 요소에 입력 커서를 표시함

 - 웹 요소에 들어가면, 바로 autofocus를 입력한 요소에 마우스가 클릭된 상태로 열림

<label for="name">이름</label>
<input type="text" id="name" autofocus>
<label for="pw">비밀번호</label>
<input type="text" id="pw">

 

2. placeholder 속성

 - 입력란에 힌트 내용을 표시함

 - 사용자가 어떤 내용을 입력해야 하는지 알려 줄 경우에 사용

 - 사용자가 내용을 입력하면 placeholder로 입력한 텍스트가 사라짐

<label for="tel">전화번호</label>
<input type="text" id="tel" placeholder="하이픈없이 입력">

 

3. readonly 속성

 - 읽기 전용 필드 생성

 - 사용자가 입력하지 못하고 읽게만 할 수 있음

<label for="openTime">영업시간</label>
<input type="text" id="openTime" value="오전 10:00 ~ 22:00" readonly>

 

4. required 속성

 - 필수 필드 지정

 - 이 속성을 사용하면, 무조건 입력해야 넘어가게 끔 설정할 수 있음

<form>
    <fieldset id="register">
        <legend>신청자</legend>
        <ul>
            <li>
                <label class="reg" for="uname">이름</label>
                <input type="text" id="uname" autofocus required>
            </li>
        </ul>
    </fieldset>
    <fieldset id="register">
        <button type="submit" value="submit">신청</button>
    </fieldset>
</form>

 

5. min, max, step 속성

 - 각각 해당 필드의 최솟값(min), 최댓값(max), 간격(step)을 지정함

 

6. size, minlength, maxlength 속성

 - 길이, 최소길이, 최대길이를 설정함

 - size 속성 : 필드에서 화면에 몇 글자까지 보이게 할 것인지 지정함

 - minlength 속성 : 최소 몇 글자 이상 입력해야 하는지 지정함

 - maxlength 속성 : 최대 몇 글자 까지 입력할 수 있는지 지정