반응형

Input 태그의 주요 속성 (HTML5)

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

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

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

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

◎ pattern 속성

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

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000"> </div> <div><input type="submit" value="전송"></div> </form>


ㅎㅇ


(왼) 실패시 (오)성공시


◎ required 속성

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

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required"></div> <div><input type="submit" value="전송"></div> </form>



◎ autofocus 속성

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

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required" autofocus></div> <div><input type="submit" value="전송"></div> </form>




◎ placeholder 속성

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

<html> <head> <title></title> </head> <body> <form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required" autofocus placeholder="형식 010-0000-0000"></div> <div><input type="submit" value="전송"></div> </form> </body> </html>




◎ disabled 속성

▼ 이렇게 disabled 를 사용하면 태그가 먹통이 되서 사용이 불가능하게됩니다.

이상태로 전송시 form 태그엔 데이턱 ㅏ업

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required" autofocus placeholder="형식 010-0000-0000" disabled></div> <div><input type="submit" value="전송"></div> </form>




반응형

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그  (0) 2019.04.02
HTML5 태그 (2) - article,section,nav  (0) 2019.02.28
HTML 태그  (0) 2019.02.27

+ Recent posts