构建静态页面 之 [ 表单 ]

不羁的心 提交于 2019-12-04 09:30:55

表单

表单元素

<form>元素

  • 表示设置表单
  • action属性 - 设置接收表单的指定服务器端的地址路径
  • method属性 - 表示发送给服务器端的方式

    1. get属性值(默认值) - 将提交的数据添加到地址栏中进行提交(有限制,不安全)
    2. post属性值 - 将提交的数据绑定在表单中进行提交(没有限制,相对安全)
  • name属性 - 提交表单时要设置name属性,不然无法提交表单
<body>
<!--
     form元素 - 表示设置表单
     * action属性 - 设置接收表单的指定服务器端的地址路径
     * method属性 - 表示发送给服务器端的方式
      * get属性值(默认值) - 将提交的数据添加到地址栏中进行提交(有限制,不安全)
      * post属性值 - 将提交的数据绑定在表单中进行提交(没有限制,相对安全)
     * name属性 - 提交表单时要设置name属性,不然无法提交表单
 -->
<form action="#" method="post">
    <input type="text" name="txt">
    <input type="submit">
</form>
</body>

输入框

<input>元素

  • 表示设置表单中的搜索框
  • type属性 - 表示定义什么类型的输入框

    1. text属性值 - 文本框
    2. password属性值 - 密码框
    3. email属性值 - 邮件输入框(会有格式要求)
    4. url属性值 - 网址输入框(会有格式要求)
    5. number属性值 - 定义数字控件(只能输入数字)
<body>
<!--
     input元素 - 表示设置表单中的搜索框
      * type属性 - 表示定义什么类型的输入框
       * text属性值 - 文本框
       * password属性值 - 密码框
       * email属性值 - 邮件输入框(会有格式要求)
       * url属性值 - 网址输入框(会有格式要求)
       * number属性值 - 定义数字控件(只能输入数字)
       * search - 搜索框(在移动端浏览器有效)
       * tel - 电话框(在移动端浏览器有效)
 -->
<form action="#">
    <input type="text">
    <input type="password">
    <input type="email">
    <input type="url">
    <input type="number">
    <input type="search">
    <input type="tel">
</form>
</body>

输入框的属性

  • value属性 - 可以用来 设置 或 获取 输入框中的数据内容
  • placeholder属性 - 可以提供使用输入框的相关信息
  • autofocus属性 - 可以自动获取焦点,不用点击输入框就可以先选择输入框
  • disabled属性 - 表示当前输入框不可用
  • readonly属性 - 表示当前输入框只能读,不能输入内容
<form action="#">
    <!--
         value属性 - 可以用来 设置 或 获取 输入框中的数据内容
         placeholder属性 - 可以提供使用输入框的相关信息
         autofocus属性 - 可以自动获取焦点,不用点击输入框就可以先选择输入框
         disabled属性 - 表示当前输入框不可用
         readonly属性 - 表示当前输入框只能读,不能输入内容
     -->
    <input type="text" value="输入内容">
    <input type="text" placeholder="输入用户名">
    <input type="text" autofocus>
    <input type="text" disabled>
    <input type="text" readonly>
</form>
</body>

表单控件

<input>元素 - 可以设置表单中的控件

  • type属性 - 定义控件的类型
  1. date属性值 - 定义日期控件
  2. month属性值 - 定义月份控件
  3. week属性值 - 定义周期控件
  4. color属性值 - 定义选择颜色的控件
<body>
<form action="#">
    <!--
        <input>元素 - 可以设置表单中的控件
        * type属性 - 定义控件的类型
         * date属性值 - 定义日期控件
         * month属性值 - 定义月份控件
         * week属性值 - 定义周期控件
         * color属性值 - 定义选择颜色的控件
         * rang属性值 - 定义滑动条控件
     -->
    <input type="date">
    <input type="month">
    <input type="week">
    <input type="time">
    <input type="color">
    <input type="range">
</form>
</body>

按钮

