构建静态页面之 [ 表单 ]

2024年4月29日 164次阅读来源: 蔡志远

表单

表单元素

`<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属性 – 定义控件的类型

date属性值 – 定义日期控件
month属性值 – 定义月份控件
week属性值 – 定义周期控件
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属性 – 设置按钮的类型

submit属性值 – 设置提交按钮(提交表单)
reset属性值 – 设置重置按钮(重置输入框中的内容)
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属性 – 设置图像组件

image属性值 – 定义图像组件
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属性 – 设置提交表单时的方式

application/x-www-form-urlencoded属性值（默认值） – 表示以数据的方式提交表单
multipart/form-data属性值 – 表示将表单以文件的方式提交（在文件域中使用时可以实现文件上传）

实现文件上传

enctype属性的属性值只能为 multipart/form-data
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>元素 – 表示表单中的文本域

cols属性 – 表示文本域中的列
rows属性 – 表示文本域中的行

隐藏域 – 通过type属性的 hidden属性值设置

在页面中没有任何显示效果

<body>
<form action="#">
    <!--
        textarea元素 - 表示表单中的文本域
         * cols属性 - 表示文本域中的列
         * rows属性 - 表示文本域中的行
     -->
    <textarea cols="30" rows="10"></textarea>

    <br>

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

下拉列表

<select>元素 – 表示定义表单中的下拉列表

multiple属性 – 可以将单选列表变成多选列表
size属性 – 表示多选列表的显示个数

<option>元素 – 表示下拉列表中的选项

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. 颜色输入框 – 只能规定颜色

    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016155230
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

表单