【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )

于 2023-04-19 18:23:26 发布
阅读量1.8k 收藏 11
点赞数 3
分类专栏： HTML 文章标签： html5 前端 html 表单 H5新增表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shulianghan/article/details/130245927
版权

文章目录





一、HTML5 新增 input 表单


HTML5 新增 input 表单 :

  • 邮箱输入表单 : 必须输入邮箱 , 如果输入格式错误 , 提交时会在对话框中报错 ;
	<input type="email" />

在这里插入图片描述

  • URL 输入表单 : 只能输入网址 , 格式错误会在对话框中报错 ;
	<input type="url" />

在这里插入图片描述

  • 日期输入表单 : 右侧的下拉菜单选择日期 ; 如果在手机中打开 , 会弹出手机中自带的日期选择对话框 ;
	<input type="date" />

在这里插入图片描述

  • 时间输入表单 : 右侧的下拉菜单选择时间 ;
	<input type="time" />

在这里插入图片描述

  • 月份输入表单 : 右侧的下拉菜单选择月份 ;
	<input type="month" />

在这里插入图片描述

  • 周日期输入表单 : 右侧的下拉菜单选择周数 ;
	<input type="week" />

在这里插入图片描述

  • 数字输入表单 : 无法输入非数字的内容 ;
	<input type="number" />

在这里插入图片描述

  • 手机号码输入表单 : 可以输入任意字符 , 没有校验 ;
	<input type="tel" />

在这里插入图片描述

  • 搜索框 : 点击右侧的 x 号 , 可以快速清除输入内容 ;
	<input type="search" />

在这里插入图片描述

  • 颜色选择表单 : 点击该表单 , 弹出调色盘 ;
	<input type="color" />

在这里插入图片描述


在手机中打开该网页时 , 弹出的选择对话框会是手机中的原生对话框 ;

在手机中打开该网页时 , 会根据输入类型 , 弹出指定类型的键盘 ;





二、HTML5 新增 input 表单完整代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 新增 input 表单</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <form action="">
        <li>邮箱 : <input type="email" /></li>
        <li>网址 : <input type="url" /></li>
        <li>日期 : <input type="date" /></li>
        <li>时间 : <input type="time" /></li>
        <li>月份 : <input type="month" /></li>
        <li>周数 : <input type="week" /></li>
        <li>数字 : <input type="number" /></li>
        <li>手机 : <input type="tel" /></li>
        <li>搜索 : <input type="search" /></li>
        <li>颜色 : <input type="color" /></li>

        <!-- 表单域的提交按钮 用于提交整个表单域 -->
        <input type="submit" value="提交">
    </form>
</body>

</html>

显示效果 :
在这里插入图片描述

