经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
表单与列表在HTML与CSS中是这么玩的 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:51　　对本文有异议

表单应用场景实例：

  1.     <form action="1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.             <input type="text" name="title">
  5.             <input type="text" name="content">
  6.         </fieldset>
  7.         <button>提交</button>
  8.     </form>

 

表单描述标签的使用：

  1.     <!-- 方式1 -->
  2.     <form action="1.php" method="POST">
  3.         <fieldset>
  4.             <legend>cyy表单</legend>
  5.             <label for="title">标题</label>
  6.             <input type="text" name="title" id="title">
  7.             <hr>
  8.             <label for="content">内容</label>
  9.             <input type="text" name="content" id="content">
  10.         </fieldset>
  11.         <button>提交</button>
  12.     </form>
  13.  
  14.     <hr>
  15.  
  16.     <!-- 方式2 -->
  17.     <form action="1.php" method="POST">
  18.         <fieldset>
  19.             <legend>cyy表单</legend>
  20.             <label>标题
  21.                 <input type="text" name="title2" id="title2">
  22.             </label>
  23.             
  24.             <hr>
  25.             <label>内容
  26.                 <input type="text" name="content2" id="content2">
  27.             </label>
  28.             
  29.         </fieldset>
  30.         <button>提交</button>
  31.     </form>

 

表单约束属性：

  1.     <form action="1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.             <label>标题
  5.                 <input type="text" name="title" id="title" required value="标题默认值" size="40">
  6.                 <small>请输入标题</small>
  7.             </label>
  8.             
  9.             <hr>
  10.             <label>内容
  11.                 <input type="text" name="content" id="content" required placeholder="请输入内容" maxlength="3">
  12.             </label>
  13.             
  14.         </fieldset>
  15.         <button>提交</button>
  16.     </form>

 

表单访问限制技巧：

  1.     <form action="1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.             <label>标题
  5.                 <input type="text" name="title" id="title" value="标题默认值" readonly>
  6.                 <small>请输入标题</small>
  7.             </label>
  8.             
  9.             <hr>
  10.             <label>内容
  11.                 <input type="text" name="content" id="content" disabled>
  12.             </label>
  13.             
  14.         </fieldset>
  15.         <button>提交</button>
  16.     </form>

 

常用字段类型扩展：

  1.     <form action="1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.             <input type="text" value="文本" >
  5.             <hr>
  6.             <input type="password" value="密码" >
  7.             <hr>
  8.             <input type="email" value="邮箱" >
  9.             <hr>
  10.             <input type="url" value="url网址" >
  11.             <hr>
  12.             <!-- 移动端输入时会调出拨号键盘 -->
  13.             <input type="tel" value="tel" >
  14.             <hr>
  15.             <input type="number" value="数值" >
  16.             
  17.         </fieldset>
  18.         <button>提交</button>
  19.     </form>

 

隐藏与表单提交技巧：

  1.     <form action="1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.             <input type="hidden" name="token" value="12345" >
  5.             <hr>
  6.             
  7.         </fieldset>
  8.         <button>提交</button>
  9.         <button type="submit">submit可以提交表单</button>
  10.         <button type="button">普通按钮，无法提交表单</button>
  11.         <!-- name值也可以提交过去 -->
  12.         <input type="submit" value="submit" name="submit">
  13.     </form>

 

表单验证使用总结：

可以使用优秀的js表单验证库

html自带的表单验证：

  1.     <form action="1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.             <input type="text" pattern="[a-z]{3}" required oninvalid="valid('用户名必须，且为3位数英文字母')">
  5.             <hr>
  6.             
  7.         </fieldset>
  8.         <button>提交</button>
  9.     </form>
  10.  
  11.     <script>
  12.         function valid(message){
  13.             alert(message);
  14.         }
  15.     </script>

 

大文本与列表框技巧：

  1.     <form action="1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.             <textarea name="content" id="content" cols="30" rows="10" placeholder="请输入内容">这是默认值</textarea>
  5.             <hr>
  6.  
  7.             <select name="" id="">
  8.                 <option value="1">item1</option>
  9.                 <option value="2">item2</option>
  10.             </select>
  11.  
  12.             <!-- 设置允许多选 -->
  13.             <select name="res[]" id="" multiple>
  14.                 <option value="1">item1</option>
  15.                 <option value="2" selected size="30">item2</option>
  16.             </select>
  17.  
  18.             <!-- 分组 -->
  19.             <select name="" id="">
  20.                 <optgroup label="group1">
  21.                     <option value="1">item1</option>
  22.                     <option value="2">item2</option>
  23.                 </optgroup>
  24.  
  25.                 <optgroup label="group2">
  26.                     <option value="11">item11</option>
  27.                     <option value="22">item22</option>
  28.                 </optgroup>
  29.             </select>
  30.             
  31.         </fieldset>
  32.         <button>提交</button>
  33.     </form>

 

