表单元素及配合表单元素的其他元素

最新推荐文章于 2024-11-12 23:16:45 发布

the弄潮儿_

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量195

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/m0_52247852/article/details/113081670

版权

表单元素

一系列元素，主要用于收集用户数据

input元素

如果需要默认被选中的话，则需要使用 checked

输入框

type属性：输入框类型

type：text;普通文本输入框

type:password;密码框

type:data;日期选择框，有兼容性问题

<!-- 普通文本输入框 -->
  <input type="text" value="姓名" >
  <input type="text" placeholder="请输入账号">

  <!-- 密码框 -->
  <input type="password" placeholder="请输入密码">

  <!-- 日期选择框 -->
  <input type="date">

在这里插入图片描述

type:search;搜索框，有兼容性问题

tape:range; 滑块

type:number; 数字输入框，有兼容性问题

<!-- 搜索框 -->
  <input type="search">
  
  <!-- 滑块 -->
  <input type="range" min="1" max="5">

  <!-- 颜色选择 -->
  <input type="color">

  <!-- 数字输入框 -->
  <input type="number" min="10"  max="100" step="20">

在这里插入图片描述

type:radio; 单选框因为页面中可能会有许多单选框，因此需要通过name属性来告诉浏览器哪些单选框属于一组，从而来达到单选的目的

<!-- 单选框 -->
  <p>
    性别
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender">女
  </p>

在这里插入图片描述

type:checkbox;多选框

<!-- 多选框 -->
  <p>
    爱好：
    <input type="checkbox" checked>篮球
    <input type="checkbox">音乐
    <input type="checkbox">画画
    <input type="checkbox">游泳
  </p>

在这里插入图片描述

type:file; 表示选择文件

value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容时显示

input 元素可以制作按钮

当type值为reset、buttom、submit时，input表示按钮

<!-- 按钮 -->
  <p>
    <input type="button">
  </p>
  <p>
    <input type="reset">
  </p>
  <p>
    <input type="submit">
  </p>

在这里插入图片描述

select元素

下拉列表选择框
通常和option元素配合使用
如果多选的话，要加上 multiple

 <p>
    请选择你喜欢的主题
    <select name="" id="" multiple>
      <optgroup label="明星">
        <option>易烊千玺</option>
        <option>李易峰</option>
        <option>杨幂</option>
      </optgroup>
      <optgroup label="运动">
        <option>篮球</option>
        <option>网球</option>
        <option>羽毛球</option>
      </optgroup>
    </select>
  </p>

在这里插入图片描述

textarea元素

文本域，多行文本框
文本的行高可以通过设置 cols和rows来设置，也可以通过css来设置

<body>
  <p>
    请输入简介：
    <textarea name="" id="" cols="30" rows="10" placeholder="请输入简介"></textarea>
  </p>
</body>

在这里插入图片描述

表单状态

readonly属性：布尔属性，只读状态，不会改变表单显示样式

disabled:布尔属性，禁用状态，会改变表单显示样式，任何表单都可以用

配合表单元素的其他元素

label

普通元素，通常配合单选框和多选框使用

显式关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

隐式关联

<p>
   <!-- 显式关联 -->
   请选择性别：
   <input type="radio" name="gender" id="radmale">
      <label for="radmale">男</label>
   <input type="radio" name="gender" id="radfemale">
      <label for="radfemale">女</label>
 </p>

 <p>
   <!-- 隐式关联 -->
   <label>
     <input type="radio" name="gender">男
   </label>

   <label>
     <input type="radio" name="gender">女
   </label>
 </p>

datalist

数据元素

该元素本身不会显示到页面，通常用于和普通文本框配合

form元素（以后用的多）

通常情况下，会将整个表单元素，放置到form元素的内部，作用是当点提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器

form元素对开发静态页面没有什么意义

fieldset 元素

表单分组

<body>
  <div>
    <h1>修改用户信息</h1>
    <fieldset>
      <legend>账号信息</legend>
      <p>
        用户账户
        <input type="text" value="12344" readonly>
      </p>
      <p>
        用户密码
        <input type="password" disabled>
      </p>
    </fieldset>
    <fieldset>
      <legend>个人信息</legend>
      <p>
        姓名
        <input type="text">
      </p>
      <p>
        城市
        <select name="" id="">
          <option value="">上海</option>
          <option value="">西安</option>
          <option value="">河南</option>
          <option value="">广州</option>
          <option value="">哈尔滨</option>
        </select>
      </p>
    </fieldset>
  </div>