입력 양식 - 게시판

 

1. 가장 상단에 폼 태그를 입력하고

값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다.

 

<form method="post" action="board.jsp">

내용

</form>

 

 

 

 

2. 이제 폼 태그 사이의 내용을 입력해본다.

 

레이아웃을 쉽게 제어하기 위해 테이블 태그를 사용해서 그 안에 양식들을 넣을 계획이다.

테이블은 꼭 써야 하는 것은 아니다.

 

작성자

<input type="text" size=20 name="writer" id="writer" placeholder="작성자명 입력">

 

placeholder 빈칸일때는 메시지를 출력하다가, 값을 넣으면 사라진다.

 

 

 

위 코드에는 placeholder를 썼기 때문에 작성하지 않았지만,

value 를 사용하면 초기값이 텍스트란에 들어가있도록 설정할 수 있다.

 

 

 

 

 

 

 

3. 비밀번호 양식을 생성한다.

 

비밀번호

<input type="password" size=20 name="passwd" id="passwd" placeholder="2~8자 이내 입력">

 

 

 

 

 

 

 

4. 제목 입력란을 생성한다.

 

제목

<input type="text" size=50 name="subject" id="subject" placeholder="내용을 입력하세요"></td>

 

 

 

 

 

 

4. 글 내용 입력란을 생성한다.

여태 사용해온 input type 대신 textarea를 사용한다.

textarea를 입력하고 Shift+Space 단축키를 사용하면 rows와 cols 값을 입력받도록 자동 완성된다.

 

내용

<textarea rows="5" cols="50" 
	name="content" id="content" placeholder="내용을 입력하세요"></textarea>
            
<!-- input type은 많은 내용을 받을 수 없다. -->
<!-- 지정된 크기보다 더 많은 내용을 입력하면 스크롤바가 자동으로 생성된다. -->

 

 

 

 

input type에서 초기값을 지정할 때에는 value 속성을 사용했는데,

textarea는 조금 다르게 초기값을 나타낸다.

<textarea>이 쪽에 값을 입력해야 한다.</textarea>

또 공백이 있어서는 안된다.

 

내용

<textarea rows="5" cols="50"
	name="content" id="content">글내용</textarea>

 

 

 

 

 

 

 

5. 첨부파일란을 생성한다.

브라우저에 따라 다르게 생겼다.

 

파일첨부

<input type="file" name="myfile" id="myfile">

 

 

 

 

 

6. 마지막으로 글 작성 버튼과 취소 버튼을 생성한다.

글 작성

<input type="submit" value="글 작성">



취소

<input type="reset" value="취소">

 

 

 

 

전체 코드 (테이블을 포함)

 

<table border=1 width=500 align=center>
	<caption>게 시 판</caption>
	
	<tr>
		<th>작성자</th>
		<td><input type="text" size=20 name="writer" id="writer" 
        		placeholder="작성자명 입력"> </td>
	</tr>
	
	<tr>
		<th>비밀번호</th>
		<td><input type="password" size=20 name="passwd" id="passwd" 
        		placeholder="2~8자 이내 입력"></td>
	</tr>
	
	<tr>
		<th>제목</th>
		<td><input type="text" size=50 name="subject" id="subject" 
        		placeholder="제목을 입력하세요"></td>
	</tr>
	
	<tr>
		<th>내용</th>
		<td><textarea rows="5" cols="50"
				name="content" id="content" 
                        placeholder="내용을 입력하세요"></textarea></td>
	</tr>
	
	<tr>
		<th>파일첨부</th>
		<td><input type="file" name="myfile" id="myfile"></td>
	</tr>
	
	<tr>
		<td colspan=2 align=center>
			<input type="submit" value="글 작성">
			<input type="reset" value="취소">
		</td>
	</tr>
	
</table>

 

 

 

 

 

 

추가로, 여러가지 기능의 버튼을 만들어보았다.

 

전송 기능 있음
<input type="submit" value="글 작성1">

아무 기능이 없음
<input type="button" value="글 작성2">

아무 기능이 없음
<button> 글작성3 </button>

전송 기능 있음
<button type="submit"> submit </button>

초기화 기능 있음
<button type="reset"> reset </button>

아무 기능이 없음
<button type="button"> button </button>

초기화 기능 있음
<input type="reset" value="취소">

 

 

 

button은 눌러도 아무런 일이 일어나지 않는다.