一、HTML5 新的 <input> 类型
HTML5 引入了多种新的 <input> 类型，使得表单的输入更加语义化和用户友好。
1. <input type="email">
<input type="email"> 用于接收电子邮件地址，浏览器会自动进行格式验证。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Input Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- email 类型的 input，用于接收电子邮件地址 -->
<div class="input-field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com" required>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
2. <input type="date">
<input type="date"> 用于接收日期输入，浏览器会提供日期选择器。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Input Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- date 类型的 input，用于接收日期输入 -->
<div class="input-field">
<label for="date">Date:</label>
<input type="date" id="date" name="date" required>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
3. <input type="url">
<input type="url"> 用于接收 URL 地址，浏览器会自动进行格式验证。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Input Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- url 类型的 input，用于接收 URL 地址 -->
<div class="input-field">
<label for="url">Website:</label>
<input type="url" id="url" name="url" placeholder="https://example.com" required>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
4. 其他新类型
除了 email、date、url 之外，HTML5 还引入了其他新类型，如 color、number、range 等。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Other Input Types Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- color 类型的 input，用于选择颜色 -->
<div class="input-field">
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color">
</div>
<!-- number 类型的 input，用于接收数值 -->
<div class="input-field">
<label for="number">Age:</label>
<input type="number" id="number" name="number" min="1" max="100">
</div>
<!-- range 类型的 input，用于选择范围 -->
<div class="input-field">
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
二、HTML5 新的表单元素
HTML5 引入了一些新的表单元素，使表单功能更加丰富。
1. <datalist>
<datalist> 元素用于提供一个预定义的选项列表供其他控件使用。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datalist Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- datalist 提供预定义选项 -->
<div class="input-field">
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser" placeholder="Type to search...">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
2. <output>
<output> 元素用于表示计算或用户操作的结果。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input, .input-field output {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
<script>
// 计算两个数的和，并将结果显示在 output 元素中
function calculateSum() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var sum = num1 + num2;
document.getElementById('result').value = sum;
}
</script>
</head>
<body>
<form oninput="calculateSum()">
<div class="input-field">
<label for="num1">Number 1:</label>
<input type="number" id="num1" name="num1">
</div>
<div class="input-field">
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2">
</div>
<!-- output 元素显示计算结果 -->
<div class="input-field">
<label for="result">Sum:</label>
<output id="result" name="result"></output>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
3. <progress>
<progress> 元素表示任务的完成进度。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title
>Progress Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
progress {
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- progress 元素显示任务进度 -->
<div class="input-field">
<label for="file">File upload progress:</label>
<progress id="file" value="32" max="100">32%</progress>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
4. <meter>
<meter> 元素表示标量测量值或分数值范围内的度量。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meter Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
meter {
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- meter 元素显示测量值 -->
<div class="input-field">
<label for="disk">Disk usage:</label>
<meter id="disk" value="0.6" min="0" max="1" low="0.3" high="0.7" optimum="0.5">60%</meter>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
三、表单验证和属性
HTML5 为表单引入了更强大的验证功能，使用新的属性可以方便地进行客户端验证。
1. required
required 属性用于指定输入字段为必填项。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Required Attribute Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- required 属性指定此字段为必填项 -->
<div class="input-field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
2. pattern
pattern 属性用于指定输入字段的正则表达式模式，浏览器会自动进行格式验证。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pattern Attribute Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- pattern 属性指定输入的正则表达式模式 -->
<div class="input-field">
<label for="phone">Phone Number (XXX-XXX-XXXX):</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
3. min 和 max
min 和 max 属性用于指定输入字段的最小值和最大值，适用于 number、range、date 等类型。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min and Max Attributes Example</title>
<style>
.input-field {
display: block;
margin-bottom: 10px;
}
.input-field input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<form>
<!-- min 和 max 属性指定输入的最小值和最大值 -->
<div class="input-field">
<label for="age">Age (1-100):</label>
<input type="number" id="age" name="age" min="1" max="100" required>
</div>
<div class="input-field">
<label for="start">Start date:</label>
<input type="date" id="start" name="start" min="2024-01-01" max="2024-12-31" required>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
