게시판에서 등록 화면은 컨텐츠나 정보를 입력하는 화면이다. 등록화면이 있다면 정보를 입력하고 수정하는 것에 관리가 수월하다. 등록 화면은 작은 기능의 댓글부터 답글같은 것에도 유용하다.
게시판 만들기 4
등록 html 파일 만들기
등록을 위해서는 input 태그를 이용한다.
input 태그는 사용자가 정보를 입력하고 글쓰기 같은 컨텐츠를 입력하는 기능을 한다.
input 태그에 대한 상세한 것은 나중으로 미룬다.
등록 화면에서 중요한 것은 사용자가 데이터를 입력하는데 있다.
등록 화면의 기능
등록화면에는 몇가지 기능이 있지만 필수적일 수도 있고, 단지 옵션일 수 있다.
여기서는 단지 입력을 받는 기능만 넣도록 한다.
- 등록
입력란에 사용자가 입력한 내용을 등록한다. - 초기화
입력란에 사용자가 입력한 내용을 초기화하고 빈칸으로 만든다. - 취소
목록화면으로 돌아갈 수 있도록 한다.
등록 html 만들기
등록화면에 input 태그를 이용해 텍스트를 입력받도록 한다.
다른 기능들도 있지만 단순한 게시판을 위한 것이기에 기능은 최소화한다.
이전 목록화면 만들기에서 목록에 표시된 내용을 보도록 한다.
필요한 항목은 작성일, 작성자, 제목, 내용이다.
이것을 html 파일로 만들어 보도록 한다.
<!-- html5 기본템플릿 -->
<!DOCTYPE html>
<!-- head -->
<head>
<!-- meta SEO 컨텐츠 -->
<meta name="title" content="등록화면">
<meta name="description" content="등록화면입니다.">
<meta name="keywords" content="등록">
<meta name="author" content="개코">
<meta name="copyright" content="개코">
<!-- // -->
<!-- meta 반응형 웹표준 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- // -->
<!-- 스타일 -->
<style></style>
<!-- // -->
</head>
<!-- // -->
<!-- body -->
<body>
<div>
<h2>
등록 화면
</h2>
</div>
<div>
<button>취소</button>
<button>초기화</button>
<button>등록</button>
</div>
<div>
<p>작성일</p>
<p>
<input type="text"/>
</p>
<p>작성자</p>
<p>
<input type="text"/>
</p>
<p>제목</p>
<p>
<input type="text"/>
</p>
<p>글내용</p>
<p>
<input type="text"/>
</p>
</div>
</body>
<!-- // -->
<!-- 자바스크립트 -->
<script type="text/javascript"></script>
<!-- // -->
</html>결과화면을 보자.
이것 또한 볼품없지만 추후에 보강하도록 한다.
반응형
'programming > MakinGProJect' 카테고리의 다른 글
| 게시판 만들기 6 수정화면 html 파일 만들기 (0) | 2021.10.18 |
|---|---|
| 게시판 만들기 5 보기화면 html 파일 만들기 (0) | 2021.10.17 |
| 게시판 만들기 4 목록 html 파일 만들기 (0) | 2021.10.16 |
| 게시판 3 기본 html 파일 만들기 (0) | 2021.10.14 |
| 게시판 만들기 2 게시판 html 파일 구조와 파일명 만들기 (0) | 2021.10.13 |
댓글