5 JS - 表单

1 autocomplete 自动填充

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

 

2 autofocus 自动聚焦

<form action="demo-form.php" method="post">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

 

3 multiple 上传多个文件:

<form action="demo-form.php">
  选择多张图片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

 

4 pattern 正则表达式验证输入的内容

<form action="demo-form.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

 

5 placeholder 输入域所期待的值

<form action="demo-form.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="提交">
</form>

 

6 required 必填

<form action="demo-form.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

 

7 step 每次增加或减少的数字间隔

<form action="demo-form.php">
  <input type="number" name="points" step="3">
  <input type="submit">
</form>