表单控件梳理、、表格的 -- 额外添加

最新推荐文章于 2024-10-18 18:45:22 发布

qdcxy_lj

最新推荐文章于 2024-10-18 18:45:22 发布

阅读量90

点赞数

分类专栏： css+h5进阶文章标签：前端

本文链接：https://blog.csdn.net/qdcxy_lj/article/details/123829927

版权

css+h5进阶专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细梳理了前端开发中常见的表单控件使用及表格的额外功能添加，包括各种输入组件、交互设计以及表格的扩展功能，如筛选、排序、分页等，旨在提升用户界面的交互体验。

摘要由CSDN通过智能技术生成

<form action="">
        手机号：<input type="tel" name="a">
        文本框：<input type="text" placeholder="默认提示" name="ma" pattern="\d{6}" autocomplete="off">
        复选框：<input type="checkbox" name="g">
        单选框：<input type="radio" name="t">
        <select name="" id="" name="f">
            <option value=上哈"">上哈</option>
            <option value="韩国">韩国</option>
            <option value="背景">背景</option>
        </select>
        邮箱：<input type="email" name="u" multiple>
        颜色：<input type="color" autofocus name="b">
        滑块：<input type="range" name="c">
        网址：<input type="url" name="q">
        文件：<input type="file" name="d" multiple>
        搜索：<input type="search" name="s">
        日期：<input type="date">
        月：<input type="month">
        周：<input type="week">
        时间：<input type="time">
        日期：<input type="datetime-local">
        <input type="submit" value="提交">
    </form>

表格

    <input type="text"><br>
    <input type="password"><br>
    数字框<input type="number" min="0" max="100" step="5" value="27"><br>
    单选框<input type="radio"><br>单选框<input type="radio" checked><br>
    复选框<input type="checkbox"><br>
    日期框<input type="date"><br>
    星期<input type="week"><br>
    色板<input type="color"><br>
    手机号<input type="tel"><br>
    时间框<input type="time"><br>
    邮箱框<input type="tiemail"><br>
    网址框<input type="url"><br>
    文件选择框<input type="file"><br>
    文件选择框多选<input type="file" multiple="multiple"><br>

    不可见<input type="hidden"><br>
    只读：<input type="text" readonly value="12366555"><br>
    禁用框<input type="text" disabled value="84512">br
    必填框<input type="text" required><br>
    隐藏<input type="hidden" required><br>
    自动获取焦点框<input type="text" autofocus><br>

    <select name="" id="">
        <option value="">吃鸡</option>
        <option value="" selected>王者</option>
        <option value="">元神</option>
        <option value="">上海</option>
    </select><br>
    你需要做的其他特殊说明：<textarea name="" id="" cols="30" rows="10"></textarea>
    <input type="submit">



    <input type="submit">