下面的例子展示了在HTML5中你如何使用新的form input type，和现在的iPod Touch（使用IOS4.2.1和Safari 5.0.2）输出一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Using the new form input types in HTML5</title>
</head>
<body>
<form>
<table>
<tr>
<td>color:</td>
<td><input type="color" /></td>
</tr>
<tr>
<td>date:</td>
<td><input type="date" /></td>
</tr>
<tr>
<td>datetime:</td>
<td><input type="datetime" /></td>
</tr>
<tr>
<td>datetime-local:</td>
<td><input type="datetime-local" /></td>
</tr>
<tr>
<td>email:</td>
<td><input type="email" /></td>
</tr>
<tr>
<td>month:</td>
<td><input type="month" /></td>
</tr>
<tr>
<td>number:</td>
<td><input type="number" /></td>
</tr>
<tr>
<td>range:</td>
<td><input type="range" /></td>
</tr>
<tr>
<td>search:</td>
<td><input type="search" /></td>
</tr>
<tr>
<td>tel:</td>
<td><input type="tel" /></td>
</tr>
<tr>
<td>time:</td>
<td><input type="time" /></td>
</tr>
<tr>
<td>url:</td>
<td><input type="url" /></td>
</tr>
<tr>
<td>week:</td>
<td><input type="week" /></td>
</tr>
</table>
</form>
</body>
</html>
源码下载 ：
分享到：
相关推荐
在HTML5中，`input`元素有了许多新的特性和改进，为开发者提供了更多的设计灵活性和用户体验优化的机会。本篇文章将深入探讨HTML5 `input`样式的相关知识点，以及如何利用这些特性创建出超棒的输入框UI设计概念和...
New semantic elements and form input types Single-page application design Creating interactive graphics Mobile web apps About the Authors Rob Crowther is a web developer and blogger and the author of ...
2. 脚本和链接无需type属性（No More Types for Scripts and Links）：在HTML5中，添加CSS和JavaScript文件时，无需再为`<script>`和`<link>`标签指定`type`属性，它们默认为`text/css`和`text/javascript`。...
New semantic elements and form input types Single-page application design Creating interactive graphics Mobile web apps ABOUT THE AUTHORSRob Crowther is a web developer and blogger and the author of ...
2. 脚本和链接无需type（No More Types for Scripts and Links）：在HTML5中，链接样式表和引入脚本文件时，不再需要指定`type`属性，如`type="text/css"`或`type="text/javascript"`，简化了代码。 3. 语义化的...
- HTML5 introduces several new input types, such as `<input type="date">` and `<input type="email">`, which simplify the process of collecting specific types of data. - Client-side validation ...
HTML5 是最新版本的 HTML 标准，它引入了许多新的功能来支持现代网页的需求。 **HTML5 标签与结构：** - `<html>`: 文档的根元素。 - `<body>`: 包含文档的实际内容。 - `<head>`: 包含文档的元数据。 **标签示例...
表单在HTML中通过`<form>`标签定义，可以包含多个表单控件或元素。这些元素允许用户在表单内输入信息，如文本、选择选项或者做出判断。例如： ```html <form> <!-- 表单内容 --> </form> ``` 2. **文本域...
`_self`表示在同一窗口或标签页中打开，`_blank`则会在新的窗口或标签页中打开。第33行和34行的两个按钮展示了如何使用此属性。 6. **autofocus属性**： HTML5引入的`autofocus`属性使得元素在页面加载完成后自动...
3. 创建ASP.NET页面：新建一个ASP.NET Web Form，添加一个HTML5的`<input>`元素作为文件选择控件，以及一个用于显示上传进度的容器，如`<div>`。 4. 添加JavaScript代码：在页面的JavaScript部分，设置Plupload的...
当用户在HTML表单中使用`<input type="file">`标签选择文件后，这些文件会被封装在POST数据中，服务器端的PHP脚本可以通过`$_FILES`来访问这些上传的文件信息，包括文件名、临时存储路径、文件类型、大小以及上传...
4. **处理多个文件上传**：如果要支持上传多个文件，只需在表单中添加多个`<input type="file">`元素，并在Action类中对应地增加多个File和String属性。例如： ```html <form action="upload.action" method="post" ...
在Web开发中，文件上传功能是一个常见的需求。...然而，随着HTML5的普及，现代浏览器开始支持原生的多文件上传和进度事件，因此在新的项目中，可以考虑使用HTML5的File API，以减少对Flash的依赖。
首先，我们需要在HTML表单中使用`<input type="file">`标签来允许用户选择多个文件。通过设置`multiple`属性，用户可以一次选择多个文件。例如： ```html <form action="uploadAction" method="post" enctype=...
你可以在Action类中使用`List<File>`和`List<String>`类型的属性来接收多个文件，例如`private List<File> files; private List<String> fileNames; private List<String> contentTypes;`。同时，需要在struts.xml中...
要创建一个图片和音频文件上传的表单，你需要在HTML中使用`<form>`元素，设置`enctype`属性为`multipart/form-data`，并添加`<input type="file">`字段，允许用户选择要上传的文件。例如： ```html <form action=...
在本文中，我们将深入探讨如何在Laravel框架中使用filemanager，特别是在集成Tinymce编辑器的情况下。Laravel是一款流行的PHP框架，以其优雅的语法和强大的功能受到开发者的喜爱。而filemanager则是一个用于处理文件...
在本文中，我们将深入探讨如何使用PHP和AJAX实现图片上传功能。这是一个常见的Web开发需求，特别是在用户交互丰富的网站和应用程序中。通过结合这两种技术，我们可以实现无刷新的图片上传，提升用户体验。 首先，让...