html 5中的新特性之强化表单元素及属性

落日映苍穹つ 2021-10-24 01:32 237阅读 0赞

[html 5中的新特性之强化表单元素及属性][html 5]

之前我们判断用户提交的是否是Email 的时候，往往使用js 进行判断，但在html5中可以有新的方式进行判断而且更简单

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Email-Validator</title>
    </head>
    <body>
    <form action="#">
        <input type="email"name="email" id="email">
        <button type="submit">submit</button>
        </form>
    
    </body>
    </html>

大家看效果

![1365962-20180510202753369-552145573.png][]

这是我们输入的不正确的电子邮件地址

他会自动进行向你提示

此外在input 的后面添加required就可以禁止填入的值为空了

<input required type="email"name="email" id="email">

效果如下：

![1365962-20180510203415475-1545263174.png][]

posted on 2018-05-10 20:36  [雪地里的Alan][Alan] 阅读( ...) 评论( ...) [ 编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/white-the-Alan/p/9021601.html

[html 5]: https://www.cnblogs.com/white-the-Alan/p/9021601.html
[1365962-20180510202753369-552145573.png]: /images/20211023/ad019eaaea5d4396b355428157d3690b.png
[1365962-20180510203415475-1545263174.png]: /images/20211023/e54c7d50ed8d493c9bf42df809e44868.png
[Alan]: https://www.cnblogs.com/white-the-Alan/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=9021601

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关前端学习之HTML5 表单相关元素和属性

1.form元素： > 属性： > 1.\\action：\\指定单击表单内的确认按钮，该表单被提交到哪个地址 > 2.\\method：\\指定提交表单时发送何

落日映苍穹つ/ 2023年05月22日 08:45/ 0 赞/ 14 阅读

相关 html5学习(表单新属性)

温故知新，以下是我以前写的html5的案例，从电脑中翻出来了，算是知识复习和回顾吧！有图有代码！ ![watermark_type_ZmFuZ3poZW5naGVpdGk

分手后的思念是犯贱/ 2022年12月30日 15:59/ 0 赞/ 171 阅读

相关 html5新增属性----表单元素新属性、input新属性、地理定位

HTML5 表单元素 `< datalist >` 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 `< keygen >` 规定

Bertha 。/ 2022年11月30日 04:05/ 0 赞/ 266 阅读

相关 HTML5 新特征：新表单元素属性

H5的表单新特性可以分为两大类: （1）input 的 type 值 <table> <thead> <tr> <th>属性</th> <th>描

我不是女神ヾ/ 2022年10月11日 01:23/ 0 赞/ 32 阅读

相关 html元素 —— 表单元素及实用属性

一、常用表单元素 <form>:定义供用户输入的表单。 <fieldset>:定义域。即输入区加有文字的边框。 <legend>：定义域的标题，即边框上的文字。 <la

红太狼/ 2022年09月25日 12:25/ 0 赞/ 167 阅读

相关 HTML5之表单元素的使用

<!DOCTYPE html> <meta charset=utf-8 /> <title>forms</title> <style type="text/css"

我不是女神ヾ/ 2022年09月19日 12:03/ 0 赞/ 299 阅读

相关 html5表单新特性

html5表单新特性学习的笔记，记录备忘。效果图： ![Center][] 代码： <!DOCTYPE html> <html

雨点打透心脏的1/2处/ 2022年08月19日 11:08/ 0 赞/ 171 阅读

相关 html5表单新特性

<html lang=""> <meta charset="utf-8"> <!-- <meta http-equiv="refresh

绝地灬酷狼/ 2022年06月15日 07:29/ 0 赞/ 270 阅读

相关 html5新特性contenteditable 属性更容易实现动态表单

介绍html5新特性的一个属性： contenteditable 作用域全局。所有的块标签都可以，例如：span、p、div、td等标签。但是，不可以作用域<br/>

灰太狼/ 2021年12月18日 07:29/ 0 赞/ 440 阅读

相关 html 5中的新特性之强化表单元素及属性

[html 5中的新特性之强化表单元素及属性][html 5] 之前我们判断用户提交的是否是Email 的时候，往往使用js 进行判断，但在html5中可以有新的方式进行判断

落日映苍穹つ/ 2021年10月24日 01:32/ 0 赞/ 238 阅读