选项框标准打开方式：

  1.     <form action="http://localhost/1.php" method="POST">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.  
  5.             <!-- 单选 -->
  6.            <input type="radio" name="sex" id="boy" value="1">
  7.            <label for="boy">boy</label>
  8.            <input type="radio" name="sex" id="girl" checked value="2">
  9.            <label for="girl">girl</label>
  10.  
  11.            <hr>
  12.  
  13.             <!-- 复选，需要设置为数组格式 -->
  14.             <input type="checkbox" name="sex[]" id="boy" value="1">
  15.             <label for="boy">boy</label>
  16.             <input type="checkbox" name="sex[]" id="girl" checked value="2">
  17.             <label for="girl">girl</label>
  18.             
  19.         </fieldset>
  20.         <button>提交</button>
  21.     </form>

1.php

  1. <?php
  3. var_dump($_POST);

结果

 

 

文件上传：

  1.     <form action="http://localhost/1.php" method="POST" enctype="multipart/form-data">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.  
  5.             <!-- 文件 -->
  6.            <input type="file" name="image" id="image">
  7.  
  8.            <hr>
  9.  
  10.            <!-- 多文件 -->
  11.            <input type="file" name="images[]" id="images" multiple>
  12.  
  13.            <hr>
  14.  
  15.            <!-- 限制上传格式1 -->
  16.            <input type="file" name="file1[]" id="file1" accept="image/jpeg,image/png,image/psd">
  17.  
  18.            <hr>
  19.  
  20.            <!-- 限制上传格式2，扩展名形式 -->
  21.            <input type="file" name="file1[]" id="file1" accept=".jpg,.png,.psd">
  22.             
  23.         </fieldset>
  24.         <button>提交</button>
  25.     </form>

 

时期与时间表单：

  1.     <form action="http://localhost/1.php" method="POST" enctype="multipart/form-data">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.  
  5.             <input type="date" name="date" id="date">
  6.             <input type="time" name="time" id="time">
  7.             <input type="week" name="week" id="week">
  8.  
  9.             <hr>
  10.  
  11.             <input type="date" min="2020-10-10" max="2020-12-12" step="5">
  12.             <input type="datetime-localhost">
  13.             
  14.         </fieldset>
  15.         <button>提交</button>
  16.     </form>

不过还是建议使用第三方组件

 

搜索表单与datalist数据列表：

  1.     <form action="http://localhost/1.php" method="POST" enctype="multipart/form-data">
  2.         <fieldset>
  3.             <legend>cyy表单</legend>
  4.  
  5.             <input type="search" list="mydata">
  6.             <datalist id="mydata">
  7.                 <option value="1">item1</option>
  8.                 <option value="2">item2</option>
  9.                 <option value="3">item3</option>
  10.             </datalist>
  11.         </fieldset>
  12.         <button>提交</button>
  13.     </form>

 

表单历史数据自动提示：

  1.     <!-- action不加地址，会刷新当前页 -->
  2.     <form action="" method="POST">
  3.         <fieldset>
  4.             <legend>cyy表单</legend>
  5.  
  6.             <input type="text" autocomplete="on" name="title1">
  7.             <input type="text" autocomplete="off" name="title2">
  8.         </fieldset>
  9.         <button>提交</button>
  10.     </form>

 

三种列表项使用：

  1.     <style>
  2.         .style1{
  3.             list-style:none;
  4.         }
  6.         .style2{
  7.             list-style-position:inside;
  8.             list-style-type:circle;
  9.         }
  10.  
  11.     </style>
  12.     <!-- 有序列表 -->
  13.     <ol start="1" class="style1">
  14.         <li>1</li>
  15.         <li>2</li>
  16.         <li>3</li>
  17.     </ol>
  18.  
  19.     <!-- 无序列表 -->
  20.     <ul class="style2">
  21.         <li>1</li>
  22.         <li>2</li>
  23.         <li>3</li>
  24.     </ul>
  25.  
  26.     <!-- 自定义列表 -->
  27.     <dl>
  28.         <dt>描述标题</dt>
  29.         <dd>描述内容1</dd>
  30.         <dd>描述内容2</dd>
  31.         <dd>描述内容3</dd>
  32.     </dl>

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13933857.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号