用HTML5做一个手机验证码框
时间: 2023-10-12 21:14:22 浏览: 46
以下是一个基本的HTML5手机验证码框示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机验证码框</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#verification-code {
display: flex;
flex-direction: row;
align-items: center;
}
#verification-code input {
width: 3rem;
height: 3rem;
font-size: 2rem;
margin: 0 0.5rem;
text-align: center;
border: 1px solid #ccc;
border-radius: 0.5rem;
outline: none;
}
#verification-code input:focus {
border-color: #06c;
}
</style>
</head>
<body>
<div id="verification-code">
<input type="text" maxlength="1" pattern="\d" required autofocus>
<input type="text" maxlength="1" pattern="\d" required>
<input type="text" maxlength="1" pattern="\d" required>
<input type="text" maxlength="1" pattern="\d" required>
<input type="text" maxlength="1" pattern="\d" required>
<input type="text" maxlength="1" pattern="\d" required>
</div>
</body>
</html>
```
该示例使用了HTML5中的`input`元素,包含了6个用于输入验证码的文本框,每个文本框都有以下属性:
- `type="text"`:指定输入框类型为文本框;
- `maxlength="1"`:指定文本框可以输入的最大长度为1,即只能输入一个数字;
- `pattern="\d"`:指定文本框只能输入数字;
- `required`:指定文本框为必填项;
- `autofocus`:指定文本框在页面加载时自动获取焦点。
CSS样式中使用了`flex`布局,使验证码框中的文本框水平排列,并居中对齐。每个文本框的样式包括了边框、圆角和聚焦时的样式变化。