반응형
폼(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>
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
HTML - 접근성 (0) | 2021.12.21 |
---|---|
HTML - 컨벤션과 모범 사례 (Conventions and Best Practices) (0) | 2021.12.16 |
HTML - Semantic한 HTML 작성 (0) | 2021.12.13 |
HTML - 기초 배우기 (0) | 2021.12.11 |
인터넷 - 호스팅은 무엇일까요? (0) | 2021.12.09 |