1.form
가.form이란
입력된 데이터를 한번에 서버로 전송하기 위해 사용
즉, 클라이언트가 서버에게 정보를 전달할때 사용
나.속성
1)action: 폼을 전송할 서버주소 지정
<!-- index.ejs -->
<!-- action에 폼을 전송할 서버 주소 지정 -->
<form action="/postForm" method="post" name="login2">
..
</form>//app.js
app.post("/postForm", (req, res) => {
console.log(req.body);
res.render("result", {
title: "POST 요청 폼 결과 확인하기",
id: req.body.id,
password: req.body.pw,
});
});2)name: 폼을 식별하기 위한 이름, 반드시 지정
<!-- form 정의 -->
<form name="login1"> ... </form>
<!-- name값으로 form값 받아올 수 있음 -->
const form = document.forms["login1"];3)target: action 속성값에 지정한 스크립트파일을 다른 위치에서 열게 함
<form target="_blank|_self|_parent|_top|프레임 이름">
<!-- _blank: 서버로부터 받은 응답을 새로운 윈도우나 탭(tab)에서 보여줌. -->
<!-- _self: 기본값으로 생략 가능. 서버로부터 받은 응답을 링크가 위치한 현재 프레임에서 보여줌.-->
<!-- _parent: 서버로부터 받은 응답을 현재 프레임의 부모 프레임에서 보여줌. -->
<!-- _top: 서버로부터 받은 응답을 현재 윈도우 전체에서 보여줌. -->
<!-- 프레임 이름: 서버로부터 받은 응답을 명시된 프레임에서 보여줌. -->4)method: 폼을서버에 전송할 http 메소드지정
가)get: 폼에 입력된 정보가 url에 추가되어 보임
<!-- index.ejs -->
<form action="/getForm" method="get" name="login1" >
...</form>//app.js
//get방식 - query사용
//http://localhost:8000/getForm?id=wjsrnr20&pw=3333
app.get("/getForm", (req, res) => {
res.render("result", {
title: "GET 요청 폼 결과 확인하기",
id: req.query.id,
password: req.query.pw,
});
});나)post: 폼에 입력된 정보 url에서 숨김, body로 받으므로 body-parse작성 필수
<!-- index.ejs -->
<form action="/postForm" method="post" name="login2">
...</form>// app.js
// post 방식 body 사용
// 숨김됨- http://localhost:8000/postForm
app.post("/postForm", (req, res) => {
res.render("result", {
title: "POST 요청 폼 결과 확인하기",
id: req.body.id,
password: req.body.pw,
});
});
다.<input> 속성
1)type : 인풋 타입
<input type="text|radio|checkbox">
<!-- text: 서버로부터 받은 응답을 새로운 윈도우나 탭(tab)에서 보여줌. -->
<!-- radio: 같은 name 지정 시 하나만 선택 가능(name: 키값), value로 서버에 전송될 값 지정)-->
<!-- checkbox:같은 name 지정 시 값 여러개 지정 가능. name: 키값, value: 값 지정 필수-->2)name: 이름 지정, 서버의 키값
3)readonly: 읽기 전용(수정 불가)
4)autofocus: 자동 포커스
5)placeholder: 짧은 도움말
라.<select>속성 : 선택창, 서버가 지정한 특정 값만을 선택가능한 요소
<select id="year" name="year">
<%for (let i =0; i < 50; i++){%>
<option value="<%= 2010-i%>"><%= 2010-i%></option>
<%}%>
</select>
...마.<label>속성 : 폼 양식에 이름을 붙일 수 있음,
for 속성에 연결할 요소의 id를 적어 label을 클릭해도 해당 요소로 가게 함
<form name="login2">
<label for="id">아이디</label>
<input type="text" id="id" name="id" />
<label for="pw">비밀번호</label>
<input type="password" id="pw" name="pw" />
</form>
바.<fieldset> <legend>속성
1)<fieldset>: 폼 태그 안에 있는 요소들을 그룹화할 때 사용
2)<legend>: <fieldset>안에 들어가는 태그로 목적에 맞게 이름 지정
여기서 '생년월일'이 <legend> 박스 부분이 <fieldset>이다.
<fieldset>
<legend>생년 월일</legend>
...
<fieldset>
2.결과 페이지에 데이터를 추가하는 방법
서버 단인 app.js에서 res.render("render할 페이지명",{key: value})로
렌더 된 페이지에서 데이터를 받음
//app.js
app.get("/result1", (req, res) => {
res.render("result", {
title: "실습1 폼 전송 완료!",
userInfo: req.query,
});
});<!-- result.ejs -->
<body>
<h1><%= title%></h1>
<ul>
<li>이름:<%= userInfo.name%></li>
<li>성별:<%= userInfo.gender%></li>
</body>
3.form validation(유효성 검사)
가.form validation이란?: form 요소들에 정보가 올바르게 입력되었는지 검사하는 것을 의미함
나.속성
1)required : 필수값
2)minlength/ maxlength: 최소/최대문자수
3)min/ max: 최소/최대값
4)type: 입력받는정보타입
5)pattern : 정규식으로검사
<input
<!-- required 입력란을 작성하세요라고 경고뜸 -->
required
minlength= 숫자
maxlength= 숫자
<!-- min="1" 음수 안나오게 -->
min= 숫자
max= 숫자
type= "text"
pattern= "정규식"><!-- pattern 속성 적용 방법 예시 -->
<!-- id 소 대문자 숫자 한글 가능 /4글자 이상 -->
<!-- pw 소문자, 숫자,/ 8자리 이상 12자리 이하 -->
<!-- ex. [a-z]: a부터 z까지,[0,9]:0부터 9까지 -->
<form action="/postForm" name="login2" method="post" class="post-form">
<input
type="text"
name="id"
placeholder="ID"
pattern="^([a-zA-Z0-9가-힣]){4,}$"
title="대소문자 숫자 한글을 포함하여 4글자 이상 작성해주세요"
required
/>
<input
type="password"
name="pw"
placeholder="PW"
pattern="^([a-z0-9]){8,12}$"
title="소문자 숫자 4글자 이상 12글자 이하로 작성해주세요"
required
/>
<button type="submit">제출</button>
</form>
<!-- pattern="^([a-z0-9]){8,12}$"설명 -->
<!-- ^: 시작 -->
<!-- $: 끝 -->
<!-- []: 범위 -->
<!-- {}: 개수 -->
'백앤드 > Node.js' 카테고리의 다른 글
| [포스코x코딩온] 웹개발자 입문 과정 5주차 | 파일 업로드 (0) | 2023.04.03 |
|---|---|
| [포스코x코딩온] 웹개발자 입문 과정 5주차 | 비동기 HTTP 통신 종류 (ajax, axios, fetch) (0) | 2023.04.01 |
| [포스코x코딩온] 웹개발자 입문 과정 5주차 | 노드 프로젝트 생성 (0) | 2023.03.31 |
| [포스코x코딩온] 웹개발자 입문 과정 5주차 | async await (0) | 2023.03.29 |
| [포스코x코딩온] 웹개발자 입문 과정 5주차 | 콜백함수, Promise (0) | 2023.03.28 |