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

HTML

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>

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

 

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>

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

 

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>

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

 

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>

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

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군