HTML标签新特性之input标签type属性值大全

关注重工黑大帅，学习不迷路

一、代码

<form action="success.html">
    <!--html4input类型属性值-->
    
        请输入文字：<input type="text" placeholder="文本框">
        <input type="submit" value="提交"><br>
        
        请输入密码：<input type="password" placeholder="密码框">
        <input type="submit" value="提交"><br>
        
        请进行单选：<input type="radio" placeholder="单选框">
        <input type="button" value="提交"><br>
        
        请进行多选：<input type="checkbox" placeholder="多选框" checked="checked">
        <input type="submit" value="提交"><br>
        
        请选择文件上传：<input type="file" placeholder="文件上传框">
        <input type="submit" value="提交"><br>
        
        信息重置：<input type="text" placeholder="文本框">
        <input type="reset" value="重置"><br>
        
        隐藏提交按钮：<input type="text" placeholder="文本框">
        <input type="hidden" value="隐藏"><br>
        
        请选择图片：<input type="image" placeholder="图片框">
        <input type="submit" value="提交"><br>
        
    <!--html4input类型属性值end-->
</form>

二、实现结果：

三、代码

<form action="success.html">
    <!--html5input类型新属性值-->
    
        请输入搜索的内容：<input type="search" placeholder="搜索框">
        <input type="submit" value="提交"><br>
        
        请输入邮件：<input type="email" placeholder="邮件框">
        <input type="submit" value="提交"><br>
        
        请选择日期：<input type="date" placeholder="日期框">
        <input type="submit" value="提交"><br>
        
        请选择日期时间：<input type="datetime-local" placeholder="本地时间框">
        <input type="submit" value="提交"><br>
        
        请选择时区：<input type="datetime" placeholder="世界时区框">
        <input type="submit" value="提交"><br>
        
        请选择颜色：<input type="color" placeholder="颜色框">
        <input type="submit" value="提交"><br>
        
        请输入数字：<input type="number" placeholder="数字框">
        <input type="submit" value="提交"><br>
        
        请输入电话：<input type="tel" placeholder="电话框">
        <input type="submit" value="提交"><br>
        
        请输入地址：<input type="url" placeholder="地址框">
        <input type="submit" value="提交"><br>
        
        滑动条：<input type="range" placeholder="滑动条">
        <input type="submit" value="提交"><br>
        
        请选择星期：<input type="week" placeholder="星期框">
        <input type="submit" value="提交"><br>
        
        请选择月份：<input type="month" placeholder="月份框">
        <input type="submit" value="提交"><br>
        
        请选择时间：<input type="time" placeholder="时间框">
        <input type="submit" value="提交"><br>
        
    <!--html5input类型新属性值end-->
</form>

四、结果显示

PS：

!--input控件新增表单元素output,该元素必须结合form标签使用-->

<form oninput="x.value=a.value">
    选择一个数字:
    <input type="range" name="a" value="0">
    <output name="x">0</output>
</form>

结果显示：

<!--input控件新增表单元素datalist-->

<form action="success.html">
文本：<input type="text" list="list" placeholder="请输入文字">
<datalist id="list">
    <option value="重工黑大帅1"></option>
    <option value="重工黑大帅2"></option>
    <option value="重工黑大帅3"></option>
    <option value="重工黑大帅4"></option>
    <option value="重工黑大帅5"></option>
</datalist>
</form>

结果显示：

关注重工黑大帅，学习不迷路