HTML5是一種高效的網頁開發技術，它的特性之一就是能夠與數據庫進行交互。數據庫是用來存儲、管理和檢索數據的工具，使用HTML5與數據庫交互可以極大地提高網頁的數據處理能力和用戶體驗。
下面是一個HTML5與數據庫交互的源代碼，其中使用了pre標簽來展示代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5與數據庫交互</title>
</head>
<body>
<h1>用戶注冊界面</h1>
<form method="post" action="register.php">
<label for="username">用戶名:</label>
<input type="text" name="username" id="username">
<br><br>
<label for="password">密碼:</label>
<input type="password" name="password" id="password">
<br><br>
<input type="submit" value="注冊">
</form>
<script>
// 連接數據庫
var db = openDatabase('mydb', '1.0', 'My database', 2 * 1024 * 1024);
// 創建表
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, username, password)');
});
// 插入數據
function register() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
db.transaction(function(tx) {
tx.executeSql('INSERT INTO users (id, username, password) VALUES (?, ?, ?)', [null, username, password]);
});
}
</script>
</body>
</html>在這個例子中，我們創建了一個簡單的用戶注冊界面，并使用了HTML5的數據庫API來進行數據的存取。具體來說，我們在頁面中嵌入了一個JavaScript腳本，其中包含了數據庫的連接、表的創建以及數據的插入等操作。這樣用戶注冊信息就可以直接存儲到數據庫中，并且可以方便地進行后續處理。