form表单元素

最新推荐文章于 2025-02-28 19:01:08 发布

原创最新推荐文章于 2025-02-28 19:01:08 发布 · 310 阅读

CC 4.0 BY-SA版权

input标签

        明文输入框 <input type="text">

        暗文输入框 <input type="password">  加密操作

        单选框 <input type="radio" name="xx" value="xxx" checked>  checked 默认选中互斥操作：给每一个单选框设置相同的name属性，还必须设置相同的值。

        多选框 <input type="checkbox" name="xxx" value="xxx"> 多选框默认选中 checked

        提交按钮 <input type="submit">  作用: 将表单中已经填写好的数据, 提交到远程服务器（action属性：服务器地址）【若想将表单数据提交给后台，表单元素需要有name属性】

       普通按钮 <input type="button" value="xxx">

       图片按钮 <input type="image" src="">

       重置按钮 <input type="reset" value="xx"> 清空表单中已经填写好的数据

       邮箱 <input type="email">   可以自动校验输入的内容是否符合邮箱的格式

       域名 <input type="url"> 可以自动校验输入的内容是否是URL地址

       数字 <input type="number"> 输入框中只能输入数字

       时间 <input type="date"> 可以通过日历来选择时间

       颜色 <input type="color"> 可以通过取色板来选择颜色

label标签
<label for="account">
     账号:
</label>
<input type="text" id="account">
        1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定。
      2.要想让输入框和文字绑定在一起, 那么我们可以使用label标签。
      3.绑定的格式:
              3.1将文字利用label标签包裹起来。
              3.2给输入框添加一个id属性。
              3.3在label标签中通过for属性和输入框中的id进行绑定即可。

select标签

格式：
<select>
      <optgroup label="分组名称">
          <option>列表数据</option>
      </optgroup>
  </select>
作用: 用于定义下拉列表
【注】： 1.下拉列表不能输入内容, 但是可以直接在列表中选择内容。
2.可以通过给option标签添加一个selected属性来指定列表的默认值。
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类。

textarea标签

作用: 定义一个多行输入框
格式:
<textarea></textarea>
【注】：1.默认情况下输入框可以无限换行。
            2.默认情况下输入框有自己的宽度和高度。
              3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入。
            4.默认情况下输入框是可以手动拉伸的。

fieldset组件

作用：fieldset组件用于在一个web表单中对多个控件和标签进行分组
格式:
<form action="">
    <fieldset>
        <legend>请登录</legend>
        账号:<input type="text"><br>
        密码:<input type="password">
        <input type="submit">
    </fieldset>
</form>

datalist标签

        <input type="text" list="xxx">

        <datalist id="xxx">

                <option>带选项内容</option>

        </datalist>

        作用: 给输入框绑定待选项

        操作：input的list属性值与datalist的id值相等。

progress标签

格式：
<progress value="70" max="100">70%</progress>
        progress表示任务的完成情况，常用于进度条。
        max 定义进度元素所要求的任务的工作量，默认值为1 。
        value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。