欢迎光临
我的个人博客网站

表单与列表在HTML与CSS中是这么玩的 -cyy

表单应用场景实例:

    <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <input type="text" name="title">             <input type="text" name="content">         </fieldset>         <button>提交</button>     </form>

 

表单描述标签的使用:

    <!-- 方式1 -->     <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <label for="title">标题</label>             <input type="text" name="title" id="title">             <hr>             <label for="content">内容</label>             <input type="text" name="content" id="content">         </fieldset>         <button>提交</button>     </form>      <hr>      <!-- 方式2 -->     <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <label>标题                 <input type="text" name="title2" id="title2">             </label>                          <hr>             <label>内容                 <input type="text" name="content2" id="content2">             </label>                      </fieldset>         <button>提交</button>     </form>

 

表单约束属性:

    <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <label>标题                 <input type="text" name="title" id="title" required value="标题默认值" size="40">                 <small>请输入标题</small>             </label>                          <hr>             <label>内容                 <input type="text" name="content" id="content" required placeholder="请输入内容" maxlength="3">             </label>                      </fieldset>         <button>提交</button>     </form>

 

表单访问限制技巧:

    <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <label>标题                 <input type="text" name="title" id="title" value="标题默认值" readonly>                 <small>请输入标题</small>             </label>                          <hr>             <label>内容                 <input type="text" name="content" id="content" disabled>             </label>                      </fieldset>         <button>提交</button>     </form>

 

常用字段类型扩展:

    <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <input type="text" value="文本" >             <hr>             <input type="password" value="密码" >             <hr>             <input type="email" value="邮箱" >             <hr>             <input type="url" value="url网址" >             <hr>             <!-- 移动端输入时会调出拨号键盘 -->             <input type="tel" value="tel" >             <hr>             <input type="number" value="数值" >                      </fieldset>         <button>提交</button>     </form>

 

隐藏与表单提交技巧:

    <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <input type="hidden" name="token" value="12345" >             <hr>                      </fieldset>         <button>提交</button>         <button type="submit">submit可以提交表单</button>         <button type="button">普通按钮,无法提交表单</button>         <!-- name值也可以提交过去 -->         <input type="submit" value="submit" name="submit">     </form>

 

表单验证使用总结:

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

html自带的表单验证:

    <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <input type="text" pattern="[a-z]{3}" required oninvalid="valid('用户名必须,且为3位数英文字母')">             <hr>                      </fieldset>         <button>提交</button>     </form>      <script>         function valid(message){             alert(message);         }     </script>

 

大文本与列表框技巧:

    <form action="1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>             <textarea name="content" id="content" cols="30" rows="10" placeholder="请输入内容">这是默认值</textarea>             <hr>              <select name="" id="">                 <option value="1">item1</option>                 <option value="2">item2</option>             </select>              <!-- 设置允许多选 -->             <select name="res[]" id="" multiple>                 <option value="1">item1</option>                 <option value="2" selected size="30">item2</option>             </select>              <!-- 分组 -->             <select name="" id="">                 <optgroup label="group1">                     <option value="1">item1</option>                     <option value="2">item2</option>                 </optgroup>                  <optgroup label="group2">                     <option value="11">item11</option>                     <option value="22">item22</option>                 </optgroup>             </select>                      </fieldset>         <button>提交</button>     </form>

 

选项框标准打开方式:

    <form action="http://localhost/1.php" method="POST">         <fieldset>             <legend>cyy表单</legend>              <!-- 单选 -->            <input type="radio" name="sex" id="boy" value="1">            <label for="boy">boy</label>            <input type="radio" name="sex" id="girl" checked value="2">            <label for="girl">girl</label>             <hr>              <!-- 复选,需要设置为数组格式 -->             <input type="checkbox" name="sex[]" id="boy" value="1">             <label for="boy">boy</label>             <input type="checkbox" name="sex[]" id="girl" checked value="2">             <label for="girl">girl</label>                      </fieldset>         <button>提交</button>     </form>

1.php

<?php  var_dump($_POST);

结果

表单与列表在HTML与CSS中是这么玩的 -cyy

 

 

文件上传:

    <form action="http://localhost/1.php" method="POST" enctype="multipart/form-data">         <fieldset>             <legend>cyy表单</legend>              <!-- 文件 -->            <input type="file" name="image" id="image">             <hr>             <!-- 多文件 -->            <input type="file" name="images[]" id="images" multiple>             <hr>             <!-- 限制上传格式1 -->            <input type="file" name="file1[]" id="file1" accept="image/jpeg,image/png,image/psd">             <hr>             <!-- 限制上传格式2,扩展名形式 -->            <input type="file" name="file1[]" id="file1" accept=".jpg,.png,.psd">                      </fieldset>         <button>提交</button>     </form>

 

时期与时间表单:

    <form action="http://localhost/1.php" method="POST" enctype="multipart/form-data">         <fieldset>             <legend>cyy表单</legend>              <input type="date" name="date" id="date">             <input type="time" name="time" id="time">             <input type="week" name="week" id="week">              <hr>              <input type="date" min="2020-10-10" max="2020-12-12" step="5">             <input type="datetime-localhost">                      </fieldset>         <button>提交</button>     </form>

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

 

搜索表单与datalist数据列表:

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

 

表单历史数据自动提示:

    <!-- action不加地址,会刷新当前页 -->     <form action="" method="POST">         <fieldset>             <legend>cyy表单</legend>              <input type="text" autocomplete="on" name="title1">             <input type="text" autocomplete="off" name="title2">         </fieldset>         <button>提交</button>     </form>

 

三种列表项使用:

    <style>         .style1{             list-style:none;         }          .style2{             list-style-position:inside;             list-style-type:circle;         }      </style>     <!-- 有序列表 -->     <ol start="1" class="style1">         <li>1</li>         <li>2</li>         <li>3</li>     </ol>      <!-- 无序列表 -->     <ul class="style2">         <li>1</li>         <li>2</li>         <li>3</li>     </ul>      <!-- 自定义列表 -->     <dl>         <dt>描述标题</dt>         <dd>描述内容1</dd>         <dd>描述内容2</dd>         <dd>描述内容3</dd>     </dl>

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 表单与列表在HTML与CSS中是这么玩的 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