إدارة النماذج (Forms) المتقدمة في HTML5

<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" name="a" value="0"> +
  <input type="number" id="b" name="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

<progress value="70" max="100"></progress>

<meter value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.9"></meter>

<input type="text" name="username" required>

<input type="email" placeholder="Enter your email">

<input type="number" name="age" min="18" max="100">

<input type="number" name="rating" min="1" max="5" step="0.5">

<input type="email" name="email" required>

<input type="url" name="website" required>

<input type="number" name="quantity" min="1" max="10">

<input type="range" name="volume" min="0" max="100" step="10">

<input type="date" name="birthdate">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8" required>
  <br>
  <input type="submit" value="Submit">
</form>

<form id="myForm">
  <input type="text" id="name" name="name" required>
  <input type="submit" value="Submit">
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    if (!this.checkValidity()) {
      event.preventDefault(); // يمنع الإرسال إذا لم يتم استيفاء التحقق
      alert('Please fill out the form correctly.');
    }
  });
</script>