thymeleaf memorandum

#{...}

--# {...} is a message expression. You can read external text.

th:field --th: field (function to output tag id / name / value attributes to HTML)

th:errorclass= "..." -- th: errorclass =" ... " Add style to class attribute when there is an error --Error checking needs to be used together with th: field (function to output tag id / name / value attributes to HTML) or name attribute.

spring-mvc3/src/main/resources/templates/confirm.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--With webjars locator (no version control required)-->
<link rel="stylesheet"
		th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<title>Title</title>
</head>
<body class="bg-light">
		<div class="container">
				<div class="row justify-content-md-center">
						<div class="col-md-8 order-md-1">
								<!-- #{...}Is a message expression. You can read external text.-->
								<h4 class="border-bottom my-3" th:text="#{invoice}"></h4>
								<!-- #{...}Is a message expression. You can read external text.-->
								<p class="text-danger" th:text="#{confirmationMessage}"></p>

								<div th:object="${invoice}">
										<div class="form-group">
												<!--The for attribute of the label element is an attribute that specifies the id attribute value of the labelable form-related element to be labeled.-->
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:field(Ability to output tag id / name / value attributes to HTML)-->
												<label for="name" th:text="#{name}"></label> <input
														type="text" class="form-control" th:field="*{name}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:field(Ability to output tag id / name / value attributes to HTML)-->
												<label for="address" th:text="#{address}"></label> <input
														type="text" class="form-control" th:field="*{address}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:field(Ability to output tag id / name / value attributes to HTML)-->
												<label for="phoneNumber" th:text="#{phoneNumber}"></label> <input
														type="tel" class="form-control" th:field="*{phoneNumber}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:field(Ability to output tag id / name / value attributes to HTML)-->
												<label for="price" th:text="#{price}"></label> <input
														type="text" class="form-control" th:field="*{price}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:field(Ability to output tag id / name / value attributes to HTML)-->
												<label for="paymentDeadline" th:text="#{paymentDeadline}"></label>
												<input type="date" class="form-control"
														th:field="*{paymentDeadline}" disabled>
										</div>
								</div>

						</div>
				</div>
		</div>
		<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
		<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
		<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>

spring-mvc3/src/main/resources/templates/index.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--With webjars locator (no version control required)-->
<link rel="stylesheet"
		th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<title>Title</title>
</head>
<body class="bg-light">
		<div class="container">
				<div class="row justify-content-md-center">
						<div class="col-md-8">
								<!-- #{...}Is a message expression. You can read external text.-->
								<h4 class="border-bottom my-3" th:text="#{invoice}"></h4>

								<form th:action="@{/}" th:object="${invoice}" method="post"
										novalidate>
										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:errorclass= "..."Add style to class attribute if there is an error-->
												<!--Check for errors, th:field(Ability to output tag id / name / value attributes to HTML)、
Or, since it is obtained from the name attribute, it needs to be used together with these.-->
												<label for="name" th:text="#{name}"></label> <input
														type="text" class="form-control"
														th:errorclass="is-invalid" th:field="*{name}">
												<div class="invalid-feedback" th:errors="*{name}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:errorclass= "..."Add style to class attribute if there is an error-->
												<!--Check for errors, th:field(Ability to output tag id / name / value attributes to HTML)、
Or, since it is obtained from the name attribute, it needs to be used together with these.-->
												<label for="address" th:text="#{address}"></label> <input
														type="text" class="form-control"
														th:errorclass="is-invalid" th:field="*{address}">

												<div class="invalid-feedback" th:errors="*{address}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:errorclass= "..."Add style to class attribute if there is an error-->
												<!--Check for errors, th:field(Ability to output tag id / name / value attributes to HTML)、
Or, since it is obtained from the name attribute, it needs to be used together with these.-->
												<label for="phone" th:text="#{phoneNumber}"></label> <input
														type="tel" class="form-control" th:errorclass="is-invalid"
														th:field="*{phoneNumber}">
												<div class="invalid-feedback" th:errors="*{phoneNumber}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:errorclass= "..."Add style to class attribute if there is an error-->
												<!--Check for errors, th:field(Ability to output tag id / name / value attributes to HTML)、
Or, since it is obtained from the name attribute, it needs to be used together with these.-->
												<label for="price" th:text="#{price}"></label> <input
														type="text" class="form-control"
														th:errorclass="is-invalid" th:field="*{price}">
												<div class="invalid-feedback" th:errors="*{price}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}Is a message expression. You can read external text.-->
												<!-- th:errorclass= "..."Add style to class attribute if there is an error-->
												<!--Check for errors, th:field(Ability to output tag id / name / value attributes to HTML)、
Or, since it is obtained from the name attribute, it needs to be used together with these.-->
												<label for="paymentDeadline" th:text="#{paymentDeadline}"></label>
												<input type="date" class="form-control"
														th:errorclass="is-invalid" th:field="*{paymentDeadline}">
												<div class="invalid-feedback" th:errors="*{paymentDeadline}"></div>
										</div>
										<!-- #{...}Is a message expression. You can read external text.-->
										<button class="btn btn-primary btn-lg btn-block my-4"
												type="submit" th:text="#{register}"></button>
								</form>

						</div>
				</div>
		</div>
		<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
		<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
		<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>

Referenced article (Thank you always.)

-Form binding function by th: field and th: object (input tag / basic input system)

-Form binding function by th: field and th: object (input tag / password edition)

-What is Thymeleaf → How to write

-Thymeleaf cheat sheet

Recommended Posts

thymeleaf memorandum
memorandum
memorandum
Java memorandum
Error memorandum
Jaba Jaba Memorandum
JavaFx memorandum
JAVA memorandum
JUnit memorandum
Docker memorandum
Gradle Memorandum
thymeleaf start-up
Technical memorandum (Docker)
Log Level Memorandum
Memorandum docker command
Apache FreeMarker memorandum
Java memorandum (list)
Screen transition memorandum
Rails tutorial memorandum 1
[Ruby] Method memorandum
Java study memorandum
Spring Boot Memorandum
Extend Thymeleaf (UtilityObject)
[Java] Optional memorandum
Memorandum (Spring Web)