Dưới đây là một mẫu Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<form action="#" method="post">
<label for="name">Tên:</label><br>
<input type="text" id="name" name="name" maxlength="50" pattern="[a-zA-Z\s]+" title="Tên chỉ được chứa chữ cái và dấu cách" required><br>
<label for="phone">Số điện thoại:</label><br>
<input type="tel" id="phone" name="phone" minlength="10" maxlength="10" pattern="[0]{1}[0-9]{9,}" title="Số điện thoại bắt đầu bằng số 0 và có ít nhất 10 số" required><br>
<label for="age">Tuổi:</label><br>
<input type="number" id="age" name="age" min="0" max="150" title="Tuổi chỉ được nhập số từ 0 đến 150" required><br>
<input type="submit" value="Gửi">
</form>
</body>
</html>Trong form này:
- Input cho tên (name) yêu cầu chỉ chứa các chữ cái và dấu cách, được kiểm tra bằng mẫu regex
[a-zA-Z\s]+. - Input cho số điện thoại (phone) yêu cầu bắt đầu bằng số 0 và có ít nhất 10 số, được kiểm tra bằng mẫu regex
[0]{1}[0-9]{9,}. minlength="10": Xác định độ dài tối thiểu của chuỗi nhập vào là 10 ký tự.maxlength="10": Xác định độ dài tối đa của chuỗi nhập vào là 10 ký tự.- Input cho tuổi (age) là một số từ 0 đến 150.
- Trong mẫu regex
[a-zA-Z\sàáạãảâầấậẫẩăằắặẵẳèéẹẽẻêềếệễểìíịĩỉòóọõỏôồốộỗổơờớợỡởùúụũủưừứựữửỳýỵỹỷđĐ]+, mình đã thêm các ký tự dấu tiếng Việt vào mẫu regex để cho phép nhập cả chữ cái không dấu và có dấu. - Trong input của phần tên (
<input type="text" id="name" name="name" ... maxlength="50" required>), mình đã thêm thuộc tínhmaxlength="50", nó sẽ giới hạn số ký tự tối đa được nhập vào là 50.