13. write.html
[파일위치 : src/main/resources/templates/write.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
</head>
<body>
<h2>상품 등록</h2>
<form name="form1" method="post"
enctype="multipart/form-data" action="insert">
<table>
<tr>
<td>상품명</td>
<td><input type="text" name="productName"></td>
</tr>
<tr>
<td>가격</td>
<td><input type="number" name="price"></td>
</tr>
<tr>
<td>상품설명</td>
<td><textarea rows="5" cols="60" name="description"></textarea></td>
</tr>
<tr>
<td>상품이미지</td>
<td><input type="file" name="file1"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="등록">
<input type="button" value="목록" onclick="location.href='/'">
</td>
</tr>
</table>
</form>
</body>
</html>
[해설]
<form name="form1" method="post"
enctype="multipart/form-data" action="insert">
웹에서는 데이터를 서버로 보낼 때 form 을 사용합니다.
name은 폼의 이름입니다.
<form name="form1" method="post"
enctype="multipart/form-data" action="insert">
method는 대표적으로 get과 post가 있습니다.
get은 주로 자료를 요청할 때 사용합니다. post는 서버에 데이터를 보낼 때 사용합니다. 여기서는 서버에 자료를 보내야 하므로 post를 사용했습니다.
<form name="form1" method="post"
enctype="multipart/form-data" action="insert">
파일 첨부를 하려면 enctype="multipart/form-data" 코드가 꼭 필요합니다. 이 옵션이 없으면 파일 첨부가 되지 않습니다.
<form name="form1" method="post"
enctype="multipart/form-data" action="insert">
action 속성에는 데이터를 받을 서버의 주소를 입력합니다.
action="insert" 라고 했으므로 http://localhost/insert 로 데이터가 전달되게 됩니다.
<input type="text" name="productName">
input 태그는 서버에 보낼 텍스트를 입력할 때 사용하는 태그입니다. name 속성에 지정한 값이 변수명이 됩니다.
<textarea rows="5" cols="60" name="description"></textarea>
한줄이 아니라 여러줄의 텍스트를 입력하려면 textarea 태그를 사용합니다.
textarea 태그의 형식은 아래와 같습니다.
<textarea rows="행의 수" cols="열의 수" name="변수명">텍스트의 내용</textarea>
input 태그와 달리 닫는 태그도 필요합니다.
<input type="file" name="file1">
서버에 파일을 보내기 위해서는 <input type="file">을 사용합니다.
<input type="submit" value="등록">
submit 버튼을 누르면 폼 양식에 입력한 값들을 서버에 보내게 됩니다.
<input type="button" value="목록" onclick="location.href='/'">
[목록] 버튼을 누르면 http://localhost/ 로 다시 이동하게 됩니다.
| 번호 | 제목 | 작성자 | 작성일 | 추천 | 조회 |
| 19 |
상품 삭제
vita
|
2023.11.15
|
추천 0
|
조회 132
|
vita | 2023.11.15 | 0 | 132 |
| 18 |
상품 수정
vita
|
2023.11.15
|
추천 0
|
조회 112
|
vita | 2023.11.15 | 0 | 112 |
| 17 |
상품 상세
vita
|
2023.11.15
|
추천 0
|
조회 125
|
vita | 2023.11.15 | 0 | 125 |
| 16 |
상품 등록
vita
|
2023.11.15
|
추천 0
|
조회 105
|
vita | 2023.11.15 | 0 | 105 |
| 15 |
상품 목록
vita
|
2023.11.15
|
추천 0
|
조회 147
|
vita | 2023.11.15 | 0 | 147 |
| 14 |
14. detail.html
vita
|
2023.11.15
|
추천 0
|
조회 120
|
vita | 2023.11.15 | 0 | 120 |
| 13 |
13. write.html
vita
|
2023.11.15
|
추천 0
|
조회 136
|
vita | 2023.11.15 | 0 | 136 |
| 12 |
12. list.html
vita
|
2023.11.15
|
추천 0
|
조회 131
|
vita | 2023.11.15 | 0 | 131 |
| 11 |
11. error.html
vita
|
2023.11.15
|
추천 0
|
조회 124
|
vita | 2023.11.15 | 0 | 124 |
| 10 |
10. main.css
vita
|
2023.11.15
|
추천 0
|
조회 119
|
vita | 2023.11.15 | 0 | 119 |