-
Notifications
You must be signed in to change notification settings - Fork 1.4k
/
full-example.html
80 lines (73 loc) · 2.21 KB
/
full-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>完整的内置表单验证功能示例</title>
<style>
form {
font: 1em sans-serif;
max-width: 320px;
}
p > label {
display: block;
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
width : 100%;
border: 1px solid #333;
box-sizing: border-box;
}
input:invalid {
box-shadow: 0 0 5px 1px red;
}
input:focus:invalid {
box-shadow: none;
}
</style>
</head>
<body>
<form>
<p>
<fieldset>
<legend>你有驾驶证吗?<abbr title="必填项" aria-label="required">*</abbr></legend>
<!-- 由于收音机按钮组是单选的,因此组中只有一个收音机按钮有 "required" 属性即可。 -->
<input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
<input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
</fieldset>
</p>
<p>
<label for="n1">你多大年纪?</label>
<!-- pattern 属性在浏览器不支持数字输入类型作为兼容选项。注意支持正则表达式的浏览器数字输入域会自动失效。此处用法仅用作回退。 -->
<input type="number" min="12" max="120" step="1" id="n1" name="age"
pattern="\d+">
</p>
<p>
<label for="t1">你最喜欢的水果?<abbr title="必填项" aria-label="required">*</abbr></label>
<input type="text" id="t1" name="fruit" list="l1" required
pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
<datalist id="l1">
<option>Banana</option>
<option>Cherry</option>
<option>Apple</option>
<option>Strawberry</option>
<option>Lemon</option>
<option>Orange</option>
</datalist>
</p>
<p>
<label for="t2">你的电子邮件地址?</label>
<input type="email" id="t2" name="email">
</p>
<p>
<label for="t3">请留言:</label>
<textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
</p>
<p>
<button>提交</button>
</p>
</form>
</body>
</html>