HTML5-新的表单控件

已于 2024-05-08 21:02:07 修改
阅读量144 收藏 2
点赞数 8
文章标签： html5
于 2024-05-08 16:47:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73839298/article/details/138575532
版权
  • color：颜色选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        选择你喜欢的颜色： <input type="color" name="" id="" value="" placeholder="">
    </form>

</body>
</html
  • date：选择日期年月日，不包括时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        请选您的出生日期年月日:<input type="date" id="date" name="date">
    </form>

</body>
</html

​​​​​​​

  • datetime-local：允许用户选择特定的日期年月日和时间（UTC时间）datetime已废弃。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        请选择您的出生日期年月日和时间：<input type="datetime-local" id="datetime-local" name="datetime-local">
    </form>

</body>
</html
  • email：输入电子邮件地址，会自动验证格式是否正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        电子邮件：<input type="email" id="email" name="email">
    </form>

</body>
</html
  • month：选择月份和年份

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        请选择您的出生年月：<input type="month" id="month" name="month">
    </form>

</body>
</html
  • number：输入数字，可以设置最小值（min）和最大值（max）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        数字：<input type="number" id="number" name="number" min="1" max="10">
    </form>

</body>
</html
  • range：创建一个滑动条，允许用户在一定范围内选择一个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        <input type="range" id="range" name="range" min="0" max="10">
    </form>

</body>
</html
  • search：搜索域/搜索控件，与 text 类似，但语义上表明它用于搜索。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        搜索:<input type="search" id="search" name="search">
    </form>

</body>
</html
  •  tel：输入电话号码，浏览器不会验证电话号码的格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        电话：<input type="tel" id="tel" name="tel">
    </form>

</body>
</html
  • time：选择时间，小时和分钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        时间：小时和分钟：<input type="time" id="time" name="time">
    </form>

</body>
</html
  •  url：输入网址，会自动验证格式是否正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        请输入完整的网址：<input type="url" id="url" name="url">
    </form>

</body>
</html
  •  week：选择周，年月周

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <form>
        <input type="week" id="week" name="week">
    </form>

</body>
</html

Jealous_-
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5-input表单控件调用代码_html5_表单_input_代码_控件_
09-29
总结，HTML5的`input`表单控件极大地丰富了网页表单的设计和功能，使得开发者可以更方便地创建符合用户需求的交互界面。通过学习和掌握这些新特性，我们可以提升网站的用户体验，同时减少后端验证的压力。
html怎么实现年月日的选择,利用select实现年月日三级联动的日期选择效果【推荐】...
weixin_39875028的博客
06-10 6092
前面的话关于select控件，可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践，下面将对日期选择效果进行详细介绍规划默认情况下，年、月、日分别由3个select控件组成，id分别为sel1，sel2，sel3。它们且所包含的option[0]的值，分别为'年'、'月'、'日'年份范围为1900-2100，月份范围为1-12，天的范围为1-31年份范围、月份范围是不变的。而天...
WEB前端概述（一）
ad12456的博客
05-10 350
web前端简要
html和原生js实现年月或者日期选择并设置默认值
最新发布
qq_57064821的博客
03-23 767
最近实习做了一个考勤系统的页面，要和php的后端相结合，要求使用原生的html和js，不使用项目管理的方式编写，但是统计界面需要实现一个用户选择年月，根据用户的选择来展示这个月的考勤数据的功能。从上边设置默认值的js代码中可以看出，赋值使用的是.val()函数，最开始我使用的是innerText， 是不生效的，毕竟input不是div，所以innerText是不生效的。接下来上代码：（我这里是在html中使用了vue文件引入，所以有一些vue的写法）2、month：可以选取年月两级。
HTML时间日期选择器
热门推荐
zhu1243961271的博客
10-22 1万+
时间日期选择器
html 实时年月日,HTML input date年月日日期输入控件简介说明
weixin_36161071的博客
06-07 9054
摘要:下文讲述html5中年月日日期输入控件的简介说明,如下所示:input type=’date’ 年月日输入控件简介说明input type=’date’功能:当我们在文本域中使用type=’date’时,此时在支持html5的浏览器中就会出现一个年月日的输入框，如下图所示:html之input_type_date标签示例说明input type=’date’ 具有以下特性：1.input t...
mobiscroll-手机端html5控件
07-03
在HTML5中，虽然原生的表单元素提供了基本的交互功能，但在移动端，为了提供更好的用户体验，开发者往往需要依赖第三方库或插件，如Mobiscroll。这个控件通过优化的触控处理和自定义样式，可以提供比原生HTML5输入更...
vue v-model表单控件绑定详解
01-21
v-model 指令在表单控件元素上创建双向数据绑定，下面一一进行示例解释。 1、v-model 双向绑定文本 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title&...
某马机构----表单和表单控件.rar
09-28
1. **文本输入框**（`<input type="text">`）：这是最基础的表单控件，允许用户输入文本。你可以通过`name`属性来标识这个输入框，方便服务器处理数据。 2. **密码输入框**（`<input type="password">`）：与文本...
使用HTML开发商业网站-表单控件-input课件.pptx
07-10
在开发商业网站时，HTML 表单控件是构建用户交互界面的关键组成部分，尤其是对于登录、注册和其他数据收集功能。`<input>` 控件是 HTML 表单中最核心的元素之一，它可以实现多种功能，包括文本输入、密码输入、单选...
html5 多种日期选择框
12-10
多种日期选择框，模拟手机app日期选择框的多种效果
HTML日期选择控件
12-27
简洁的HTML日期选择控件，给input添加获得焦点事件即可触发控件
使用HTML开发商业网站-表单控件-select课件.pptx
07-10
在使用HTML开发商业网站时，表单控件是不可或缺的一部分，它们允许用户输入、选择或提交数据。在众多的表单元素中，`<select>` 控件用于创建下拉列表，也就是我们常说的下拉菜单。这个控件常用于提供一系列预设的...
HTML5基础知识-HTML5表单.pptx
05-06
`<form>`元素可以包含各种表单控件，如输入字段、按钮等。`action`属性指定了表单数据提交的目标URL，例如服务器端的处理脚本。 2. **输入元素**： `<input>`标签是最常用的表单控件，可以根据`type`属性的值创建...
使用HTML开发商业网站-表单控件-textarea课件.pptx
07-10
在使用HTML开发商业网站的过程中，表单控件是不可或缺的一部分，它们用于收集用户输入的数据。在众多的表单元素中，`<textarea>` 控件扮演着重要的角色，它允许用户输入多行文本，例如用于评论、留言或者填写长篇...
html做一个年份月份天数选择器,怎样实现一个datePicker（日期选择）组件
weixin_39637919的博客
06-04 1370
百度前端技术学院上有一个任务，要实现一个日期选择组件，本文由此而来~看看需求组件默认一直呈显示状比抖朋要插支一圈不者地态通插新，都次过是宗现制的前搭待个断前能绿和过某种方式选择年、月，选择了年月后，日期列表做直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如数相应切换通用能境战求道，重件开又是正易里是了些之框过单击某个具体的日期进行日期选求圈分件圈浏第用代是水刚道。的它还择组第干种用大是使处来...
html下拉选之年份选择
qq_31798731的博客
03-23 1万+
这是之前的一个选择日期的需求，挺少做这些的，存个底，方便到时候拿出来用用 请选择 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 请选择 1 2 3 4 5 6 7 8 9 10 1
年月日三联动下拉框(无刷新)
luyesql的专栏
10-10 1786
WebForm2 function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); for (var i = (y-30); i document.form1.YYYY.options.add(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值