Thuộc tính bắt buộc số đầu vào HTML DOM trả về và sửa đổi xem trường số đầu vào có phải được điền trước khi gửi biểu mẫu hay không.
Cú pháp
Sau đây là cú pháp -
-
Yêu cầu trả lại
object.required
-
Bắt buộc phải sửa đổi
object.required = true | false
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính bắt buộc số đầu vào HTML DOM -
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
color:#db133a;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input number required property Demo</h1>
<form action="">
<p>Hi, Enter your day of birth</p>
<input type="number" class="numberInput" required>
<input type="submit" onclick="checkInput()">
</form>
<div class="show"></div>
<script>
function checkInput() {
var numberInput = document.querySelector(".numberInput");
if(numberInput.value === ''){
document.querySelector(".show").innerHTML="Please Select";
}
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào ” Gửi ”Mà không cần nhập bất kỳ giá trị nào vào trường số đầu vào.
