Home  >  Thymeleaf

Thymeleaf Form Action, Form Submit and Image SRC Example with Attribute Values

By Arvind Rai, November 03, 2015
On this page we will provide Thymeleaf form action, form submit and image src example with attribute values. Thymeleaf provides th:attr attribute that can be used to evaluate html tag attributes in group. Thymeleaf also provides specific attribute to evaluate html attribute, for example th:src, th:title and th:alt for image and th:action for Form Action and th:value for form submit.

th:attr Attribute for Image SRC

<img src="abc.png" th:attr="src=@{/images(name=${myPage.imageName})},
           title=${myPage.imageTitle},alt=${myPage.imageTitle}" /> 
Thymeleaf provides th:attr attribute which groups more than one attribute of HTML tag. For image, we can group attributes like src, title and alt using th:attr.

th:attr Attribute for Form Action and Form Submit

Find the use of th:attr for form action and form submit. We have decided form action using Thymeleaf expression and submit button value has been evaluated by Thymeleaf expression.
<form action="save" th:attr="action=@{${myPage.formAction}}">
    <input type="text" name="name" />
    <input type="submit" value="Submit" th:attr="value=${myPage.submitValue}"/>
</form> 



th:src, th:title and th:alt Attributes for Image

If we do not want to group attributes, we can use specific attribute just by appending th: to the html attribute like th:src, th:title and th:alt for image.
<img src="abc.png" th:src="@{/images(name=${myPage.imageName})}" 
          th:title="${myPage.imageTitle}" th:alt="${myPage.imageTitle}"/> 

th:action for Form Action and th:value Attribute for Form Submit

Find the th:action and th:value attribute example for form action and submit.
<form action="save" th:action="@{${myPage.formAction}}">
    <input type="text" name="name" />
    <input type="submit" value="Submit" th:value="${myPage.submitValue}"/>
</form> 

HTML Page with th:attr that groups attribute


myblog1.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Blog Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
	<form action="save" th:attr="action=@{${myPage.formAction}}">
	    <input type="text" name="name" />
	    <input type="submit" value="Submit" th:attr="value=${myPage.submitValue}"/>
	</form>
	<img src="abc.png" th:attr="src=@{/images(name=${myPage.imageName})},
	                  title=${myPage.imageTitle},alt=${myPage.imageTitle}" />
  </body>
</html>  

HTML Page with Specific Attribute


myblog2.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Blog Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
	<form action="save" th:action="@{${myPage.formAction}}">
	    <input type="text" name="name" />
	    <input type="submit" value="Submit" th:value="${myPage.submitValue}"/>
	</form>
	<img src="abc.png" th:src="@{/images(name=${myPage.imageName})}" 
	               th:title="${myPage.imageTitle}" th:alt="${myPage.imageTitle}"/>
  </body>
</html>  

Java Classes used in Demo


BlogApplication.java
package com.concretepage;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.thymeleaf.context.WebContext;
public class BlogApplication {
    public void process(HttpServletRequest request, HttpServletResponse response) 
   		 throws IOException {
	    WebContext ctx = new WebContext(request, response, request.getServletContext(),
	    		request.getLocale());
	    Page page = new Page();
	    page.setFormAction("saveData");
	    page.setSubmitValue("Submit Data");
	    page.setImageName("flower12.jpg");
	    page.setImageTitle("Flower");
	    ctx.setVariable("myPage", page);
	    ThymeleafAppUtil.getTemplateEngine().process("myblog1", ctx, response.getWriter());
    }
} 

Page.java
package com.concretepage;
public class Page {
	private String formAction;
	private String submitValue;
	private String imageName;
	private String imageTitle;
	public String getFormAction() {
		return formAction;
	}
	public void setFormAction(String formAction) {
		this.formAction = formAction;
	}
	public String getSubmitValue() {
		return submitValue;
	}
	public void setSubmitValue(String submitValue) {
		this.submitValue = submitValue;
	}
	public String getImageName() {
		return imageName;
	}
	public void setImageName(String imageName) {
		this.imageName = imageName;
	}
	public String getImageTitle() {
		return imageTitle;
	}
	public void setImageTitle(String imageTitle) {
		this.imageTitle = imageTitle;
	}
} 

ThymeleafAppUtil.java
package com.concretepage;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;
public class ThymeleafAppUtil {
     private static TemplateEngine templateEngine;
     static {
         ServletContextTemplateResolver templateResolver = 
                 new ServletContextTemplateResolver();
         templateResolver.setTemplateMode("XHTML");
         templateResolver.setPrefix("/WEB-INF/templates/");
         templateResolver.setSuffix(".html");
         templateResolver.setCacheTTLMs(3600000L);
         templateEngine = new TemplateEngine();
         templateEngine.setTemplateResolver(templateResolver);
     }
     public static TemplateEngine getTemplateEngine() {
		return templateEngine;
     }
} 

BlogServlet.java
package com.concretepage;
import java.io.IOException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns = "/myblog", loadOnStartup = 1)
public class BlogServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException{
	     doGet(request,response);
	}
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException{
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Pragma", "no-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);

		BlogApplication application = new BlogApplication();
		application.process(request, response);
	}
} 

Output

Run the demo using URL http://localhost:8080/concretepage-1/myblog
Find the output as view source.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Blog Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
	<form action="saveData">
	    <input type="text" name="name" />
	    <input type="submit" value="Submit Data"/>
	</form>
	<img src="/concretepage-1/images?name=flower12.jpg" title="Flower" alt="Flower"/>
  </body>
</html>  

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us