h5增强表单---input

h5增强表单---input

min="0" max="100":最小值0,最大值100

step:步长

添加一个name值方便提交后端

html 复制代码
<!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>Document</title>
</head>
<body>
    <form action="">
        <div>
            颜色选择:
            <input type="color" name="color" id="">
        </div>
        <div>
            邮箱:<input type="email" name="email">
        </div>
        <div>
            url地址:<input type="url" name="url">
        </div>
        <div>
            电话号码(手机端使用):<input type="tel">
        </div>
        <div>
            滑块效果:<input type="range"  name="range" min="100" max="500" value="100">
        </div>
        <div>
            数字类型<input type="number" min="0" max="100" value="4" step="3" name="age">
        </div>
        <div>
            搜索:<input type="search">
        </div>
        <div>
            日期选择<input type="date">
            月份选择<input type="month">
            周数选择<input type="week">
            <input type="datetime-local" name="datename">
        </div>
        <input type="submit">
    </form>
    
</body>
</html>

代码运行效果

相关推荐
Deepsleep.18 分钟前
react和vue的区别之一
javascript·vue.js·react.js
WEI_Gaot18 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员22 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai22 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙22 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子22 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125024 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll24 分钟前
面试中被问到过的前端八股(四)
前端·面试
zqlcoding25 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
海底火旺25 分钟前
破解二维矩阵搜索难题:从暴力到最优的算法之旅
javascript·算法·面试