HTML Eclipse autofocus, readonly, required, min, max, step, size, minlength, maxlength 태그

 

 

autofocus, placeholder

 

autofocus
페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시 

placeholder
입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐

 

 

<fieldset>
<legend>autofocus , placeholder</legend>
<label class="reg" for="uname">이름</label>
<input type="text" id="uname" autofocus>
<label class="reg" for="uid">학번</label>
<input type="text" id="uid" placeholder="하이픈없이 입력">
</fieldset>

 

 

 

readonly

 

: 내용을 보기만 하고 입력하지 못하게 함

 

속성 값 없이 readonly 라고만 쓴다

readonly=“readonly”, readonly=“true”로 표시하기도 함

 

 

<fieldset>
<legend>readonly</legend>
<label for="subj">영어회화(초급)</label>
<input type="text" id="subj" value="오전 9:00~11:00" readonly>
</fieldset>

 

 

 

required

 

 

필수 필드 체크
속성 값 없이 required 라고만 입력

(required=“required”라고 해도 됨)
필수 필드는 브라우저에서 직접 체크하는 것이므로 

오류 메시지 내용은 브라우저들마다 다르게 나타남 

 

 

<fieldset>
<legend>required</legend>
<form>
<label class="reg" for="uname">이름</label>
<input type="text" id="uname" autofocus required>
<input type="submit" value="전송">
</form>
</fieldset>

 

 

 

 

min, max, step

 

 

min, max

: 해당 필드의 최소값,최대값

step

 : 허용된 범위 내의 숫자 간격

type이 date, datetime, datetime-local, month, week, time, range, number 일 경우에만 사용 


<fieldset>
<legend>min, max, step</legend>
<label class="reg" for="group">단체주문</label>
<input type="number" id="group" value="10" min="10" max="100" step="10">
</fieldset>

 

 

 

size, minlength, maxlength

 

 

size

텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할지 결정

maxlength

입력 가능한 최대 글자

minlegth

입력해야 할 최소 글자. (크롬과 안드로이드 브라우저에서만 지원)


<fieldset>
<legend>size, minlength, maxlength</legend>
<label class="reg" for="uid">학번</label>
<input type="text" size="40" id="uid" placeholder="하이픈없이 입력" maxlength="8" required>
</fieldset>