<input>元素 - 可以设置表单中按钮,用于实现提交表单、或其他功能

  • type属性 - 设置按钮的类型
  1. submit属性值 - 设置提交按钮(提交表单)
  2. reset属性值 - 设置重置按钮(重置输入框中的内容)
  3. button属性值 - 设置普通按钮

<button>元素 - 表示设置按钮

  • 该元素不是表单中的组件
  • 该元素如果被使用在表单中,也具有提交表单的功能
<body>
<form action="#">
    <!--
        <input>元素 - 可以设置表单中按钮,用于实现提交表单、或其他功能
         * type属性 - 设置按钮的类型
          * submit属性值 - 设置提交按钮(提交表单)
          * reset属性值 - 设置重置按钮(重置输入框中的内容)
          * button属性值 - 设置普通按钮
           * 普通按钮没有特殊显示,可以通过value属性来设置
     -->
    <input type="submit">
    <input type="reset">
    <input type="button" value="按钮">
    <!--
        <button>元素 - 表示设置按钮
        * 该元素不是表单中的组件
        * 该元素如果被使用在表单中,也具有提交表单的功能
     -->
    <button>按钮</button>
</form>
</body>

图像组件

<input>元素 - 可以定义图像组件

  • type属性 - 设置图像组件
  1. image属性值 - 定义图像组件
  2. src属性 - 引入图像的路径
  • 通过图像组件引入的图片具有提交表单的作用
<body>
<form action="#">
    <!--
        <input>元素 - 可以定义图像组件
         * type属性 - 设置图像组件
          * image属性值 - 定义图像组件
          * src属性 - 引入图像的路径
         * 通过图像组件引入的图片具有提交表单的作用
     -->
    <input type="image" src="imgs/180731.jpg">
</form>
</body>

单选框和多选框

  • 单选框 - type属性 的 radio属性值 表示设置单选框
  • 多选框 - type属性 的 checkbox属性值 表示设置多选框
  • 通过 name属性 将多个多选框分为一组
  • checked属性 - 表示默认被选择项
<body>
<form action="#">
    <!--
         单选框 - type属性 的 radio属性值 表示设置单选框
         * 通过 name属性 将多个单选框分为一组
         * checked属性 - 表示默认被选择项
     -->
    <input type="radio" name="input-rad" checked>我是谁
    <input type="radio" name="input-rad">我在那
    <input type="radio" name="input-rad">我要干啥

    <br>

    <!--
         多选框 - type属性 的 checkbox属性值 表示设置多选框
         * 通过 name属性 将多个多选框分为一组
         * checked属性 - 表示默认被选择项
     -->
    <input type="checkbox" name="inout-che">手机
    <input type="checkbox" name="inout-che" checked>电脑
    <input type="checkbox" name="inout-che">游戏机
</form>
</body>

文件域

文件域 - 表示允许用户在页面中打开选择本地文件、上传本地文件

  • accept属性 - 设置当前接收文件的类型
  • multiple属性 - 可以同时接收多个文件
  • enctype属性 - 设置提交表单时的方式
  1. application/x-www-form-urlencoded属性值(默认值) - 表示以数据的方式提交表单
  2. multipart/form-data属性值 - 表示将表单以文件的方式提交(在文件域中使用时可以实现文件上传)
  • 实现文件上传
  1. enctype属性的属性值只能为 multipart/form-data
  2. method属性的属性值只能为 post
<body>
<!--
     文件域
     * 允许用户在页面中打开选择本地文件、上传本地文件
     * accept属性 - 设置当前接收文件的类型
     * multiple属性 - 可以同时接收多个文件
     * enctype属性 - 设置提交表单时的
     方式
      * application/x-www-form-urlencoded属性值(默认值) - 表示以数据的方式提交表单
      * multipart/form-data属性值 - 表示将表单以文件的方式提交(在文件域中使用时可以实现文件上传)

     * 实现文件上传
      * enctype属性的属性值只能为 multipart/form-data
      * method属性的属性值只能为 post
 -->
