Form
- 클라이언트가 서버에게 정보를 전달할 때 사용
- 속성: action, name, target, method(get, post)
- GET: 정보가져오거나 검색시 사용, backend로 데이터를 보낼 때 url쿼리 문자열에 데이터를 실어서 전송한다(보안문제)
- POST: 정보를 보내거나 생성할 때 사용, 데이터를 request의 본문(body)에 실어서 전송(보안 good), body에 대한 미들웨어 작업을 서버에서 해줘야한다
GET으로 데이터 전송해보기
- ejs로 간단한 form화면 구성, method에 get을 작성한다. (action에는 가고자 하는 주소입력)
<form action="/getForm" method="get">
<label for="">
id:
<input type="text" name="id" required />
</label>
<br />
<!-- name이 key값인 배열 형태로 정보가 들어오기 때문에 name매우 중요 -->
<label for="">
email:
<input type="email" name="email" required />
</label>
<br />
<label for="">
password:
<input type="password" name="pw" required />
</label>
<br />
<button type="button">제출(button type)</button>
<button>제출(submit type)</button>
</form>- app.js에서 라우팅 설정을 한다.
** app.get()메소드, req.query 데이터
app.get("/prac1", function (req, res) {
res.render("practice/practice1.ejs");
});
app.get("/getPrac", function (req, res) {
console.log(req.query);
res.render("practice/result.ejs", {
title: "GET",
result: req.query,
//name, gender, year, month, day, hobby
});
});- 앞서 render한 result페이지를 제작하고, ejs를 이용해 req.query의 데이터들을 가져와서 html로 표현한다
<h1><%=title %>요청 확인하기</h1>
<div>
<span><%=userInfo.id %>(<%= userInfo.email %>)</span>님 환영합니다
</div>
<div>비밀번호는 <span><%=userInfo.pw %></span>이군요</div>POST로 데이터 전송해보기
- ejs로 간단한 form화면 구성, method에 post를 작성한다.
- app.js에서 라우팅 설정을 한다.
** app.post()메소드, req.body데이터
- req.body를 사용하기 위해서는 미들웨어 bodyparser설정이 필요하다
//body parser 설정방법 app.use이용
app.use(express.urlencoded({extended:true}));
//-> extended는 true, false 두경우 모두 req.body사용이 가능하다
//어떤 모듈을 쓰는지 정도의 차이를 가진다고 한다
app.post("/postPrac", function (req, res) {
console.log(req.body);
res.render("practice/result.ejs", {
title: "POST",
result: req.body,
//name, gender, year, month, day, hobby, color, number, longtxt
});
});- 앞서 render한 result페이지를 제작하고, ejs를 이용해 req.query의 데이터들을 가져와서 html로 표현한다
결론
1. GET은 app.get() + req.query를 POST는 app.post() + req.body를 사용한다는 차이가 있음
2. POST는 req.body를 위해 app.use()를 통한 미들웨어 설정이 필요
3. GET, POST중에 POST가 정보생성에 주로 쓰임(보안)
Form Validation
- 유효성검사: form요소에 정보가 올바르게 입력되었는지 검사, 올바르지 않으면 submit되지 않도록 설정하는 것
- required(필수값설정), minlength, maxlength, pattern 등의 방법이 있다
(1) required
- input 태그에 작성하여 해당값을 공란으로 둘 경우 submit되지 못하게 한다(checkbox는 특별한 방법필요)
<label for="">
id:
<input type="text" name="id" required />
</label>(2) minlength, maxlength
- text타입 input요소에 글자수 기준을 설정하여 유효성 검사 실행
<!--10글자 이하만 입력가능-->
<label for="">
id:
<input type="text" name="id" maxlength = "10" />
</label>(3) pattern
- input타입에 pattern속성으로 정규식을 사용하여 작성제한
- ^시작 $로 끝
- () 그룹분류
- [] 범위(a-z, 가-힣)
- {}글자수 설정(최소, 최대)
- title = "조건어길시 띄우는 문장";
<!--10글자 이하만 입력가능-->
<label for="">
id:
<input
type="text"
name="id"
maxlength = "10"
pattern="^([a-zA-Z0-9가-힣]){4,10}$"
title="아이디는 영어대소문자,숫자, 한글로 이루어진 4자이상 10자 이하여야합니다."
/>
</label>
(4) checkbox
- 최소 1개의 checkbox를 선택하도록 하려면 ejs파일의 script단에서 상세 설정필요
- radio는 같은 name의 input중 하나에 required를 적으면 선택을 필수로 하는 유효성검사가 가능하다
(1) form 태그에 submit이벤트(onsubmit) 발생시 return하는 함수를 적고 this를 통해 form객체를 해당 함수가 받도록 한다
<form
action="/js-form-check"
method="post"
name="validationForm"
target="_blank"
onsubmit="return checkForm(this)"
>-> checkForm함수는 true나 false값을 return해야한다!!
(2) script에서 checkForm함수 작성 form.(name or id)를 통해 input요소에 접근하여 if문으로 유효성 검사를 진행한다
function(form) {
//checkbox
if (form.mail[0].checked === false && form.mail[1].checked === false) {
//아무것도 선택되지 않는 다면
alert("우편물 수령장소를 선택해주세요");
return false;
}
}-> mail이라는 name값을 가진 두 체크박스[0], [1]의 값이 모두(&&) false = check되지않았을 경우 경고창을 띄우고 false값을 return하여 submit이벤트를 실행되지 못하게 한다
form input 추가로 배워보기
- backend로 데이터 전달시 대부분의 input태그는 name값과 input창에 입력된 값을 전달하지만 radio와 checkbox는 태그내부에 value 속성을 적어 value값을 전달해주어야 한다
- select의 option은 value값이 없어도 태그 가운데 값을 전달하지만 value값을 적어주는게 좋다
- fieldset 태그와 legend태그를 통해 input태그를 묶고 소제목을 붙일 수 있다
<fieldset>
<legend>로그인</legend>
아이디: <input type="text" name="id"/>
비밀번호: <input type="password" name="pw"/>
</fieldset>
