블로그 만들기: 챌린지 9 multi line text box : textarea

** 시작 전/ 선생님의 부트스트랩 코드와 내거가 다른 이유:

선생님은 3.3.7 버전이고

나는 5.1 버전을 보았기 때문.

부트스트랩에서 버전 변경 가능

 

 

완성된 출력물

 

1. textarea 태그 사용

예제

<textarea name="Text1" cols="40" rows="5"></textarea>

Multiple lines of input in <input type="text" />

input은 싱글라인 텍스트 박스이고 - 제목 입력용, 또는 단문 입력

textarea는 멀티라인 텍스트 박스 :) - 게시글 입력용, 또는 장문 입력

 

2. 부트스트랩에서 폼 레이아웃 고르고, 코드 복붙 후 수정

Forms

 

1. compose.ejs

<%- include partials/header.ejs -%>
<h1>Compose</h1>
<form action="/compose" method="post">
    <div class="mb-3">
        <label for="postTitle" class="form-label">Title</label>
        <input type="text" class="form-control" name="postTitle">
        <label for="postBody" class="form-label">Content</label>
        <textarea class="form-control" name="postBody" cols="30" rows="3"></textarea>

    <p></p>
    <button type="submit" class="btn btn-primary mb-3" name="button">Publish</button>
</div>
</form>
<%- include partials/footer.ejs -%>

버튼과 텍스트박스가 붙어있는게 보기 싫을때-&gt; &lt;p&gt;를 넣어주면 공간이 생긴다. - 출력물은 완성본에.

 

2. app.js

app.post('/compose', function(req, res) {
  console.log(req.body.postTitle, req.body.postBody);
})