<form action="#" method="post" enctype="multipart/form-data">
    <input type="file" accept="image/jpeg" multiple>
    <input type="submit">
</form>
</body>

文本域和隐藏域

  • <textarea>元素 - 表示表单中的文本域
  1. cols属性 - 表示文本域中的列
  2. rows属性 - 表示文本域中的行
  • 隐藏域 - 通过type属性的 hidden属性值设置
  1. 在页面中没有任何显示效果
<body>
<form action="#">
    <!--
        textarea元素 - 表示表单中的文本域
         * cols属性 - 表示文本域中的列
         * rows属性 - 表示文本域中的行
     -->
    <textarea cols="30" rows="10"></textarea>

    <br>

    <!--
        隐藏域 - 通过type属性的 hidden属性值设置
         * 在页面中没有任何显示效果
     -->
    <input type="hidden">
</form>
</body>

下拉列表

  • <select>元素 - 表示定义表单中的下拉列表
  1. multiple属性 - 可以将单选列表变成多选列表
  2. size属性 - 表示多选列表的显示个数
  • <option>元素 - 表示下拉列表中的选项
  1. selected属性 - 表示当前列表中默认被选中的选项
  • <optgroup>元素 - 另一种多选列表,可以对选项进行分类
<body>
<form action="#">
    <!--
         select元素 - 表示定义表单中的下拉列表
          * multiple属性 - 可以将单选列表变成多选列表
          * size属性 - 表示多选列表的显示个数
         option元素 - 表示下拉列表中的选项
          * selected属性 - 表示当前列表中默认被选中的选项
         optgroup元素 - 另一种多选列表,可以对选项进行分类
     -->
    <!-- 单选列表 -->
    <select>
        <option selected>手机</option>
        <option>电脑</option>
        <option>游戏机</option>
    </select>

    <!-- 多选列表 -->
    <select multiple size="3">
        <option selected>手机</option>
        <option>电脑</option>
        <option>游戏机</option>
    </select>

    <!-- 另一种多选列表 -->
    <select multiple>
        <optgroup>
            <option selected>我是谁</option>
            <option>我在那</option>
            <option>我要干啥</option>
        </optgroup>
        <optgroup>
            <option selected>你谁呀</option>
            <option>你要干啥</option>
            <option>站那别动</option>
        </optgroup>
    </select>
</form>
</body>

组合表单元素

  • <fieldse>t元素 - 表示对表单中的组件进行分组
  • <legend>元素 - 表示对分组的组件设置标题
  • <fieldset>元素 和 <legend>元素 需要配合使用
<body>
<form action="#">
    <!--
         fieldset元素 - 表示对表单中的组件进行分组
         legend元素 - 表示对分组的组件设置标题
         * fieldset元素 和 legend元素 需要配合使用
     -->
    <fieldset>
        <legend>查询</legend>
        <input type="text">
        <input type="submit">
    </fieldset>
</form>
</body>

表单验证

  • 表单验证 - 在表单提交前对表单中数据进行验证

    1. 符合验证 - 提交表单
    2. 不符合验证 - 给出提示,按条件修改
  • 验证属性

    1. required属性 - 表示验证当前组件中的内容是否为空
    2. minlength属性 - 表示当前组件中的内容(文本)最小长度(字或字母的个数)
    3. maxlength属性 - 表示当前组件中的内容(文本)最大长度(字或字母的个数)
    4. min属性 - 表示当前组件中的内容是否小于min的值(使用在数字输入框)
    5. max属性 - 表示当前组件中的内容是否大于min的值(使用在数字输入框)
    6. step属性 - 表示当前组件中的内容每次增加或减少的数值(使用在数字输入框)
  • 表单中也有一些输入框自带验证效果

    1. 邮件输入框 - 按照邮箱地址的要求输入
    2. 网址输入框 - 按照网址的要求输入
    3. 数字输入框 - 只能输入数字
    4. 颜色输入框 - 只能规定颜色
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!