HTML5表單是一個(gè)強(qiáng)大的工具，可以使您的網(wǎng)站更加交互和易于使用。下面是一個(gè)HTML5表單的完整代碼示例，包括輸入字段、表單驗(yàn)證和提交按鈕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5表單示例</title>
</head>
<body>
<h1>HTML5表單示例</h1>
<form action="#" method="post">
<p>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
</p>
<p>
<label for="confirm-password">確認(rèn)密碼:</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</p>
<p>
<label for="phone">電話號(hào)碼:</label>
<input type="tel" id="phone" name="phone">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
<script>
// 表單驗(yàn)證
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password !== confirmPassword) {
alert('確認(rèn)密碼不正確！');
e.preventDefault();
}
});
</script>
</body>
</html>在這個(gè)HTML5表單代碼示例中，我們創(chuàng)建了一個(gè)包含姓名、電子郵件、密碼、確認(rèn)密碼和電話號(hào)碼的表單。使用“required”屬性，必須為姓名、電子郵件和密碼輸入值。電話號(hào)碼字段沒(méi)有“required”屬性，因此它是可選的。
還添加了JavaScript表單驗(yàn)證，以確保密碼和確認(rèn)密碼匹配。如果密碼和確認(rèn)密碼不匹配，則會(huì)彈出警告消息，并且表單不會(huì)提交。
這是一個(gè)基本的HTML5表單的代碼示例，您可以通過(guò)添加其他輸入字段或自定義表單樣式來(lái)進(jìn)一步改進(jìn)它。
上一篇js文件里的css樣式
下一篇js改變css文本框顏色