html5部分新增表单元素的使用

最新推荐文章于 2021-08-06 10:56:34 发布
最新推荐文章于 2021-08-06 10:56:34 发布
阅读量220 收藏 1
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43260038/article/details/104795630
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表单</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<form action="success.html" method="post">
    <div class="all">
        <div class="left_images">
            <img src="images/left_image.jpg" alt="">
        </div>
        <div class="content">
            <h3>学员信息登记表</h3>
            <div>
                <label align="right">用户登录名：</label>
                <input type="email" disabled value="myemail@163.com">
                <span>（不能修改，只能查看）</span>
            </div>
            <div>
                <label align="right">&nbsp&nbsp&nbsp真实姓名：</label>
               <!-- <input type="text" placeholder="例如：王明" onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">-->
                <input type="text" placeholder="例如：王明" pattern="[\u4e00-\u9fa5]{2,5}" required>
                <span>（必须填写，只能输入汉字）</span>
            </div>
            <div>
                <label align="right">&nbsp&nbsp&nbsp真实年龄：</label>
                <!--<input type="number" value="" pattern="[1-9][0-9]{0,1}" required>-->
                <input type="number" value="" min="0" max="150" class="input" required>
                <span>（必须填写）</span>
            </div>
            <div>
                <label align="right">&nbsp&nbsp&nbsp出生日期：</label>
                <input type="date" class="input" required>
                <span>（必须填写）</span>
            </div>
            <div>
                <label align="right">&nbsp&nbsp&nbsp电子邮箱：</label>
                <input type="email" placeholder="123456@126.com" required>
                <span>（必须填写）</span>
            </div>
                <div>
                <label align="right">&nbsp&nbsp&nbsp身份证号：</label>
                <input type="text" pattern="^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$" required>
                <!--<input type="text" pattern="([0-9]|X|x)$" required>-->
                <span>（必须填写，能够以数字、字母x结尾的短身份证号）</span>
            </div>
            <div>
                <label align="right">&nbsp&nbsp&nbsp手机号码：</label>
                <input type="tel" pattern="^(0|86|17951)?1[0-9]{10}" required>
                <span>（必须填写）</span>
            </div>
            <div>
                <label align="right">&nbsp&nbsp&nbsp个人主页：</label>
                <input type="url" list="index" placeholder="http://www.itcast.cn">
                <datalist id="index">
                    <option value="http://www.baidu.com"></option>
                    <option value="http://www.souhu.com"></option>
                    <option value="http://www.qq.com"></option>
                </datalist>
                <span>（请选择网址）</span>
            </div>
            <div>
                <label align="right">&nbsp&nbsp&nbsp幸运颜色：</label>
                <input type="color" class="color">
                <span>（请选择你喜欢的颜色）</span>
            </div>
            <input type="submit" value="提交" class="submit">
            <input type="reset" value="重置" class="reset">
        </div>
        <div class="bird">
            <img src="images/bird.jpg" alt="">
        </div>
    </div>
