input type属性

男娘i 2022-04-02 04:46 233阅读 0赞

<input type="text" autofocus pattern="^\d*[a-z]+" required placeholder="请输入数字开头字母结束格式"/>
    必填，自动补全，自动获取焦点，填入的内容必须满足正则表达式
    
    <input type="button" value="button"/>
    按钮
    
    <input type="checkbox" checked/>
    多选框
    
    <input type="radio" value="true" checked/>
    单选框
    
    <input type="date"/>
    
    
    <input type="datetime" required/> 貌似没啥特殊的，就是一个input输入框
    <input type="datetime-local"/>
    
    
    <input type="email" required placeholder="请输入邮箱格式"/>
    邮箱格式 默认必须有个@
    
    <input type="file" accept="image/*"/>
    选择文件，accept指定文件类型，选择时，只能选择指定的文件类型
    
    <input type="number" min="10" max="50" step="3"/>
    数字输入框，最右带上下箭头，可加减，最小10 最大50 每次加减变化3，点击submit时会验证数值
    
    <input type="image" src="./../img/card.png"/>
    图片
    
    <input type="month" placeholder="month"/>
    
    
    <input type="week" placeholder="week"/>
    
    
    <input type="time" placeholder="time"/>
    
    
    <input type="range" placeholder="range" value="100" min="51" max="500" step="50" οnchange="handleChange(event)"/>
     
    onchange 可以监听到更新的数值， 默认100 最小51 最大500 拉动一次变化50
    
    <input type="url" placeholder="请输入网址格式"/>
    必须是网址格式
    
    <input type="search" autocomplete="on" placeholder="search has close button"/>
     跟普通input比，多了一个情况的小叉叉
    
    <input type="tel" placeholder="电话号码 键盘九宫格数字"/>
    在手机上有效，弹出的键盘是九宫格数字键盘
    
    <input type="color" οnchange="handleChange(event)"/>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70][]

可以选择颜色，通过onchange可以监听到选中的颜色，但是只有左侧选中的，或者右侧选中并添加自定义颜色后才有效

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]: /images/20220402/69574fad743d4173a0a10a5c2fe9e5e5.png