<HTML5+CSS3>태그의 다양한 속성

readonly속성 - 읽기 전용 필드 만들기

-readonly속성은 해당 필드를 읽기 전용으로 바꿉니다. 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있으면서 사용자에게 내용을 보여주기만 하고 사용자가 입력은 할 수 없게 하는 속성입니다.

속성은 불 값 (boolean value)을 가지기 때문에 true또는 false 값을 지정해도 되고, 간단히 readonly라고만 쓰거나 readonly="readonly"라고 써도 true라고 인식을 합니다.

ex)268p참고

 

placeholder 속성-힌트 표시하기

-이 속성은 <input>요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 것 입니다.

이 속성을 이용하면 텍스트 필드 앞에 레이블을 사용하지 않고 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려줄 수 있어 편리합니다.

(회색으로 텍스트창 안에 옅게 쓰여져 있음)

 

ex)<label>연락처:<input type:="text" placeholder="숫자만 입력"></label>

 

autofocus 속성- 입력 커서 표시하기

-오토포커스 속성은 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서가 표시되도록 하는 것입니다. 마우스 커서가 표시되면 바로 입력할 수 있어서 편리하다.

 

ex)<label>아이디:<input type = "text" size="10" autofocus> </label>

 

autocomplete속성 - 자동 완성 기능 제어하기

-이 기능은 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우 이전에 입력했던 내용을 힌트로 보여주는것입니다.

비밀번호 같이 1회성인 경우 다음 상태를 이용하여 이 기능을 끌 수 있습니다.

 

autocomplete속성의 3가지 상태

(1) on : 자동 완성 기능을 켜려면 on 상태를 선택합니다

(2) off : 자동 완성 기능을 끄려면 off 상태를 선택합니다

(3)default : 기본 상태입니다. 이 경우에는 폼 요소가 아닌 해당 요소의 <form>태그에 auto-complete속성을 사용합니다

 

ex) <label>아이디:<input type="text" autocomplet"off"> </label>

 

min,max,maxLength,step 속성

-min속성과 max속성은 각각 input필드의 최솟값과 최댓값을 지정하는데 한가지 속성만 지정할 수도 있지만 두 가지 속성을 함께 써서 최솟값과 최댓값을 모두 지정해 사용자가 입력할 수 있는 값의 범위를 제한할 수 있습니다

maxlength 속성은 텍스트 필드에 최대로 입력할 수 있는 문자의 개수를 나타냅니다.

ex)<label>주소:<input type="text" size="20" maxlength="60"> </label>

 

step속성은 허용된 범위 내의 숫자의 일정한 간격을 가리킵니다. <input>요소의 유형이 date이거나 datetime,datetime-local,range일 경우에만 사용할 수 있습니다.

 

즉, 숫자를 올릴 간격을 말합니다

 

required 속성-필수 필드 지정하기

-폼에 내용을 입력한후 submit을 클릭하면 서버로 폼을 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 합니다.

HTML4는 자바스크립트로 처리했지만 5는 required속성을 이합니다.

-required속성을 이용하면 속성을 지정하는 해당 필드가 필수 필드가 됩니다. 채워지지 않으면 오류가 발생합니다.

속성은 불 값 이기 때문에, 이 속성을 사용하려면 required="required"또는 requried라고만 하면 됩니다.

필수 필드이기 때문에 내용을 입력하지 않으면 폼을 전송할 수 없습니다. (필수항목이라고 표시됨.)

 

ex) <label> 메일주소:<input type="email" required> </label>

<input type="submit" value="등록">

 

 <label>캡션의 스타일 지정하기

-<label>태그를 사용하는 두 가지 방법에 대해 설명드리겠습니다. <label>태그를 사용해 화면에 표시한 캡션(텍스트)들에 일정정한 스타일을 적용하렴려면 <label>태그의 for속성과 <input>태그의 id 속성을 사용해야 합니다. 

%주민등록번호처럼 2개의 텍스트 필드를 함께 사용하는 요소일 경우 텍스트 필드마다 서로 다른 id 이름을 지정한 후 <label>태그의 for 속성을 첫 번째 텍스트 필드의 id값과 일치 시킵니다.