about.html Example File
webenginewidgets/webui/about.html<!DOCTYPE html>
<html>
<head>
<title>Qt WebEngine WebUI Example</title>
<style>
html {
background: #f0f0f0;
color: #303030;
font: 16px system-ui;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
body > * {
padding-left: 20px;
padding-right: 20px;
}
header {
flex: none;
display: flex;
align-items: center;
background: #f0fff0;
border-bottom: 1px solid #e0e0e0;
padding-top: 20px;
padding-bottom: 20px;
}
header > h1 {
font: bold 20px system-ui;
margin-left: 18px;
}
main {
flex: auto;
}
footer {
flex: none;
display: flex;
justify-content: center;
padding-bottom: 20px;
}
button {
background: #41cd52;
color: #f0f0f0;
font: 16px system-ui;
border: 0;
box-shadow: 0px 1px 3px rgb(0,0,0,0.5);
cursor: pointer;
margin: 0 0 1px;
padding: 10px 24px;
}
button:hover {
background: #50dc61;
}
button:active {
background: #50dc61;
box-shadow: 0px 1px 2px rgb(0,0,0,0.5);
margin: 1px 0 0;
}
button:focus {
outline: 0;
}
</style>
</head>
<body>
<header>
<img width="48px" height="48px"
src="qrc:/qt-project.org/qmessagebox/images/qtlogo-64.png">
<h1>WebEngine Widgets<br>WebUI Example</h1>
</header>
<main>
<p>
Aside from the built-in schemes, such as <code>http</code> and
<code>qrc</code>, Qt WebEngine may be extended with <em>custom
schemes</em> by creating <em>custom scheme handlers</em>.
</p>
<p>
This is a simple HTML page loaded from a custom scheme and
displayed by a <code>QWebEngineView</code>. Even the Quit button
below is a standard HTML <code><button></code> element.
</p>
<p>
Read the documentation to find out
</p>
<ul>
<li>
<p>
How to create a custom scheme handler which serves HTML
and handles HTML form submissions.
</p>
</li>
<li>
<p>
How to prevent ordinary web content from accessing the
custom scheme.
</p>
</li>
<li>
<p>
How to prevent any other scheme from submitting HTML
form data.
</p>
</li>
</ul>
</main>
<footer>
<form action="" method="post">
<button name="quit">Quit</button>
</form>
</footer>
</body>
</html>© 2019 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.