HTML5 控件 - HTML

HTML5 为 Web 应用程序带来许多新的控件和表单元素，这些控件和表单元素可以轻松地与用户进行交互。本文将介绍一些常见的 HTML5 控件和表单元素。

媒体控件

HTML5 提供了多种媒体控件，可供开发者使用。

video

video 控件用于播放视频。示例代码如下：

<video width="640" height="480" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

audio

audio 控件用于播放音频。示例代码如下：

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

canvas

canvas 控件用于绘制图形和动画。示例代码如下：

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

表单元素

HTML5 提供了多种表单元素，可供开发者使用。

datalist

datalist 控件用于提供下拉列表中的选项。示例代码如下：

<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="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

range

range 控件用于创建滑动条。示例代码如下：

<label for="vol">音量:</label>
<input type="range" id="vol" name="vol" min="0" max="10">

date

date 控件用于创建日期选择器。示例代码如下：

<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">

总结

本文介绍了一些常见的 HTML5 控件和表单元素，包括 video、audio、canvas、datalist、range 和 date。这些控件和表单元素可以使 Web 应用程序更加交互性和灵活性。