HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法

HTML5带来了许多新的标签，其中form标签也得到了增强。在HTML5中，form标签不仅仅是个容器，而且在处理表单的交互上，这个标签与其他的标签和JavaScript API一起，提供了一些有力的辅助。

HTML5带来了许多新的标签，其中form标签也得到了增强。在HTML5中，form标签不仅仅是个容器，而且在处理表单的交互上，这个标签与其他的标签和JavaScript API一起，提供了一些有力的辅助。

1. 表单验证

HTML5的form标签支持更容易、更强大的表单验证。通过添加属性和值来控制表单验证行为。

必填属性

HTML5新增了required属性。使用这个属性可以让表单元素成为必填项，如下面的示例：

<form>
  <label>
    姓名：
    <input type="text" name="name" required>
  </label>
  <br>
  <label>
    密码：
    <input type="password" name="password" required>
  </label>
  <br>
  <input type="submit" value="提交">
</form>

在输入姓名和密码时，如果没有输入任何值，表单会在提交前弹出提示：请输入此字段的值。

输入类型属性

使用type属性可以指定表单元素的输入类型。HTML5中新增了一些类型，其中包含电子邮件、URL、电话号码等新的类型。

以下是一些类型属性的示例：

<label>
  电子邮件：
  <input type="email" name="email">
</label>
<br>
<label>
  URL：
  <input type="url" name="url">
</label>
<br>
<label>
  电话号码：
  <input type="tel" name="tel">
</label>

这样，浏览器可以使用本地的验证来确保用户提供的数据是合法格式的。

2. 文件上传

HTML5允许在form标签中添加一个新属性formenctype，它规定该表单提交数据到服务器的编码类型。和enctype一样，它指定了向服务器发送表单数据时使用的MIME类型。

对于文件上传，我们可以使用multipart/form-data类型来提交表单数据。

<form enctype="multipart/form-data" action="upload_file.php" method="POST">
  <label>
    选择文件：
    <input type="file" name="file_input">
  </label>
  <br>
  <input type="submit" value="上传文件">
</form>

3. 拖放

HTML5的form标签还支持文件拖放。这意味着，用户可以将他们计算机中的文件拖到网页上，然后再提交到服务器。

我们只需要为<form>元素添加ondragover和ondrop事件处理函数即可。

<form enctype="multipart/form-data" action="upload_file.php" method="POST"
      ondragover="event.preventDefault()" ondrop="dropHandler(event)">
  <label>
    拖放文件或者选择文件：
    <input type="file" name="file_input" id="file_input" style="display: none">
  </label>
  <br>
  <input type="submit" value="上传文件">
</form>

<script>
  function dropHandler(event) {
    event.preventDefault();
    var files = event.dataTransfer.files;
    document.getElementById('file_input').files = files;
  }
</script>

以上是三种HTML5 form 标签的应用，它们分别是表单验证、增加文件上传、集成拖放。这些功能的使用方法可以为网页提供更好的体验和更友好的用户界面。