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

news2025/11/1 1:33:03

文章目录

- 表单应用场景实例讲解
- 表单描述标签的使用 label
- 表单约束属性详解
- 表单访问限制技巧
- 常用字段类型扩展
- 隐藏与表单提交技巧
- 表单验证使用总结
- 大文本与列表框技巧详解
- 选项框标准打开方式
- 文件上传的正确打开方式
- 时期与时间表单项使用详解
- 搜索表单与DATALIST数据列表
- 表单历史数据自动提示 autocomplete
- 三种列表项使用详解

表单应用场景实例讲解

<form action="1.php" method="post">
  <fieldset>
    <legend>表单</legend>
    <input type="text" name="title" />
    <input type="text" name="content" />
  </fieldset>

  <button>提交</button>
</form>

表单描述标签的使用 label

<form action="1.php" method="post">
  <fieldset>
    <legend>表单</legend>
    <label for="title">标题</label>
    <input type="text" name="title" id="title" />
    <hr />
    <label>
      介绍
      <input type="text" name="content" />
    </label>
  </fieldset>

  <button>提交</button>
</form>

表单约束属性详解

required size placeholder value

<form action="1.php" method="post">
  <fieldset>
    <legend>表单</legend>
    <label for="title">标题</label>
    <!-- required 必填字段  size限制长度 一般不常用  通常用css来设置-->
    <input type="text" name="title" id="title" required size="50" />
    <hr />
    <label>
      网址
      <input type="text" name="url" placeholder="必须有协议如http" />
      <!-- 提示用placeholder  或者用small 然后再用css做一下 -->
    </label>

    <label> 来源 <input type="text" name="source" value="后盾人" /> </label>
  </fieldset>

  <button>提交</button>
</form>

表单访问限制技巧

readonly

disabled

<input
  readonly
  disabled
  value="后盾人"
  type="text"
  name="title"
  id="title"
  required
  size="50"
/>

常用字段类型扩展

<form action="1.php" method="post">
   <fieldset>
     <legend>表单</legend>
     <label>
       电话
       <input type="tel" />
     </label>
     <hr />
     <label>
       密码
       <input type="password" />
     </label>
     <hr />
     <label>
       邮箱
       <input type="email" />
     </label>
     <hr />
     <label>
       数值
       <input type="number" />
     </label>
   </fieldset>
 </form>

隐藏与表单提交技巧

<form action="1.php" method="post">
  <fieldset>
    <legend>表单</legend>
    <label>标题
      <input type="hidden" name="token" value="ssdsfdssf" />
    </label>
  </fieldset>

  <input type="submit" value="保存提交" name="put" />
  <input type="submit" value="save" name="save" />
  <button>提交</button>
</form>

表单验证使用总结

<body>
<form action="1.php" method="post">
  <fieldset>
    <legend>表单</legend>
    <label>用户名
      <input
        type="text"
        pattern="[A-z]{5}"
        name="username"
        oninvalid="valid('用户名不能小于5位')"
      />
    </label>
  </fieldset>
  <button>提交</button>
</form>

<script>
  function valid(message) {
    alert(message);
  }
</script>
</body>

大文本与列表框技巧详解

在这里插入图片描述

<form action="1.php" method="post">
  <fieldset>
    <legend>表单</legend>
    <label>
      介绍
      <textarea
        name="info"
        cols="30"
        rows="10"
        placeholder="请输入介绍信息"
      >
        这是默认值
      </textarea>
    </label>

    <label>
      栏目
      <select name="category[]">
        <optgroup label="游戏">
          <option value="1">原神</option>
          <option value="2">纸嫁衣</option>
        </optgroup>
        <optgroup label="开发">
          <option value="1" selected>MYSQL</option>
          <option value="2">LINUX</option>
        </optgroup>
      </select>
    </label>
  </fieldset>
  <button>提交</button>
</form>

选项框标准打开方式

<form action="1.php" method="post">
   <fieldset>
     <legend>表单</legend>
     <input type="radio" checked name="sex" id="boy" value="boy" />
     <label for="boy">男孩</label>
     <input type="radio" name="sex" id="girl" value="girl" />
     <label for="girl">女孩</label>
     <hr />
     <input type="checkbox" name="register[]" id="email" value="email" />
     <label for="email">邮箱</label>
     <input type="checkbox" name="register[]" id="mobile" value="mobile" />
     <label for="mobile">手机</label>
   </fieldset>
   <button>提交</button>
 </form>

在这里插入图片描述

文件上传的正确打开方式

<form action="1.php" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>表单</legend>
    <input type="file" name="image[]" accept=".png,.jpg" multiple />
  </fieldset>
  <button>提交</button>
</form>

在这里插入图片描述

时期与时间表单项使用详解

实际开发中当然是使用第三方组件了！

<input type="date" name="date" min="2020-02-12" max=""/>
<input type="time" name = "time" />
<input type="week" name = "week"/>
<input type="datetime-local"/>

搜索表单与DATALIST数据列表

<input type="search" name="search" list="lesson"/>

<datalist id="lesson">
 <option value="MYSQL">数据库管理</option>
 <option value="PHP">PHP</option>
 <option value="XXX">XXX</option>
</datalist>

表单历史数据自动提示 autocomplete

<input type="text" autocomplete="off"/>
<input type="text" autocomplete="on"/>

三种列表项使用详解

在这里插入图片描述

<body>
<style>
  .style1 {
    list-style-type: lower-roman;
  }
</style>

<ol start="1" class="style1">
  <li>php</li>
  <li>css</li>
</ol>

<ul class="style1">
  <li>php</li>
  <li>css</li>
</ul>

<dl>
  <dt>公司产品</dt>
  <dd>vivo</dd>
  <dd>oppo</dd>
  <dd>meizu</dd>
  <dt>公司位置</dt>
  <dd>上海</dd>
  <dd>天津</dd>
  <dd>广州</dd>
</dl>
</body>