HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명

HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명

 

환경: Eclipse Mars

 

input 태그에 대한 세 번째 이야기 입니다. 이전에는 input 태그의 type 속성에 값들이 어떻게 적용되는지 알아 봤었습니다. 그리고 HTML5 에서 추가된 값들도 알아 보았습니다. 이번에는 input 태그의 추가된 속성에 대해 알아 보겠습니다. 추가된 속성들은 아주 많지만 주로 쓰일 만한 것들만 추려서 설명하도록 하겠습니다.

 

주로 사용하는 추가된 속성 4가지 입니다. 간략하게 소개된 이 속성들을 하나씩 샘플과 함께 뜯어 보도록 하겠습니다.

 

l  pattern : 정규식 표현을 넣어서 데이터를 검증할 수 있다.

l  required : 필수 입력사항인지 여부를 세팅할 수 있다.

l  autofocus : 페이지가 열릴 때 처음으로 포커스가 이동하도록 세팅한다.

l  placeholder : 텍스트 박스에 흐린 글씨로 힌트 문장을 제공한다.

 

◎ pattern 속성

 

▼ pattern 은 정규식을 넣어서 데이터를 검증할 수 있는 속성입니다. pattern 속성에 정규식을 넣어서 input 에 입력한 값의 유효성을 체크할 수 있는 것입니다. 이렇게 pattern 속성은 유효성 검사를 아주 심플하게 만들어 줍니다. 아래 예제는 전화번호에 대한 유효성 검사입니다. pattern 에 정규식으로 전화번호인지 아닌지 판단하는 식을 넣었습니다. type=”tel” 은 전화번호 여부를 체크하지 않기 때문에 pattern 속성과 함께 많이 사용됩니다. 

<form id="frm" action="action.jsp">
	<p>전화번호 입력 : </p>
	<div><input type="tel" id="usertel" 
				pattern="(010)-\d{3,4}-\d{4}"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

◎ required 속성

 

▼ required 는 input 박스에 값을 반드시 입력해야 넘어갈 수 있도록 만든 속성입니다. 만약 입력하지 않으면 아래 그림과 같이 메시지가 뜨고 더 이상 진행할 수가 없습니다. 

<form id="frm" action="action.jsp">
	<p>필수입력사항 :</p>
	<div>아이디 : <input type="text" id="userid" required></div>
	<div>이름 : <input type="text" id="username" ></div>
	<div><input type="submit" value="전송"></div>
</form>

 

◎ autofocus 속성

 

▼ autofocus 속성은 페이지가 새로 시작될 때 입력된 input 에 포커스가 자동으로 가수 있도록 해 줍니다. 기본 속성은 화면의 어느 컨트롤에도 포커스는 가지 않습니다. 보통 페이지가 로딩되지 마자 사용자에게 값을 입력 받아야 하는 화면에서 주로 이용됩니다. 로그인 창에서 id 에 포커스가 가 있는 것과 같습니다. 

<form id="frm" action="action.jsp">
	<p>자동 포커스 :</p>
	<div>아이디 : <input type="text" id="userid" ></div>
	<div>이름 : <input type="text" id="username" autofocus></div>
	<div><input type="submit" value="전송"></div>
</form>

 

◎ placeholder 속성

 

▼ 사용자에서 입력 해야 되는 값에 대한 힌트를 제공합니다. 흐리게 표현되는 문장을 보고 사용자가 실수 하지 않도록 입력 값을 유도하는 것입니다. 이것은 입력하는 순간 지워 지며, input 박스에 아무것도 없다면 다시 나타납니다. 이것은 화면을 아주 심플하게 만들어 줍니다. 왜냐하면 별도로 제목을 표시하지 않아도 되기 때문입니다. 예전에는 일일이 자바스크립트로 구현을 해야 했거든요. 

<form id="frm" action="action.jsp">
	<p>힌트  :</p>
	<div><input type="text" id="userid" placeholder="아이디 입력"></div>
	<div><input type="text" id="username" placeholder="이름 입력"></div>
	<div><input type="submit" value="전송"></div>
</form>