`
其实不坏
  • 浏览: 53475 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

HTML5之input新增加的URL类型与email类型应用

阅读更多
转自: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格式,如果不是,则无法提交。
分享到:
评论

相关推荐

    input元素的url类型和email类型简介

    在HTML5中,`&lt;input&gt;`元素引入了许多新的类型,以增强网页表单的功能和用户体验。今天我们将重点探讨其中的`url`和`email`类型,这两种类型为输入验证提供了便利,减少了对JavaScript验证的依赖。 1. **URL类型** ...

    HTML5 input元素类型:email及url介绍

    HTML5为input元素类型增加了更多的选项,使之更适合现代网页应用的需求。 ### email类型 email类型是一个特定的文本输入类型,旨在收集用户的电子邮件地址。通过将input元素的type属性设置为"email",浏览器会自动...

    HTML5表单中新增的input输入类型1.pdf

    除了这些新类型,`&lt;input&gt;`元素还有其他增强,如`list`属性关联`&lt;datalist&gt;`元素提供预设选项,`multiple`属性允许在一个输入框中选择多个值,`pattern`属性允许自定义正则表达式进行复杂验证,`placeholder`属性为...

    HTML5表单中新增的input输入类型1案例.pdf

    这些新类型使得开发者能够更精确地控制用户输入的数据,同时也提供了更好的浏览器原生支持,减少了对JavaScript的依赖。以下是四个关键案例的详细说明: 1. **email类型**: `email`类型的`input`元素用于接收用户...

    HTML5(软件品牌)-1期 13 教学课件_单元5_HTML5的input属性.pdf

    在HTML5中,input元素不仅新增了多种输入类型,还增加了一些属性,以提供更丰富的功能和更好的用户体验。 1. autocomplete属性: autocomplete属性用于控制表单或输入字段的自动填充功能。当设置为"on"时,浏览器...

    HTML5学习教程.docx

    HTML5学习教程 HTML5是下一代的HTML标准,它提供了许多新的特性和...本教程详细介绍了HTML5的基本概念、新特性、浏览器支持、Input类型、表单元素和Canvas等方面的知识点,旨在帮助开发者更好地理解和应用HTML5技术。

    HTML5从入门到精通-中文学习教程.docx

    * 输入类型:HTML5提供了多种输入类型,例如email、url、tel等。 * 输入验证:HTML5的输入类型具有自动验证功能,例如邮箱格式验证等。 * 输入应用场景:HTML5的输入类型广泛应用于表单开发、用户信息收集等领域。 ...

    十四种不同类型的input字段文字输入效果

    在设计表单时,了解并正确应用这些`&lt;input&gt;`类型至关重要,它们可以帮助我们创建功能强大、用户友好的Web应用程序。在实际项目中,还可以结合JavaScript和CSS进行更复杂的交互和样式定制,提升页面的视觉效果和交互...

    Web-前端html+css从入门到精通 128. 表单扩展之新input控件.zip

    表单扩展之新input控件”着重讲解了HTML5中的新特性,特别是与表单相关的input类型,这些新输入控件极大地提升了用户体验和数据收集的效率。 首先,我们来看看HTML中的表单元素。表单是网页中用于用户输入信息的...

    HTML 5之表单新功能解析

    ### HTML 5之表单新功能解析 随着前端技术的不断发展与创新,HTML 5作为新一代的Web标准,为开发者提供了更多强大而便捷的功能。在众多改进中,表单功能的增强尤为突出,极大地提升了用户体验及开发效率。下面将...

    Html5程序设计基础教程(练习题参考答案)

    - HTML5新增了多种输入类型,如email(邮箱验证)、url(网址验证)、number(数值验证)、date(日期选择)等,提供内置验证功能。 - 文件处理方面,HTML5引入File API,允许用户选择和操作本地文件,如FileList...

    HTML5的新技术,可以使新手们多多了解HTML5的强大。

    - **增强的表单功能**:HTML5引入了多个新的表单输入类型,如`&lt;input type="email"&gt;`、`&lt;input type="url"&gt;`、`&lt;input type="number"&gt;`等,这些新增的类型不仅提高了用户输入的便利性,也加强了数据的有效性校验。...

    HTML5新特性1

    HTML5拥有多个新的表单输入类型,包括Number类型、Email类型、Url类型等。这些新特性提供了更好的输入控制和验证。 Number类型-常用属性: HTML5表单元素: HTML5表单元素提供了许多新的属性和方法,包括datalist...

    htm5入门 html5介绍 html5的新特性 css3

    HTML5对表单进行了重大改进,增加了多个新的输入类型,如 `email`、`url`、`number`、`range`、`date` 和 `search` 等,为用户提供更准确的输入控制,并简化了数据验证过程。例如: ```html E-mail: &lt;input type=...

    html5网站实例

    HTML5增强了表单处理能力,新增了`&lt;input&gt;`类型的`date`、`email`、`url`、`number`等,提高了输入验证的效率。此外,`&lt;form&gt;`标签中的`required`属性可以确保必填字段,`placeholder`属性则为输入框提供提示文本。 ...

    html5+教程

    - HTML5增加了新的表单输入类型,如email、url、date等,以及新的表单验证功能,提升用户体验。 这个“HTML5+教程”很可能是围绕这些主题展开,指导开发者如何使用HTML5来构建一个拍照上传应用,涵盖从用户选择...

    html5学习资料

    5. **更新的表单控件**:HTML5增加了新的表单输入类型,如`&lt;input type="calendar"&gt;`、`&lt;input type="date"&gt;`、`&lt;input type="time"&gt;`、`&lt;input type="email"&gt;`、`&lt;input type="url"&gt;`和`&lt;input type="search"&gt;`,...

Global site tag (gtag.js) - Google Analytics