-
question_from.html 코드 분석JAVA/스프링 2023. 8. 25. 20:39
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}"> <head> <title>Content Page</title> </head> <body> <div layout:fragment="content" class="container"> <h5 class="my-3 border-bottom pb-2">질문등록</h5> <form th:action="@{/question/create}" th:object="${questionForm}" method="post"> <div th:replace="~{form_errors :: formErrorsFragment}"></div> <div class="alert alert-danger" role="alert" th:if="${#fields.hasAnyErrors()}"> <div th:each="err : ${#fields.allErrors()}" th:text="${err}" /> </div> <div class="mb-3"> <label name="subject" class="form-label">제목</label> <input type="text" th:field="*{subject}" class="form-control"> </div> <div class="mb-3"> <label for="content" class="form-label">내용</label> <textarea th:field="*{content}" class="form-control" rows="10"></textarea> </div> <input type="submit" value="저장하기" class="btn btn-primary my-2"> </form> </div> </body> </html> <!-- fields.hasAnyErrors가 true인 경우 QuestionForm 검증이 실패한 경우 QuestionForm에서 검증에 실패한 오류메세지는 #fields.allErrors()로 구할 수 있음 alert alert-danger 클래스를 사용해 오류는 붉은색으로 표시 -> 오류를 표시하기 위해서는 반드시 타임리프의 th:object 속성이 필요함 왜냐하면 폼의 속성들이 QuestionForm속성들로 구성된다는 걸 타임리프 엔진에게 알려줘야 하기 때문 템플릿을 수정할 경우 QuestionController의 GetMappig으로 매핑한 메서드도 변경 왜냐하면 question_form.html 템플릿은 "질문 등록하기" 버튼을 통해 GET 방식으로 요청되더라도 th:object에 의해 QuestionForm 객체가 필요하기 때문. --><html>태그의 xmlns 속성은 XML 네임스페이스 명시
xmlns 속성은 XHTML문서일 경우 반드시 명시되어야 함
네임스페이스(namespace)의 기본값이 “xmlns=http://www.w3.org/1999/xhtml”
<th>
html 테이블에서 제목이 되는 header cell 헤더셀을 정의할 때 사용 테이블을 구성하는 셀은 <th>, <td> 두가지가 있으며 <th> 사용한 헤더 정보를 저장하는 헤더셀-> <th>요소 내 텍스트는 기본적으로 굵은 폰트로 중앙 정렬<td> 일반적인 데이터를 저장하는 데이터셀-> <td> 요소 내 텍스트는 기본적으로 일반적 두께의 폰트로 좌측 정렬
class="container my-3", class="table", class="thead-dark 등은 부트스트랩이 제공하는 클래스들
<label> 태그
<input> 태그를 도와주는 역할. <input>태그가 디자인 하기 힘들 때
<label>태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있음
<label> 태그는 for 속성을 사용해서 <input> 태그의 id 속성에 연계해서 사용.
label의 for값과 input의 id값을 일치시키면
<input type="" value="">
html value 속성은 input태그에서 보조적인 속성
초깃값 설정 <input type="text" value="아이디를 입력하세요.">, <input type="password" value="비밀번호를 입력하세요">
버튼 텍스트 변경(submit, button, reset, file)
양식 제출에 사용(서버에서는 제출용으로 사용되므로 중요한 기능 radio, checkbox)
row 행(가로)
column 열(세로)
'JAVA > 스프링' 카테고리의 다른 글
템플릿엔진 오류 (0) 2023.08.24 리포지터리 데이터 삭제하기 부분 개수 오류 (2) 2023.08.23 엔티티 복습 (2) 2023.08.20 Controller 복습 (0) 2023.08.20 Get과 Post의 차이 (0) 2023.08.15