</form>
</body>
</html>
时光飞逝，岁月依然
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5新增的表单元素和属性实例解析
09-28
主要为大家介绍了HTML5新增的表单元素和属性,具有一定的参考价值！需要的朋友可以参考下
HTML表单（正则表达式验证）
weixin_45750195的博客
02-29 3790
HTML部分 定义了一个9行3列的表格，通过部分行列的合并，然后将表单的input部件嵌入到表格的单元格中，然后设置单元格的宽高来实现表格的对齐。表单部件中使用了H5新增的颜色选择器color、设置日期data、电子邮件email和required等部件，使得输入更规范有效。 <html> <head> <meta charset="utf-8" /> ...
正则表达式校验姓名为汉字
热门推荐
sunshine的博客
11-28 2万+
在表单中输入姓名时，校验姓名必须为汉字的校验。校验规则如下： validateName = (rule, value, callback) =&gt; { let reg=/^[\u2E80-\u9FFF]+$/;//Unicode编码中的汉字范围 if (value &amp;&amp; value.length &gt; 0) { if(!reg.test(...
html5表单实例元素,HTML5新表单元素的图文实例-
weixin_31881651的博客
07-08 152
这一篇介绍html5新增的表单元素和表单属性。首先先说一个html5中表单新增的一个功能，在我们之前的html中，表单元素必须放在form元素所包含的里面，在html5中，可以把他们写在页面上的任何一个地方，然后给该元素增加一个form属性，form属性的值为form表单的id，如下：[html] view plain copy在form元素里面的表单元素可以不用添加form属性，如果你想利用fo...
html5新的表单元素
最爱喝怡宝的博客
08-06 73
datalist 有点类似于select标签，不过datalist需要搭配input元素使用 datalist 规定输入框的选项列表，option 代表选项 keygen 作用是提供一种验证用户的可靠方法 output 用于不同类型的输出，比如计算机的计算 datalist 标签，元素规定输入域的选项列表，需要和input结合一起使用 <input list="city"> <datalist id="city"> <option value...
html5表单及新增的改良元素详解
09-27
本文将详细解析HTML5中新增的表单元素及其改良特性。 1. **form属性**： 在HTML5中，表单内的元素可以通过`form`属性与特定的表单关联，即使这些元素不在表单标签内部。例如，第8行的`<textarea>`通过`form="test...
HTML5中form表单的新增属性.ppt
07-02
HTML5中form表单的新增属性.ppt
HTML5新增属性与表单元素
06-06
该文件集齐的HTML5的新增属性和新增表单元素，文档中含有响应的代码演示。
黑客帝国动态特效代码
qq_43260038的博客
09-12 2155
黑客帝国动态特效代码（可以用自己想用的那些字来形成向下的流动型光柱） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTE
js实现3D粒子酷炫动态旋转特效
qq_43260038的博客
09-12 2054
js实现3D粒子酷炫旋转特效（效果比较酷炫，希望大家能够喜欢） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=
使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）
qq_43260038的博客
04-01 1920
使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）(如果要绘制其他图形，做一点小改动就行了) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style ...
玻璃上的雨滴（动态特效）
qq_43260038的博客
09-13 962
玻璃上的雨滴（动态特效） 动态变化中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="">
使用jquery对表格的样式及内容进行更改
qq_43260038的博客
04-28 810
使用jquery对表格的样式及内容进行更改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="scripts/jquery.js" type="text/...
canvas画布js代码实现大风车的动画
qq_43260038的博客
03-29 744
通过js代码在canvas画布中实现大风车的动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大风车</title> <style type="text/css"> #canvas...
动态生成灯笼骨架（从一个很小的内部结构慢慢的从下方一根一根的为它添加外部骨架，使其成型）
qq_43260038的博客
09-20 607
动态生成灯笼骨架（从一个很小的内部结构慢慢的从下方一根一根的为它添加外部骨架，使其成型） 动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META
自己仿的一个网页，比较适合小白入门
qq_43260038的博客
03-11 591
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超星首页</title> <link rel="stylesheet" href="css/style.css"> </head>...
一些简单的css,html,js笔记分享给大家，希望能够帮助到大家
qq_43260038的博客
12-09 494
css&amp;amp;html 1.切片后导出web格式导出图片 2.tinypng.com(压缩图片的网站) 3.&amp;lt;img src=&quot;image/图片名.jpg(图片地址)“alt&quot;图像说明”&amp;gt;(alt只有在图片加载失败时才出现)（alt利于对图片进行搜索） 4.overflow:hidden;(超出隐藏) 5.网站首页(超链接)(_black在新窗口打开页面)（网址要写全） 6.a{ t...
纯css画小黄人
qq_43260038的博客
09-20 357
纯css画小黄人 小黄人截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <MET
纯JavaScript实现带刺的花动态缩放（一朵带刺的花从小到大，再从大到小的缩放）
qq_43260038的博客
09-20 318
纯JavaScript实现带刺的花动态缩放（一朵带刺的花从小到大，再从大到小的缩放） 动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META N
HTML5新特性：input元素的新增属性与表单处理
本章主要探讨HTML5中input元素的新增属性，以及HTML5表单和文件处理的新特性。在HTML5中，input元素增加了如autocomplete、autofocus和form等新属性，使得表单交互更加便捷和灵活。 在HTML5表单中，`autocomplete`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值