Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Đầu vào Thuộc tính bắt buộc

Thuộc tính tháng đầu vào HTML DOM bắt buộc trả về và sửa đổi xem trường tháng đầ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 -

1. Yêu cầu trả lại

object.required

2. 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 tháng đầ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 month required property Demo</h1>
<form action="">
<p>Hi, Select your month of birth?</p>
<input type="month" class="monthInput" required>
<input type="submit" onclick="checkInput()">
</form>
<div class="show"></div>
<script>
   function checkInput() {
      var monthInput = document.querySelector(".monthInput");
      if(monthInput.value === ''){
         document.querySelector(".show").innerHTML="Please Select";
      }
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Đầu vào Thuộc tính bắt buộc

Bây giờ hãy nhấp vào “ Gửi ”Mà không cần chọn bất kỳ tháng nào để xem thuộc tính bắt buộc hoạt động như thế nào.

HTML DOM Đầu vào Thuộc tính bắt buộc