h5表单增强标签

最新推荐文章于 2024-09-08 00:44:44 发布

Xiao祁的博客

最新推荐文章于 2024-09-08 00:44:44 发布

阅读量214

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42459672/article/details/99337085

版权

本文详细介绍了HTML5中各种表单输入类型，包括数字输入、滑动器、搜索框、日期选择器、颜色选择器、网址输入等，同时探讨了增强属性如placeholder、autofocus、max、min、minlength和maxlength的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

邮箱:

        <p>
            <!--数字-->
            年龄: <input type="number" />
        </p>
        
        <p>
            <!--滑动器-->
            滑动器: <input type="range" />
        </p>
        
        <p>
            <!--搜索框-->
            搜索: <input type="search" />
        </p>
        
        
        <p>
            <!--日期的框-->
            日期: <input type="date" />
        </p>
        
        
        <p>
            <!--日期的框-->
            日期: <input type="week" />
        </p>
        
        <p>
            <!--日期的框-->
            日期: <input type="month" />
        </p>
        
        <p>
            <!--颜色-->
            颜色: <input type="color" />
        </p>
        <p>
            <!--网址-->
            网址: <input type="url" />
        </p>
        <p>
            <input type="submit" value="提交" />
            <input type="reset" value="清空" />
        </p>
        
    </form>
    
    <hr />
    <!--
        H5中表单增强的属性
        
        placeholder
        
        autofocus:自动的获得焦点
        
        
        max：最大值
        
        min：最小值
        
        minlength:最小长度
        
        maxlength:最大长度
        
    -->
    <form>
        
        <p>
            <!--  autofocus: 自动获得焦点 -->
            账号:<input type="text"  placeholder="手机号/邮箱/账号" autofocus/>
            
        </p>
        
        <p>
            密码:<input type="number" max="130" min="0" />
        </p>
        <p>
            密码:<input type="password"  minlength="2" maxlength="4" />
        </p>
        <p>
            <input type="submit" value="提交" />
            <input type="reset" value="清空" />
        </p>
    </form>
</body>