好程序员前端分享HTML5 智能表单

简介: 好程序员前端分享HTML5智能表单新增输入类型Type=“email” 限制用户必须输入email类型Type=“url” 限制用户必须输入url类型Type=“range” 产生一个滑动条表单Type=“search” 产生一个搜索意义的表单Type=“color” 生成一个颜色选择的表单Ty...

好程序员前端分享HTML5智能表单

新增输入类型
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
input类型设置email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
url类型专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。mail地址。
例:http://www.baidu.com”>
Number类型专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字,具有min、max、step的属性。 
例:
range类型是用来只允许输入一段范围内数值的文本框,它具有min属性与max属性,及step属性,可以指定每次拖动的步幅。
例:  
min 最小值
max 最大值
step 数字间隔
(date, month, week, time, datetime,datetime-local)拥有多个可供选取日期和时间的新输入类型。
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
例:Search:输入的是搜索的关键字,与type=“text” 基本上一样。
Color:用来选取颜色。
output:定义不同类型的输出,如计算结果的输出,或脚本的输出。
注:必须从属于某个表单。即,必须将它书写在表单内部
Output标签IE不支持
对新元素样式的使用:
注意,跟 input 标签设置样式一样,但是要设置标签中局部的样式不能实现。如改变日历的背景色,颜色框的按钮效果,等,这些都不可以实现。
表单新属性
1)、Datalist :选项列表例:
 
  
  
  

提示:option 元素永远都要设置 value 属性。
2.属性placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个。required属性:验证输入不能为空list属性:结合datalist元素使用autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。只有三种:on/off/""。on可是显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示:
3.自动验证1)、required可以应用在大多数输入元素上(除了隐藏元素和图片),在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。2)、pattern将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例:3)、 min、max、step:为包含数字或日期的 input 类型规定限定(约束)
max: 最大值
min: 最小值
step: 数字间隔 
例:4、取消验证可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证5.Multiple:可以输入一个或多个值,每个值之间用逗号分开
例:
还可以应用于file

相关文章
|
14天前
|
移动开发 前端开发 数据可视化
前端HTML:构建网页的基石
前端HTML:构建网页的基石
16 0
|
18天前
HTML_表单标签
HTML_表单标签
16 0
|
5天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
5天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
7天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
7天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
7天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
7天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
7天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
7天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。