HTML

Go HTML templates

HTML templates are a powerful part of Go Web Development. At the same time simple (back to basic plain HTML) and sophisticated with possibility to make them "dynamic" with built in functions that calls the Go web server (function for example translations).

Go HTML templates is close to a built in framework for web pages. I found it especially valuable that I can use ONE html template to hosts many sub templates, which reduces the number of files. When creating forms you group similar forms into logical groups. Like different forms for view, edit and new records.

Powerful

Go HTML templates are very powerful and can be used to create complex and dynamic web pages.

Easy to use

Go HTML templates are very easy to use, even for beginners.

Secure

Go HTML templates are very secure and can help to protect your web application from attack.

I normally use 2 levels of templates. The first level is the base template. The second base is the content (cnt). It looks cleaner, but adds an extra html file for each base page.

1. Level 1 -- The base template (howto.html

Most of the sub templates are reused on many base templates. Only the "content" sub template is unique.

<!DOCTYPE html>
<html lang="en">
                
<head>
    {{template "httphead"}}
</head>
                
<body <body data-theme="default" data-main="howto" data-module="tsk" data-lang="en"> <!-- API module from data-module on the base template -->
    {{template "icn"}}
    {{template "nav" "howto"}}
    <main>
    {{template "header" "HTML"}}
    <section>
        {{template "cnt_html" .}}{{template "desk" .}}
    </section>
    </main>
    {{template "httpend"}}
</body>
                
</html>

2. Level 2 -- The content (cnt_howto.html)

As I want the base template as clean as possible I have decided to have the content separate. More templates, but cleaner.

{{define "cnt_howto"}}
<div id="cnt">
    <div id="subcnt"><!--Go rendered Form inserted here by Javascript using innerHTML--></div> 
    <div class="line"></div>
    <p>Hit the buttons below to display forms. The URL (<strong>/tsk/view/1</strong>) sent to Go has a double purpose.
        Both as an endpoint and REST API. Similar to a "trojan horse".</p>
    <ol>
        <li>Send "trojan url" to get both correct form AND fill data from API in one single step.</li>
        <li>Render the page and send to memory buffer (body)</li>
        <li>Fill the rendered form using Javascript document.getElementById("subcnt").innerHTML</li>
    </ol>
    <button onclick="get_rec(1)">View Record</button><br>
    <button onclick="new_rec(0)">New Record</button><br>
    <button onclick="edit_rec(1)">Edit Record</button><br>
</div>
{{end}}

3. Level 3 -- The forms ONE template many forms (tsk.html)

All form related to the table tsk gathered into one single template. Addressed in Go as the defined name (without .html)

{{define "tsk_view"}}
{{template "header_std" trans "View Task"}}
    <form id="form" action="#" onsubmit="save(this, event)" method="put">
        <fieldset disabled>
            <div class="rowbox">
                <label>Subject</label>
                <input type="text" name="tsk_subject" id="focus" placeholder="Subject" required="" value={{.tsk_subject}}>
            </div>
            <div class="rowboxbig">
                <label>Description</label>
                <textarea name="tsk_desc" placeholder="Description" required="">{{.tsk_desc}}</textarea>
            </div>
        </fieldset>
    </form>
{{end}}

{{define "tsk_new"}}
{{template "header_new" trans "New Task"}}
<form id="form" action="#" onsubmit="save(this, event)" method="post">
    <div class="rowbox">
        <label>Subject</label>
        <input type="text" name="tsk_subject" id="focus" placeholder="Subject" required="" value={{.tsk_subject}}>
    </div>
    <div class="rowboxbig">
        <label>Description</label>
        <textarea name="tsk_desc" placeholder="Description" required="">{{.tsk_desc}}</textarea>
    </div>
</form>

{{define "tsk_edit"}}
{{template "header_edit" trans "Edit Task"}}
<form id="form" action="#" onsubmit="save(this, event)" method="post">
    <div class="rowbox">
        <label>Subject</label>
        <input type="text" name="tsk_subject" id="focus" placeholder="Subject" required="" value={{.tsk_subject}}>
    </div>
    <div class="rowboxbig">
        <label>Description</label>
        <textarea name="tsk_desc" placeholder="Description" required="">{{.tsk_desc}}</textarea>
    </div>
</form>
{{end}}