转自:http://www.w3cfuns.com/thread-1381-1-7.html 谢谢
在过去我们制作此种类型输入框,会用到不少JS验证,如今,有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用。
1.url
<form>
<input name="urls" type="url" value="http://www.w3cfuns.com/"/>
<input type="submit" value="提交"/>
</form>
效果:设置此类型后,从外观上来看与普通的元素差不多,可是如果你将此类型放到表单中之后,当点击提交按钮,如果此输入框中输入的不是一个URL地址,将无法提交。
2.Email类型
<form>
<input name="urls" type="email" value="http://www.w3cfuns.com/"/>
<input type="submit" value="提交"/>
</form>
效果:如果我们讲上面的URL类型的代码中的type修改为email,那么在表单提交的时候,会自动验证此输入框中的内容是否为email格式,如果不是,则无法提交。
分享到:
相关推荐
在HTML5中,`<input>`元素引入了许多新的类型,以增强网页表单的功能和用户体验。今天我们将重点探讨其中的`url`和`email`类型,这两种类型为输入验证提供了便利,减少了对JavaScript验证的依赖。 1. **URL类型** ...
HTML5为input元素类型增加了更多的选项,使之更适合现代网页应用的需求。 ### email类型 email类型是一个特定的文本输入类型,旨在收集用户的电子邮件地址。通过将input元素的type属性设置为"email",浏览器会自动...
除了这些新类型,`<input>`元素还有其他增强,如`list`属性关联`<datalist>`元素提供预设选项,`multiple`属性允许在一个输入框中选择多个值,`pattern`属性允许自定义正则表达式进行复杂验证,`placeholder`属性为...
这些新类型使得开发者能够更精确地控制用户输入的数据,同时也提供了更好的浏览器原生支持,减少了对JavaScript的依赖。以下是四个关键案例的详细说明: 1. **email类型**: `email`类型的`input`元素用于接收用户...
在HTML5中,input元素不仅新增了多种输入类型,还增加了一些属性,以提供更丰富的功能和更好的用户体验。 1. autocomplete属性: autocomplete属性用于控制表单或输入字段的自动填充功能。当设置为"on"时,浏览器...
HTML5学习教程 HTML5是下一代的HTML标准,它提供了许多新的特性和...本教程详细介绍了HTML5的基本概念、新特性、浏览器支持、Input类型、表单元素和Canvas等方面的知识点,旨在帮助开发者更好地理解和应用HTML5技术。
* 输入类型:HTML5提供了多种输入类型,例如email、url、tel等。 * 输入验证:HTML5的输入类型具有自动验证功能,例如邮箱格式验证等。 * 输入应用场景:HTML5的输入类型广泛应用于表单开发、用户信息收集等领域。 ...
在设计表单时,了解并正确应用这些`<input>`类型至关重要,它们可以帮助我们创建功能强大、用户友好的Web应用程序。在实际项目中,还可以结合JavaScript和CSS进行更复杂的交互和样式定制,提升页面的视觉效果和交互...
表单扩展之新input控件”着重讲解了HTML5中的新特性,特别是与表单相关的input类型,这些新输入控件极大地提升了用户体验和数据收集的效率。 首先,我们来看看HTML中的表单元素。表单是网页中用于用户输入信息的...
### HTML 5之表单新功能解析 随着前端技术的不断发展与创新,HTML 5作为新一代的Web标准,为开发者提供了更多强大而便捷的功能。在众多改进中,表单功能的增强尤为突出,极大地提升了用户体验及开发效率。下面将...
- HTML5新增了多种输入类型,如email(邮箱验证)、url(网址验证)、number(数值验证)、date(日期选择)等,提供内置验证功能。 - 文件处理方面,HTML5引入File API,允许用户选择和操作本地文件,如FileList...
- **增强的表单功能**:HTML5引入了多个新的表单输入类型,如`<input type="email">`、`<input type="url">`、`<input type="number">`等,这些新增的类型不仅提高了用户输入的便利性,也加强了数据的有效性校验。...
HTML5拥有多个新的表单输入类型,包括Number类型、Email类型、Url类型等。这些新特性提供了更好的输入控制和验证。 Number类型-常用属性: HTML5表单元素: HTML5表单元素提供了许多新的属性和方法,包括datalist...
HTML5对表单进行了重大改进,增加了多个新的输入类型,如 `email`、`url`、`number`、`range`、`date` 和 `search` 等,为用户提供更准确的输入控制,并简化了数据验证过程。例如: ```html E-mail: <input type=...
HTML5增强了表单处理能力,新增了`<input>`类型的`date`、`email`、`url`、`number`等,提高了输入验证的效率。此外,`<form>`标签中的`required`属性可以确保必填字段,`placeholder`属性则为输入框提供提示文本。 ...
- HTML5增加了新的表单输入类型,如email、url、date等,以及新的表单验证功能,提升用户体验。 这个“HTML5+教程”很可能是围绕这些主题展开,指导开发者如何使用HTML5来构建一个拍照上传应用,涵盖从用户选择...
5. **更新的表单控件**:HTML5增加了新的表单输入类型,如`<input type="calendar">`、`<input type="date">`、`<input type="time">`、`<input type="email">`、`<input type="url">`和`<input type="search">`,...