HTML输入类型编号Min Max not working chrome

Question

以下代码均不适合我

      <input type="number" min="0" max="100" step="5">  
      <input type="number" name="font-size" min="1" max="32">

在我的记事本中，min和max不是红色，它们只是黑色。我完全按照我的方式复制了它。

使用谷歌浏览器和所有地方我看这是格式，但它不适合我。任何想法我可能做错了，我能够限制价值是非常重要的。谢谢！

Answer 1

当您尝试提交表单时，它会起作用。如果您想限制实时，则需要使用Javascript。

<form action='' method='post'>
    <input type="number" name='n' min="0" max="100" step="5">  
    <input type="number" name="font-size" min="1" max="32">
    <button>Submit</button>
</form>

即使HTML5输入限制有效，您还需要检查PHP代码中的输入是否正确。

$error = "";
if ( isset($_POST['n']) && isset($_POST['font-size']) ) {
     if ($_POST['n'] % 5 != 0 || $_POST['n'] < 0 || $_POST['n'] > 100) {
         $error = "Number must be between 0 and 100 and divisible by 5";
     }

     if ($_POST['font-size'] < 1 || $_POST['font-size'] > 32) {
         $error = "Font size must be between 1 and 32";
     }
}

if (empty($error)) {
    // do your logic here
}

然后您可以在表单中显示错误

<?php echo $error; ?>
<form action='' method='post'>
    <input type="number" name='n' min="0" max="100" step="5">  
    <input type="number" name="font-size" min="1" max="32">
    <button>Submit</button>
</form>