H5 Mosh教程笔记 - 表单简介

作者: Abububiu | 来源:发表于2022-08-22 21:33 被阅读0次

H5 Mosh教程笔记

先列出教程中会用到的网站

网站H5规范验证网站
 CSS格式规范验证网站
 转义字符查询
 免费图片下载网站
 免费图片视频下载网站
 浏览器HTML标签，CSS属性支持情况查询网站
 CSS一致化工具安装
 渐变色代码生成网站
 CSS形状代码生成网站
 字体网站fontsquirrel
字体网站fonts
字体网站myfonts
rem字体大小预览网站
 css雪碧图工具网站，或者谷歌一下css sprites
DataURI生成网站，或者谷歌一下Data URI Generator
CSS滤镜展示
 图片裁切工具网站，或者谷歌一下CSS Clip Generator
不同分辨率图片生成网站
 图片格式转换网站
 矢量图背景网站
 图标字体网站
 表单提交测试网站

教程开始

· 表单

· 创建基本表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.5;
        }

        label {
            display: block;
        }

        /* 选择input标签里type为text和email的 */
        input[type="text"],
        input[type="email"] {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 0.5rem 0.7rem;
        }

        /* 设置input标签属性为text和email的，在获得焦点时的样式 */
        input[type="text"]:focus,
        input[type="email"]:focus {
            color: #7db0fb;
            outline: 0;
            box-shadow: 0 0 0 4px rgba(24, 117, 255, 0.25);
            /* 设置过渡效果，边框颜色过渡时间0.15s，阴影过度时间0.15s，避免边框出现的太突然 */
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        button {
            background: #0d6efd;
            color: #fff;
            border: 0;
            padding: 0.5rem 0.7rem;
            border-radius: 5px;
        }

        .form-group {
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <form action="">

        <div class="form-group">
            <label for="name">Name</label>
            <input id='name' type="text">
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input id='email' type="email">
        </div>

        <button type="submit">Register</button>
        <button type="reset">Reset</button>
    </form>
</body>
</html>

· CSS框架

CSS框架是已经写好的CSS样式，我们只需要使用就好，常见的如bootstrap，Milligram等，使用前只需要引入对应的样式文件，学习或者记住相关的CSS类，就可以很快的搭建出一个好看的网站，例子中使用的是Milligram，不需要写或绑定任何CSS类，就已经有一个不错的效果了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
    <style></style>
  </head>
  <body>
    <form class="" action="">
      <div class="">
        <label class="" for="name">Name</label>
        <input class="" id="name" type="text" />
      </div>

      <div class="mb-3">
        <label class="" for="email">Email</label>
        <input class="" id="email" type="email" />
      </div>

      <button class="" type="submit">Register</button>
      <button class="" type="reset">Reset</button>
    </form>
  </body>
</html>

· 文字输入区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
    <style>
        form {
            width: 50%;

        }

        textarea {
            resize: none;
        }
    </style>
</head>
<body>
    <form action="">
        <!-- input的类型可以是text，email，password，number等 -->
        <input type="text">
        <textarea name="" id="" cols="30" rows="10"></textarea>

        <!-- input的类型可以是text，email，password，number等 -->
        <!-- input和textarea标签的还有其他参数，如placeholder，占位文字 -->
        <!-- readonly values=""，只读，并显示value内容 -->
        <!-- disabled values""，禁用标签，并显示value内容，提交表单时，也不会提交该内容" -->
        <!-- maxlength，最大长度，超过最大长度便不能在输入 -->
        <!-- autofocus，页面加载完成后自动获取焦点 -->
        <input type="text" placeholder="Email">
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
</body>
</html>

· 数据列表(输入建议列表)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <form action="">
        <!-- 通过ID可以让两个标签关联起来，这里的datalist就是关联了list为countries的input标签 -->
        <!-- 所以点击input标签时，展示出数据列表 -->
        <!-- options里的value是提交表单时，需要传给服务器的值 -->
        <!-- 但options里的value会显示在列表里，需要重新命名一个属性，这里命名为data-value -->
        <!-- 再用JS来读取这个属性 -->
        <!-- autocomplete，自动补全输入内容，浏览器会记住上次的输入并提示补全，可以关闭或开启 -->
        <input list="countries" type="text" autocomplete="off">
        <datalist id="countries">
            <option data-value="1">China</option>
            <option data-value="2">USA</option>
            <option data-value="3">England</option>
            <option data-value="4">Koera</option>
        </datalist>
    </form>
</body>
</html>

· Drop-down List，下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <form action="">
        <!-- selected为默认选项 -->
        <!-- select标签还可以添加multiple，表示可以多选 -->
        <select name="" id="">
            <option value="">Select a cource</option>
            <option value="1" selected>HTML</option>
            <option value="2">CSS</option>
            <option value="3">JavaScript</option>
        </select>
    </form>

    <form action="">
        <!-- selected为默认选项 -->
        <!-- select标签还可以添加multiple，表示可以多选 -->
        <select name="" id="">
            <optgroup label="Courses">
                <option value="1" selected>HTML</option>
                <option value="2">CSS</option>
                <option value="3">JavaScript</option>
            </optgroup>
            <optgroup label="Languages">
                <option value="4">Java</option>
                <option value="5">Go</option>
                <option value="7">C++</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

· 复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <div>
            <!-- checked 是默认选项 -->
            <!-- 也有disabled，禁用选项，禁止选择某些checkbox -->
            <input type="checkbox" name="" id="front-end" checked>
            <!-- label-inline 是CSS框架的类，具体参考CSS框架文档 -->
            <label class="label-inline" for="front-end">Front-end</label>
        </div>
        <div>
            <input type="checkbox" name="" id="back-end">
            <!-- label-inline 是CSS框架的类，具体参考CSS框架文档 -->
            <label class="label-inline" for="back-end">Back-end</label>
        </div>
    </form>
</body>
</html>

· 单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <form action="">
        <div>
            <!-- 同样有checked和disabled参数 -->
            <input type="radio" name="membership" id="silver">
            <lablel for="silver" class="label-inline">Silver</lablel>
        </div>
        <div>
            <input type="radio" name="membership" id="gold">
            <lablel for="gold" class="label-inline">Gold</lablel>
        </div>
    </form>
</body>
</html>

· 滑动条

因为涉及到JavaScript，Mosh交给我们自己去学习-_-#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <form action="">
        <input type="range" name="" id="" min="0" max="100" value="90">
    </form>
</body>
</html>

· 文件域(就是选择文件上传)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <form action="">
        <!-- mutiple 参数为是否可以多选 -->
        <!-- accept 限制可选文件类型具体类型可以搜一搜 -->
        <input type="file" name="" id="" accept=".jpg, .png">
    </form>
</body>
</html>

· 将关联输入域分组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
  </head>
  <body>
    <form action="">
      <!-- 一个fieldset就是一个分组 -->
      <!-- legend 就是分组标题，也可以用 section和h标签组合来表示分组及分组的标题 -->
      <fieldset>
        <legend>Billing Address</legend>
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </fieldset>
      <fieldset>
        <legend>Payments</legend>
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </fieldset>
    </form>
  </body>
</html>

· 隐藏域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <form action="">
        <!-- 这一个input并不会显示出来，但在提交表单的时候，会把这个input标签的内容一并提交 -->
        <!-- 切记别放敏感信息，用户虽然看不到，但查看页面源码的时候，可以看到 -->
        <input type="hidden" name="course-id" value="121">
    </form>
</body>
</html>

· 数据校验

表单必备选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <form action="">
        <!-- required表示该项必填 数据验证必须要有-->
        <input type="text" required minlength="3" maxlength="10">
        <input type="email" required minlength="3" maxlength="10">
        <input type="date" required minlength="3" maxlength="10">
        <input type="number" required min="0" max="20">
        <button type="submit">SUBMIT</button>

    </form>
</body>
</html>

· 提交表单

可以使用表单提交测试网站创建自己的表单提交地址(action)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
    />
</head>
<body>
    <!-- action是提交表单时的URL，method是使用哪种http提交方式 -->
    <form action="" method="post">
        <!-- input标签中的name就是提交表单内容的key，对应这个input标签的内容 -->
        <!-- 查看一下formspree中你创建的表单提交内容就能明白了 -->
        <input type="text" placeholder="Name" name="Name">
        <input type="email" name="Email" id="" placeholder="email">
        <button type="submit">SUBMIT</button>
    </form>
</body>
</html>

下一篇
H5 Mosh教程笔记 - 过渡和动画简介
上一篇
H5 Mosh教程笔记 - 图片简介