韩曙亮
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5利用约束验证API来检查表单的输入数据的代码实例
01-19
HTML5对于表单有着极大程度的优化，无论是语义，小部件，还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”，但这绝不应该成为使你停滞不前的原因，况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正试着使用这些表单的新功能时，我保证你会爱上它。如果说唯一的缺陷，就是提示框的样式是浏览器默认的，你无法改变，好吧，如果你相信浏览器厂商的设计师的审美水平的话（我相信他们的设计水平比绝大部分普通人要好，如果不考虑风格兼容的话），抓紧学就对了！ 原生验证 input type HTML5中为数据格式验证提供了很多原生
H5手机号码格式化输入
10-24
文件没有依据第三方插件，手写控制号码的格式化输入 *** **** ****，控制灵活，没有副作用。
django之从html页面表单获取输入的数据实例
01-20
本文主要讲解如何获取用户在html页面中输入的信息。 1.首先写一个自定义的html网页 login.html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>test</title> </head> <body> <form method=post action={% url 'check' %}> <input type=text name=name placeholder=your username><br> <input type=passwo
HTML表单标记教程(3):输入标记
12-13
HTML表单标记教程,这节主要讲解如何在网页中使用INPUT标记,主要介绍INPUT标记的属性的使用. 输入标记<input>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。 基本语法 01 <Form> 02 <input name="field＿name" type="type＿name"> 03 </Form> 语法解释 <input>标记的属性如下表所示 属性 描述 name 域的名称 type 域的类型 在type属性中，包含以下属性值 type属性值 描述
深入理解html表单输入监听
12-14
今天看到一篇有关input事件的博文，一时兴起便整理下相关的资料。 事件： function changeVal(value){ console.log($(value).val())} onchange：onchange事件是在前后内容改变，并且失去焦点之后才会触发。 <input type="text" value="" onchange="changeVal(this)"> oninput：oninput事件则会在value改变时就触发。 <input type="text" value="" oninput="changeVal(this)"> 还有一个onpropertych
Email-Input:一个完整的邮箱地址输入框
05-12
Email-Input 一个完整的邮箱地址输入框
HTML5--新增表单和表单属性
cmy741741的博客
06-15 539
点击提交后，格式不符合会弹出提示框
HTML5新增input表单
溯琳的博客
04-27 104
HTML5新增input表单input表单表单属性 input表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" co
02---HTML5新增input表单
weixin_45321331的博客
06-17 88
HTML5新增了很多表单属性,非常重要 一个简单得表单演示: <form action=""> 用户名: <input type="text"> <input type="submit" value="提交"> </form> HTML5常见表单属性总结 type表单属性 作用 email 限制用户输入为Email类型 url 限制用户输入为url地址 date 限制用户输入为日期类型 time 限
vue表单验证之禁止input输入框输入空格
01-18
测试小姐姐让输入框不允许输入空格，安排。  刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端...
HTML入门
weixin_44411458的博客
04-17 2229
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Html和CSS的关系</title> <style type="text/css"> h1{ font-size:12px;//文字大小 color:#930;
html输入邮箱的文本框,自动生成邮箱号并填入input输入框的实现方法
weixin_30800249的博客
06-09 1781
我们在做网站表单的时候可能会用到自动填入邮箱，这里就教大家一个自动生成邮箱号并填入input输入框的实现方法。这里以自动生成一个QQ邮箱并填入为例，先看看效果演示；具体实现请看下面代码：*邮箱：点击刷新看效果functionrandomPassword(size){varseed=newArray('1','2','3','4','5','6','7','8','9');//数组se...
input输入框验证邮箱、身份证号码、手机号码、密码等正则
热门推荐
程序猿小白的博客
11-01 1万+
// 验证邮箱 <form action=""> 　　输入：<input type="text" name="idcard" id="idcard" placeholder="请输入邮箱"> 　　<input type="button" value="验证" onclick="check();"> </form> <script>...
html邮箱代码怎么写_如何制作一个简单的HTML登录页面（附代码）
weixin_39895684的博客
11-02 4807
几乎每个网站都会有登录页面，那你知道如何写HTML登录页面吗？这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。实例：制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下：HTML部分：程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）​zhuanlan.zhihu.com&lt...
HTML5 的Input 类型
Kill_paradise的博客
07-30 1914
HTML5 的Input 类型 一、文本类 　　Text，文本 　　Url，网络地址 　　Password，密码 　　Email，邮箱地址 二、操作类 　　Checkbox ，复选框 　　Radio，单选框 　　File，上传文件 　　Number，数值 　　Range，百分百滑动条 三、功能类 　　Button，按钮 　　Image，图片提交按钮 　　Submit，文字提交按钮 　　Reset，重置表单 四、Date类 　　Date，年月日控件 　　...
HTML5表单新增
m0_51024444的博客
07-01 89
HTML5表单新增
HTML5 新增表单元素
houyanhua1的专栏
03-20 558
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; form { width:
HTML5--新增input类型、表单属性和元素
weixin_44348052的博客
07-08 837
并不是所有浏览器都支持新增的input类型，但若是不被支持仍可以显示为常规的文本域。规定输入域的选项列表，当用户在自动完成域中开始输入时，将显示可填内容的选项列表。以下代码段中，当input被选中后会自动提供datalist中的可选列表。 在使用过程中，我们使用的list属性来绑定。首先，该元素已经从web标准中删除了。提供验证用户的可靠方法。...
html保存表单提交后input输入值
最新发布
05-14
当表单提交后，输入框（input）中的输入值会被包含在表单数据中一起提交到服务器端。如果需要在客户端本地保存输入框的输入值，可以使用一些前端技术，如JavaScript或localStorage。 使用JavaScript可以获取输入框的输入值，然后将其保存在变量中，或者将其赋值给其他元素或属性。例如，可以使用以下代码将输入框（id为input1）的输入值保存在变量中： ```javascript var inputValue = document.getElementById("input1").value; ``` 如果需要在浏览器关闭后仍然保留输入值，可以使用localStorage将值存储在本地。例如，可以使用以下代码将输入框（id为input1）的输入值保存在localStorage中： ```javascript localStorage.setItem("input1Value", document.getElementById("input1").value); ``` 这样，当页面重新加载时，可以使用以下代码获取输入框的输入值： ```javascript var inputValue = localStorage.getItem("input1Value"); ``` 需要注意的是，使用JavaScript或localStorage保存输入框的输入值只是在客户端本地进行的操作，不会将数据提交到服务器端。如果需要将数据保存到服务器端，需要在表单提交时将数据发送到服务器端进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值