HTML - 폼과 유효성 검사

폼(Form)

HTML에서 <form>이라는 요소는 사용자에게서 얻은 정보를 모으기 위해 사용된다. 어떤 웹 사이트에서 로그인을 할 때 입력하는 아이디와 비밀번호 입력 칸이 form을 이루고 있는 것이다. 이런 데이터들이 서버에 보내지기 전에, 데이터가 서버 측이 원하는 포맷과 일치하는지 유효성 검사가 필요하다. 

 

 

폼(Form)의 요소들 (참고)

1. <input> 요소

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

2. action 요소

입력 받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 해당 주소로 전달된 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

 

3. method 요소

action에 명시된 위치로 데이터를 서버에 전달되는 방식을 결정하는 요소로 GET, POST 등이 있다.

 

 

유효성 검사

1. required

input 태그에 required 속성을 추가해주면 submit 버튼을 눌렀을 때 빈 input을 채우라고 알려준다. 빈 값이 전송되는 것을 방지한다.

<input type="text" id="id" name="name" required />

2. oninvalid

input 태그에 oninvalid="(스크립트)" 를 추가하면 유효하지 않은 값이 입력되었을 때 작성한 스크립트 대로 데이터 입력을 요구한다.

<input type="text" id="id" name="name" oninvalid="alert('이름을 제대로 입력하세요.')" required />

3. pattern

조금 더 세세한 포맷을 원한다면 pattern="(정규표현식)"을 사용하여 원하는 패턴을 요구할 수 있다.

<input type="password" id="password" pattern=".{8,}" required>